====== 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

[[accessibility:aria:landmarks|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 [[https://matatk.agrip.org.uk/landmarks/|Landmarks browser extension]], which makes the landmarks menu visible.

===== Further reading on headings, landmarks, and structure =====

  * [[https://css-tricks.com/why-how-and-when-to-use-semantic-html-and-aria/|Why, How, and When to Use Semantic HTML and ARIA, Adam Silver]]
  * [[https://www.htmhell.dev/adventcalendar/2022/4/|Landmarks and Where to Put Them, Kilian Valkhof]]
  * [[https://www.accessibility-developer-guide.com/knowledge/semantics/|Semantics and their importance for accessibility, Accessibility Developer Guide]]
  * [[https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML|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.”
  * [[https://www.w3.org/WAI/tutorials/page-structure/|Page Structure Tutorial, W3C Web Accessibility Initiative]]


See also [[accessibility:tables|grids and table structure]] and the eg-grid component