Page Structure Concepts

Status: This is not ready for detailed review. It is an in-progress, unapproved editor’s draft.

To help users orient themselves on web pages, the content and different areas needs to be structured so that it is easy for assistive technology to identify regions and content bits. This tutorial shows how to use HTML elements and WAI-ARIA attributes to allow users to navigate through the page and consume the content efficiently.

  • Landmarks: By adding roles to HTML elements, the purpose of their content is conveyed to users.

  • Headings: Convey the page’s structure by adding headings of different levels.

  • Content Structure: Mark up content so assistive technology can present information in a way the user needs it.

  • Styling: Apply a distinct hierarchy to the visual page’s design, so visual users can easily determine what each section of the page does.

  • In-page Navigation: Provide navigation aids to help users to get around the page and discover the various sections of the page. Consider adding a “table of content” for longer pieces of content.

Why is this important?

The content of the page is the reason why people are visiting websites in the first place and not being able to find content or navigate inside individual pages can create major accessibility barriers. An accessible page structure benefits users in many situations such as:

  • People using screen readers can skip to the content directly and navigate to sections that are important to them. Content is read out in the way it is intended.
  • People using distraction-free reading plugins will receive better results if the main content is easily to determine.
  • People using certain browser plugins can use landmark roles to jump to specific sections on a page.
  • Keyboard users can save the time and trouble to navigate through a number of links using the tab key.
  • Search engines can use the data to make better predictions on the real content of a web page.