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.
