Search code examples
htmlcssaccessibilitywai-aria

Can tables be used for layout now that accessibility options exist?


On the W3C page on HTML tables, there is a line, "Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media [such as screen readers]."

We can understand this requirement because screen readers have had to parse HTML content on the page and make sense of it. This makes sense as accessibility was not defined in the before times, in the long long ago. But now, we have accessibility tags which were created to describe the data to screen readers and ignore the layout.

If you defined accessibility on your web page would it matter if you are using tables or CSS?

Basically, I would like others to explain to me that, "...it is or is not OK to use tables or CSS or JavaScript or whatever to layout your content as long as you add accessibility tags".

I say layout the page with JavaScript because we are in the age of RIA and the page can be updated dynamically with JavaScript without refreshing (see WAI-ARIA).

WAI-RIA is the Accessible Rich Internet Applications Suite, defines a way to make Web content and Web applications more accessible to people with disabilities. It especially helps with dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies.).

Update
For the record, I should have mentioned this earlier, but I don't plan to use tables for layout. But mainly I wanted to know if I could. I wanted to know if the advancements we've made in accessibility made it possible to use tables willy nilly, if we wanted without repercussions.

I found this related post, which I think is different than my question but there are some good answers (though out of date and the topic is locked down).


Solution

  • In short, it is (and has always been) possible to use tables for layout with little or no accessibility impact. However, you are making more work for yourself.

    If you use a CSS layout with divs, sections, main etc. you only need to think about ARIA landmarks for accessibility.

    If you use tables for layout, you have to consider nullifying the table roles, then adding HTML5 semantics and landmarks.

    NB: ARIA is not intended to replace regular HTML semantics, it is intended to add semantics for applications that are not (yet) supported by HTML. Oh, and there are no "accessibility tags", but HTML does include tags that help with accessibility, and ARIA adds attributes that help describe functionality.