Page Structure Tutorial

Well-structured content allows more efficient navigation and processing. Use HTML and WAI-ARIA to improve navigation and orientation on web pages and in applications.

• Page Regions: Identify and mark up regions on web pages using HTML5 and WAI-ARIA roles.

• Labeling Regions: Label regions to allow users to distinguish and access them.

• Headings: Add headings and nest them logically to label sections of web pages according to their relationships and importance.

• Content Structure: Mark up the content on a page in a way that uses appropriate and meaningful elements.

Why is this important?

Pages with well-structured content are essential for many web users, for example:

• People with cognitive and learning disabilities can more easily find and prioritize content on the page.
• People using screen readers can skip to the main content directly and navigate to sections that are important to them.
• Keyboard users can browse pages and their sections more efficiently. Otherwise, users have to press the tab key multiple times to navigate through all links in each section.
• People using software that only shows the main content of a web page, such as people with cognitive disabilities, will receive better results if the page structure is correctly marked up.
• People with visual impairments, including people with low vision, have cues that provide orientation on the page and in the content.
• Mobile web users often have access to a so-called “reader” or “reading” mode that will only show the main content of the page if it is correctly marked up.
• People using certain browser plugins can use landmark roles to jump to specific sections on a page.
• There are additional benefits to a good, accessible page structure, beyond those experienced by people with disabilities. As an example, search engines can use the data to better index the content of a page.