Making HTML tables accessible
Tables in HTML serve two main purposes: web page layout and organizing data. For the record, it is strongly recommended that you DO NOT use tables for layout purposes on your website.
Websites designed using layout tables require a greater amount of HTML code than websites that do not. The entire table will need to load before the web content populates on the site. For those reasons, it will take a website designed using a layout table much longer to render than one without.
From an accessibility standpoint, screen reading applications require users to navigate using a different set of keyboard keystrokes than they would oustide of a table. For those not familiar with those keystrokes, websites designed with layout tables could create unique accessibility and usability issues.
In this section...
In this section, we will cover how to design tables used to organize data. The following topics will be covered:
- Basic structure of an HTML table
- How screen readers interact with HTML tables
- Adding column and row headers to a table
- Table captions & summary elements
- Making complex tables more accessible