Tables and lists
These are opportunities to improve the experience of reading tabular or list data using assistive technology, like a screen reader.
Follow these recommendations to improve the accessibility of tabular and list data:
<dl>’s contain only properly-ordered <dt> and <dd> groups, href="#dls-contain-only-properly-ordered-dt-and-dd-groups---or-div-elements"
When definition lists are not properly marked up, screen readers may produce confusing or inaccurate output. Learn how to structure definition lists correctly.
Definition list items are wrapped in <dl> elements href="#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. Learn how to structure definition lists correctly.
Lists contain only <li> elements and script supporting elements ( href="#lists-contain-only-li-elements-and-script-supporting-elements--and-"
Screen readers have a specific way of announcing lists. Ensuring proper list structure aids screen reader output. Learn more about proper list structure.
List items (<li>) are contained within <ul>, <ol> or <menu> parent elements href="#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. Learn more about proper list structure.
Tables have different content in the summary attribute and <caption>. href="#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. Learn more about summary and caption.
Cells in a <table> element that use the [headers] attribute refer to table cells within the same table. href="#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. Learn more about the headers attribute.
<th> elements and elements with [role=”columnheader”/”rowheader”] have data cells they describe. href="#th-elements-and-elements-with-rolecolumnheaderrowheader-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. Learn more about table headers.
Related
Topics
On this page