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)

inaccessible table example
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

better table-for-layout (if needed) example
Dining Centers Coffee Shops Food Court

Union Dining Center
Mon - Fri: 7:00am - 7:30pm

Residence Dining Center 
Mon - Fri: 7:00am to 7:30pm

West Dining Center
Mon - Thurs: 8:00am - 11:00pm
Fri and Sat: 8:00am - 8:00pm
Sun: 8:00am - 9:00pm

*Station hours can be found on each dining center's webpage.

Union Coffee Shop
Mon - Thurs: 7:00am - 7:00pm
Fri: 7:00am - 5:00pm

Barry Hall
Mon - Fri: 7:30am - 2:30pm

Minard Coffee Shop
Mon - Fri: 7:30am - 4:00pm

Bison Beanery (RDC)
Mon - Fri: 7:00am -7:30pm
Mon - Fri: 7:30am - 2:30pm (Walk-up)

Wild Grounds (NDSCS Fargo)
Mon - Fri: 7:30am - 2:30pm

Twisted Taco
Mon - Fri: 10:30am - 9:00pm

Hoagie Hut
Mon - Fri: 8:00am - 8:00pm

Pizza Express
Mon - Fri: 10:00am - 6:00pm

Burgers @ the U
Mon - Fri: 11:00am - 4:00pm

Panda Express
Mon - Fri: 10:00am - 7:00pm

  • 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.


Keywordsaccessibility table web usability layout   Doc ID96464
OwnerTrevor K.GroupIT Knowledge Base
Created2019-12-06 11:12:59Updated2024-04-01 13:16:33
SitesIT Knowledge Base
Feedback  0   0