User Tools

Site Tools


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

See also grids and table structure and the eg-grid component

accessibility/structure.txt · Last modified: 2023/07/10 17:26 by scl

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki

© 2008-2022 GPLS and others. Evergreen is open source software, freely licensed under GNU GPLv2 or later.
The Evergreen Project is a U.S. 501(c)3 non-profit organization.