Universal Design for Web Applications

Readability, Layout, and Design

Depending on how much data you are displaying, you may want to tweak the visual design to ease reading. Assuming you’ve read this far and you’ve provided the necessary HTML framework for your data, you can easily change cell colors, padding, margin, and borders to make the data easier to read.

Figure 6-3. Bus schedule, where blue indicates bikes are not allowed…at least onscreen; the blue disappears in black and white and the information that should be conveyed is lost—another reason additional coding measures are needed

Color

Color is a beautiful thing. We encourage the use of “zebra-striping”—coloring every other row—to make a table easier to read. However, we do discourage the use of color to provide important information. Figure 6-3 shows a bus schedule (from http://bart.gov/stations/schedules/lineSchedules_ROUTE11_WD.asp) with several cells shaded blue, indicating bikes aren’t allowed on the bus at those times.

If someone is not perceiving color—either because of low contrast on a mobile phone or because he is using a screen reader—he will not have access to that important information. Instead, use an abbreviation like “NB” or an icon with alt text that conveys “no bikes.”

Adding an asterisk to each cell provides a nonvisual indicator:

<td class="nobike">*6:27</td>

Another option is an image with a text equivalent:

<td ...