Tables & Lists Accessibility

Tables on the web serve two distinct purposes: displaying data and creating layouts. Data tables organize complex information with clear row and column headers. Layout tables arrange page elements without logical headers.

Assistive technologies interact differently with each table type, making proper implementation essential. For layouts, CSS is now the recommended approach since screen readers process content in the order it appears in the code. For data tables, the HTML <table> element is required.

The <table> element enables screen readers to announce crucial information like the table's dimensions, provide specialized navigation controls, and correctly associate data cells with their headers. This structured markup creates a meaningful experience for users relying on assistive technology.

A caption is similar to a heading for a table that screen readers read out. It helps users identify a table, understand what it's about and decide if they want to read it. While every table may not need a caption, they are generally beneficial. Use the <caption> element right after the opening <table> tag to associate the caption with the respective table.

For more complex tables, consider adding a summary for assistive technology users, including the information stating how the data in the table is organized. You can read about the different ways to add a summary on The World Wide Web Consortium website.^[1]

Data tables effectively organize complex information in a structured format. While simple tables without headers may seem clear to visual users, they create significant barriers for those using assistive technologies who rely on these headers for context.

To ensure accessibility, always include text in every table header cell. This includes the often-overlooked top-left cell that may appear unnecessary in visual layouts but provides crucial orientation information for screen reader users.

Headers establish relationships between data cells and create a framework that helps users understand how information connects. Without proper headers, assistive technology users cannot determine what values relate to which categories, making the data effectively unusable.

Correct markup is key to making your tables accessible. Mark header cells with <th> and data cells with <td> tags. The relationship between the headers and data cells quickly becomes ambiguous in tables with both row and column headers or larger tables with complex data. Define each header's direction by setting the scope attribute to col or row for columns and rows, respectively.

Correct markup adds context for every data cell, giving assistive technology users the same obvious information for visual users. As they move through the table, the screen reader announces column headings when moving left and right and rows headings when moving up and down. For example, when a user in the "Event" column moves one cell down, they'll hear "May 14, Classical Music," learning that on May 14, there will be a classical music concert.

Many screen readers still struggle with complex tables containing merged cells or multiple header levels. These assistive technologies may announce cell relationships incorrectly or fail to maintain proper orientation within complicated structures.

Even when screen readers technically support complex tables, non-visual users face significant cognitive load trying to mentally map and retain relationships between scattered data points. Simpler table structures with clearly defined rows, columns, and single-level headers allow all users to navigate and comprehend information more efficiently, regardless of how they access content.

Normally, web browsers automatically determine the table's width and set the rows and columns' dimensions. If you want to have more control, you also have an option to set the width of your table cells manually. In this case, avoid using absolute values in pixels and go for percentages (%), so browsers can automatically adjust the table width and reduce horizontal scrolling.

When it comes to cell height, avoid setting it manually so that cells can expand to accommodate their content. It's especially important for users with low vision that may enlarge text content.

Lists are great from an accessibility standpoint. Like tables, they help structure data but are easier to navigate for screen reader users as they help them understand the structure of the content. Sometimes the information provided in a simple table can be better presented in a list, so keep it in mind when organizing your data. You need to use appropriate markup for list content for the browsers to automatically add bullets or numbers.

There are 3 ways to organize lists in HTML:

• Use unordered lists with bullet points when the items' order is not relevant
• Use ordered (numbered) lists when the sequence is important
• Use description lists for terms and their definitions: items of such lists are connected programmatically

The HTML <ul> element creates unordered lists that display information without numerical sequence. This container element wraps individual list items, each marked with the <li> tag.

Browsers render unordered lists with bullet points by default, though this styling can be modified with CSS. While items lack explicit numbering, they appear in the same sequence as written in the code, maintaining their relative order.

Unordered lists excel at presenting collections where sequence doesn't matter, such as shopping lists or feature sets. They provide clear visual separation between items and create proper semantic structure that assistive technologies can interpret correctly.

The HTML <ol> element creates ordered lists that display information in a specific sequence. Like unordered lists, this container wraps individual <li> elements that represent each list item.

Browsers automatically number ordered list items sequentially, eliminating the need to manually maintain numbering when adding or removing items. The type attribute allows customization of numbering styles (numbers, letters, or Roman numerals), while the reversed attribute creates countdown sequences.

Ordered lists are ideal for step-by-step instructions, recipes, rankings, or any content where sequence matters. They provide both visual and semantic structure that communicates importance of order to all users, including those using assistive technologies.

Description lists provide a structured way to present term-definition pairs using specialized HTML elements. The <dl> element serves as the container for the entire description list.

Within description lists, two distinct elements work together to create meaningful relationships. The <dt> (definition term) element marks terms being defined, while the <dd> (definition description) element contains the explanation or definition of each term. Each term can have multiple descriptions if needed.

This semantic structure is particularly valuable for glossaries, dictionaries, FAQs, and metadata presentations. Screen readers announce these relationships specifically, helping users understand the connection between terms and their definitions without relying on visual formatting.