Tables and lists
Ensure tables and lists are accessible.
Impact
(How ScanGov measures tasklist priorities.)
Why it's important
Properly structured tables and lists are easier to navigate for users with disabilities, making content more accessible.User stories
As a screen reader user, I want data tables to have clear headers and associations so that I can understand the relationships between rows and columns.
Error
(ScanGov messaging when a site fails a standard)
Tables or lists are not accessible.
Links
- How to structure definition lists correctly
- How to structure definition lists correctly
- About proper list structure
- About proper list structure
- About summary and caption
- About the
headersattribute - About table headers
About
Follow these recommendations to improve the accessibility of tabular and list data:
-
<dl>’s contain only properly-ordered<dt>and<dd>groups,<script>, or `<div>` elements: When definition lists are not properly marked up, screen readers may produce confusing or inaccurate output. -
Definition list items are wrapped in
<dl>elements: Definition list items (<dt>and<dd>) must be wrapped in a parent<dl>element to ensure that screen readers can properly announce them. -
Lists contain only
<li>elements and script supporting elements (<script>and<template>): Screen readers have a specific way of announcing lists. Ensuring proper list structure aids screen reader output. -
List items (
<li>) are contained within<ul>,<ol>or<menu>parent elements: Screen readers require list items (<li>) to be contained within a parent<ul>,<ol>or<menu>to be announced properly. -
Tables have different content in the summary attribute and
<caption>: The summary attribute should describe the table structure, while<caption>should have the onscreen title. Accurate table mark-up helps users of screen readers. -
Cells in a
<table>element that use the[headers]attribute refer to table cells within the same table: Screen readers have features to make navigating tables easier. Ensuring<td>cells using the[headers]attribute only refer to other cells in the same table may improve the experience for screen reader users. -
<th>elements and elements with[role="columnheader"/"rowheader"]have data cells they describe: Screen readers have features to make navigating tables easier. Ensuring table headers always refer to some set of cells may improve the experience for screen reader users.