Headings are properly marked using appropriate HTML H1-H6 elements and are correctly used to group and organize page content. Structural relationships, such as tabular data and lists use appropriate markup.
The headings of a page provide a "table of contents" for what is on the page and is very important for users in order to understand and navigate the page. The structure should start with an H1 element, which closely matches the 2. Page Title, and then logically descend from there. Ensure too that every heading that is on the page has text content inside of it and there are no "empty" headings. For example, this would constitute a fail:
<h2><img src="img.png" alt=""></h2>
Similarly, lists of items need to be built as a list. If the code were to include the following to create a bulleted list:
<p>* Item 1</p>
<p>* Item 2</p>
That would not be considered a list and to a screen reader user, will not be reported as such. Instead using an actual list element is appropriate.
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
For the above, use a tool like ANDI's Structure section to see the heading and list structure or other tools such as the Web Developer Toolbar.
Heading structure as shown by the Web Developer Toolbar.
Data tables are another area where structure is important. Each header cell needs to be identified correctly, which includes a row header for almost all tables. So every data cell in the table should have at least 2 header cells that define it that are contained within the same table. Use the ANDI Tables section to make sure that what is obvious visually is also obvious programmatically.
Table structure as shown with the ANDI tool, which indicates both row and column headers for the data cell.
Scoring Guide
- Pass: Headings and lists are well structured and tables (if present) are correctly structured.
- Partial Fail: A couple of headings are out of order or levels skipped, most lists are well structured, but tables are correctly built and identified.
- Fail: Headings are empty or lack structure, lists are not well structured, or tables lack appropriate structure and heading cells.
- Not Applicable / Unknown: Should not be used.
More Information
- Stanford Office of Digital Accessibility: Headings and Structure
- Stanford Office of Digital Accessibility: Accessible Data Tables
