Introduction to Page Structure

Summary

Web pages and documents with a clear structure and hierarchy are easy for people to understand. A good structure helps people scan content, find what they’re looking for, and determine where they are.

Page structure is provided by elements like titles, headings, landmark regions, and summaries. These elements identify purpose, make content easy to scan, reveal relationships between different sections of content, and help people quickly find needed information.

Overview

Pages with a clear structure and logical hierarchy help people know they are in the right location, scan content to find what they’re looking for, understand the purpose of each section of content, and determine the relationships between different sections of content. Headings, landmark regions, bypass mechanisms, and other structural elements all contribute to a more consistent, intuitive, and accessible user experience.

The structure of a web page or document helps individuals:

• Explore and understand content.
• Orient themself on the page.
• Identify the main topic and purpose of the content.
• Identify the purpose of each section of content.
• Understand the organization and hierarchy of the content.
• Understand the relationships between different sections of content.
• Quickly locate needed information.
• Easily skip unneeded content.
• Explore content using the structural elements.
• Understand the reading order of the content.
• Reduce their cognitive load.

A meaningful structure consists of many elements:

Page Title

A descriptive page title lets people know they are in the right location.

Main Heading and Summary

A descriptive heading and text at the top of a page identifies its purpose so people can quickly understand the page’s purpose.

Headings

Headings organize and define blocks of content to help everyone understand the logical hierarchy of content. Headings help people scan a web page or document so they can quickly understand the content and find the information they want. Headings also help people using assistive technology understand the content’s structure without relying on the visual layout.

Landmark Regions

Set up landmark regions strategically to help assistive technology users navigate to key sectioning elements like the header, footer, navigation regions, and main content.

Bypass mechanisms

Letting people bypass blocks of content helps them get to the information that interests them quickly. This mechanism primarily benefits people who use keyboards to interact with computers, as they cannot jump directly to a specific part of the page using a mouse.

• Navigational elements like skip links and landmark regions help meet this need for websites.
• Documents can use navigational aids like bookmarks to help people access needed content.

Frames

Providing descriptive titles for frames identifies the content contained within the frame. This makes it easier for people to find content within a frame and determine if they need it.

Reading order

People with visual disabilities depend on screen readers, which process content based on its order in the code. When web pages encode content in a logical order, it ensures that people can consume the information in a reading order that makes sense.

Letting people bypass blocks of content helps them get to the information that interests them quickly. Accessibility guidelines require that you provide a method of bypassing (skipping over) blocks of content repeated on multiple pages. No one method is required to meet the guidelines. Instead, it’s recommended to use all methods as they support different groups of people.

Headings

Support everyone, but are especially helpful for people with cognitive and learning disabilities and people using assistive technology.

Landmark Regions

Primarily support people using assistive technology.

Frame/iframe titles

Primarily support people using assistive technology.

Skip links

Primarily support sighted keyboard navigators.

Navigational elements like skip links and landmark regions help meet this need for websites. For documents, you can use navigational aids like bookmarks to help people access needed content.

Who is Helped

• Clear, concise page titles tell people which page they are on and let them quickly decide whether to read it or switch to a different page.

  • Titles help people who use assistive technologies like screen readers and people with cognitive and learning disabilities.

• Top-level headings and summaries that identify the purpose of a page make it easier for people to decide whether they want to read a page.

  • These elements can help people with cognitive and learning disabilities understand content.
  • They can also help people with visual and motor disabilities by making it easier to skip irrelevant content and avoid unnecessary effort.

• Headings are a primary means of organizing information on a page, so, unsurprisingly, good headings help many groups of people.

  • People who are blind and using a screen reader rely on headings as a primary means of orientation and navigation.
  • People with motor-skill or dexterity-related disabilities who rely on voice control or other alternative input devices may also depend on headings for orientation and navigation.
  • People who are neurodivergent often leverage headings to obtain needed organizational and wayfinding cues.
  • Recognizable headings also help people with low vision locate and orient themselves within a page.

• The ability to bypass blocks of content, especially redundant content like menus, helps most people who are keyboard navigators.

  • Skip links let keyboard navigators, especially sighted keyboard navigators, jump to key content areas.
  • Landmark regions let screen reader users jump directly to important structural areas of a page.

• A correctly structured page improves people’s navigation and wayfinding.

  • People who are blind or have low vision can navigate and find information easily using screen readers. For example, well-defined titles help people orient themselves and understand the hierarchy of content.
  • People who have difficulty using the mouse can easily navigate using the keyboard. Jump links and bookmark regions make it easy to navigate without requiring precise pointer actions.
  • For people with cognitive disabilities, navigation and wayfinding become much easier. For example, clear headings can help them follow the structure of the contenttext.

• Providing descriptive titles for frames helps people in their search for needed information.

  • People with visual disabilities benefit from frames with descriptive title as the title tells them what to expect from the content in the frame. This functionality makes it easier to find needed content when it is embedded within a frame.

• The reading order makes it easy to navigate people the content.

  • Blind or low-vision individuals who rely on screen readers to access content can hear information presented coherently and understand the context of the web page more effectively.
  • People who have difficulty processing complex information or following complicated instructions can benefit from a clear, logical reading order.

Ultimately, having a clear structure for web pages and documents provides better wayfinding cues for everyone.