• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 11. Creating Accessible Tables > Accessibility Issues for Layout Tables

Accessibility Issues for Layout Tables

Layout tables may create accessibility problems, especially for people using older browsers and/or older assistive technologies. For example, Web designers often use tables to lay out text in side-by-side columns. Older screen readers handled these columns poorly, reading horizontally across the table one line at a time instead of reading the contents of one cell followed by the contents of the next cell. The results were usually unintelligible or hilarious—or both. This problem has been largely resolved now, and contemporary screen readers usually “linearize” the text appropriately. That is, they read the contents of the cell at row 1, column 1 before moving on to row 1, column 2, and so on.

But linearization can create problems of its own, especially when nested tables are used—as we saw in Chapter 7 when we stumbled over the reading order of the text on the Metropolitan Museum’s highlights pages. For example, suppose you’ve set up a table such that the contents of a <td> element at row 1, column 2 is another <table> element, which in turn has several rows and columns. Assistive technologies will read the contents of the cell at row 1, column 1; then, when they come to the <table> element embedded in the next cell, the assistive technology will read that entire table— including any additional tables that may be nested inside it—from left to right and top to bottom, before returning to the cell at row 1, column 3 of the first table. If you found the last couple of sentences confusing, just imagine what listening to a set of tables inside tables inside tables might be like!


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint