Accessibility of text arranged in table for layout
Using a table to "lay out" content visually can easily result in inaccessible content. Here's some strategies to make your content better.
Example table (Not accessible table)
Dining Centers |
Coffee Shops |
Food Court |
|---|---|---|
| Union Dining Center | Union Coffee Shop | Twisted Taco |
| Mon-Fri: 7am-7:30pm | Mon-Thurs: 7am-7pm | Mon-Fri: 10:30am - 9pm |
| Fri: 7am-5pm | ||
| Residence Dining Center | Hoagie Hut: | |
| Mon-Fri: 7am-7:30pm | Barry Hall | Mon-Fri: 8am-8pm |
| Mon-Fri: 7:30am-2:30pm | ||
| West Dining Center | Pizza Express | |
| Mon-Thurs: 8am-11pm | Minard Coffee Shop | Mon-Fri: 10am-6pm |
| Fri-Sat: 8am-8pm | Mon-Fri: 7:30am-4pm | |
| Sun: 8am-9pm | Burgers @ the U: | |
| Bison Beanery (RDC) | Mon-Fri: 11am-4pm | |
| *Station hours can be found | Mon-Fri: 7am-7:30pm | |
| on each dining center's | Mon-Fri: 7:30am-2:30pm (Walk-up) | Panda Express |
| webpage. | Mon-Fri: 10am-7pm | |
| Wild Grounds (NDSCS Fargo) | ||
| Mon-Fri: 7:30am-2:30pm |
**This table is an example and does not accurately reflect dining center hours. Visit https://www.ndsu.edu/dining/about/hours for accurate dining center hours**
Accessibility issues in the example
- The most significant problem with this table is that it is not understandable when linearized (as in, when it's read).
The original table has no cell borders and so a visitor is expected to visually "stitch together" data that is arranged nearby. If you click, focus, or hover within the example table, the cell borders are highlighted to give you a better idea of how this table was set up.
In this particular example the table contents aren't actually tabular data, but ignoring that for a moment, either the data needs to be arranged as tabular data (headings need to be consistently at the top and/or left of the table with scopes defined) so that accessibility tools can make sense of the contents or the related data points need to be gathered into a single cell so they are read together. It's best not to use tables for layout like this, but again we'll ignore that for now. - This table contains HTML headings (here they are "Dining Centers," "Coffee Shops," and "Food Court"). Tables may not contain h1, h2, h3, etc. heading elements . It is not valid HTML.
A table's heading cells should be defined as a table heading cell <th> with a defined scope, such as <th scope="col"> so that accessibility tools can communicate that the table heading refers to the contents of the column as opposed to the contents of the row ( <th scope="row"> ).
Improved information layout
| Dining Centers | Coffee Shops | Food Court |
|---|---|---|
|
Union Dining Center Residence Dining Center West Dining Center *Station hours can be found on each dining center's webpage. |
Union Coffee Shop Barry Hall Minard Coffee Shop Bison Beanery (RDC) Wild Grounds (NDSCS Fargo) |
Twisted Taco Hoagie Hut Pizza Express Burgers @ the U Panda Express |
- In the improved version, the contents make sense when the table/document is linearized. Even better would be to use a non-tabular markup to make 3 columns (such as a CSS Grid, if you're able to edit the HTML content or using NDSU's CMS service)
- The days and hours are improved so they read well (or at least better) using accessibility tools and translators (think about visitors whose first language is not English and to whom "Thurs" might be confusing). You might not be able to edit using this syntax in some tools, and in that case it would be better to use the full word (such as "Sunday") rather than an abbreviation ("Sun").
- There's still more changes that could help accessibility--such as using a definition list (<dl>) to mark up the various locations and their hours; however your web content editor might not facilitate that. Some alternatives include to make the locations into a regular unordered list (<ul>) or to use a heading for each location followed by a paragraph with its hours.