Table of Contents
Headings, Landmarks, and Structure
Pages without semantic structural markup will sound like one long run-on sentence when read aloud by a screen reader. With proper structure, the user will get a better idea of what the content means. For example:
- Headings will be prefixed with “heading, level [one, two, etc.]”
- Unordered lists will be prefixed with “list, [four] items”
- Tables will have their headers described, and extra navigation features will become available
See the ARIA section for more detail.
Testing Landmarks and Structure
You can test page structure by turning off CSS in your developer tools. If you can still distinguish headings, lists, tables, links, and buttons, the structure is probably not bad.
Test ARIA landmarks using the Landmarks browser extension, which makes the landmarks menu visible.
Further reading on headings, landmarks, and structure
- HTML: A good basis for accessibility, MDN “A great deal of web content can be made accessible just by making sure the correct Hypertext Markup Language elements are used for the correct purpose at all times. This article looks in detail at how HTML can be used to ensure maximum accessibility.”
See also grids and table structure and the eg-grid component