Can I use Layout Tables and still have an accessible site?

Although the WCAG 2 doesn’t prohibit the use of table layouts it does recommend using CSS based layouts instead. Using the HTML Table element for layout purposes can cause issues for assistive technologies (like screen readers) and goes against the recommended W3C coding practice of separating presentation from content.

Separating presentation (CSS) from content (HTML) ensures a more consistent and predictable user experience for assistive technologies and eliminates the risk of running into WCAG issues like, F49: Failure of Success Criterion 1.3.2 due to using an HTML layout table that does not make sense when linearized.

However, there are many websites that still use table layouts and although it’s not a ‘best practice’ it’s okay if they are implemented correctly.

Here are a few things to keep in mind when using layout tables on your site…

• Never use table headers or table captions in layout tables. Doing so causes screen readers to try to read layout tables as data tables, thus making the perception of the page much more difficult (and sometimes impossible) for the user of a screen reader.
  
  
  


• Make sure the information provided in the layout table is presented in linear fashion. If the information is presented in linear fashion and there are no table headers or captions, the information will be read cleanly and the user of the screen reader won’t even know that a layout table was used.
  
  
  


• Make sure to wrap the table so that it is not cut off for users of screen magnification - particularly for those who are viewing the document on a smaller screen.