Understanding Page Structure

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.
• 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 who 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.

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 content.
• 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.

Page Title

Descriptive page titles help people quickly identify the main topic of a page. This is especially beneficial for people with disabilities who use assistive technology such as screen readers or who have cognitive disabilities, For example, many of us have multiple tabs open in a web browser. Without a descriptive page title, it would be impossible to navigate between them. Clear, descriptive page titles not only help those with disabilities but also those without disabilities.

A descriptive page title helps users find content and orient themselves within a website or a large document. The title in a website’s title bar or browser tab confirms users are in the right location. When the page title shows up in other locations, such as site maps, search results, and bookmarks, it helps users quickly find the page they need. The same is true of a page or chapter title in a document’s table of contents. It is hard to identify the purpose of a page without a descriptive page title.

Page Purpose

A page with a clear purpose tells people they are in the right place, even if they are distracted for a moment. If a person is distracted and then returns to the page, they may not remember what they were doing.

• A descriptive heading, title, or short statement at the top of the page explains what the page is about and makes its purpose clear. A summary or abstract makes that purpose clear for longer pages of content.
• Additional wayfinding cues, such as breadcrumb navigation on a website or headers and footers in a document, help people understand how they got to the page and what the context of the page is within the website or document.

Without cues like these, it can be easy for people to lose track of where they are.

Providing a clear purpose helps people understand the page they are on, the purpose of a page, the content of the page, and the context of the page within the site or document. It provides people with information about the context of a page and its components.

A clear purpose should allow people to find answers to the questions in the following table.

User Concerns	Solutions
Tell me where I am: What site is this? What page am I on? In which section?	Page title, Page heading, Current page indicators, Progress indicators These solutions validate that the person is in the right place and help them decide whether to continue there or go to another place.
Tell me what is on this page: What information can I find? What resources are available? What actions can I take?	Page Title, Headings, Summary Statement, Summary, Abstract These solutions help a person find the information they are looking for, decide whether or not to consult the information, and avoid spending time on information that is irrelevant.
Tell me where else I can go: To what other pages? What sections? Is there other information that can be consulted? Are there other actions that can be taken?	Menu (web), Table of Contents (document) These solutions help people decide whether to consult other information on the site or document. Clear titles and headings help make this decision easy.

Making the purpose clear provides the information people need to orient themselves within the site or document, know where they are and where they can go, what information they can consult, and what actions they can take. In conclusion, it means they can navigate through a page, website, or document without getting lost or confused.

The objective is to implement different techniques associated with the organization and structure of the website or document, as well as others that allow providing more information about the purpose of its components to reduce the cognitive load and the time generated by the search for information and the performance of actions on the website.

Headings

Headings help people find the information they need. People can quickly scan a page and understand the content when headings are descriptive and logically organized. A good heading structure reduces cognitive load and provides clear way-finding cues for everyone.

A well-designed document or web page is similar to a well-designed newspaper. It’s easy for people to see a newspaper’s organization. There’s the newspaper’s name in large print at the top of the page, the main story with a large headline and an eye-catching image on the left side of the page immediately below the newspaper’s name, and less important stories with smaller headlines to the side of the main story. Readers can quickly understand:

• what they are looking at,
• what is most important,
• whether or not they want to read the stories.

That doesn’t happen by accident. Many elements work together to make content scannable, and headings play a significant role.

• The increased scannability of distinct and descriptive headings decreases the cognitive load needed to understand information.
• A clear visual hierarchy gives sighted users cues about the content’s organization and the location of specific content.
• Having the visual hierarchy reflected in the underlying page structure provides assistive technology users with the same wayfinding cues.

When you design headings that visually and structurally align with the content, people with disabilities can understand the structure of the content and the hierarchical relationships between sections of content with the same ease as everyone else.

Landmark Regions

Landmark regions identify structural sections of a web page. These sections reflect the page’s visual layout. Landmarks let people using assistive technology jump directly to sections like the header, footer, or main content. They also help people who can’t see the page to understand its organization.

A content block is a section of the page that contains related information. For example, a form requesting a phone number, email address, and location could be a content block called a “contact information” form. A navigation menu could be another content block. You can use landmark regions to identify the structural sections of a web page’s layout, like the header, footer, main content block, supplemental content blocks, navigation blocks, search blocks, and any forms.

People who can see the web page with their eyes can identify the structural sections of a web page through different factors:

• The location of the content on the page. For example, the content block at the end of the page is usually the footer.
• The grouping of related elements. A menu, for example, can contain a group of linked list options.
• The content’s colors and visual styling. Borders and changes in background color, for example, indicate which elements belong within the same content block, where the content block starts, and where it finishes.

For people who cannot see the page and use assistive technology, such as a screen reader, you can provide information about a web page’s structure programmatically (through the code) using landmark regions. Landmark regions are understood by most assistive technology. Landmarks identify the blocks of content on a web page in a way that is equivalent to a sighted person visually scanning a page to identify blocks of content. The landmarks indicate the purpose of each content block, such as the page’s header, footer, and main content areas. Individuals can use this information to decide whether or not they want to go to that content area. This functionality lets people using assistive technology bypass blocks of content they are not interested in, much like “skip links.”

Skip Links

Skip links help people who use keyboards or a keyboard-like interface, screen readers, and other assistive technologies to directly access the main content or other important sections of the web page. Skip links provide a way to quickly bypass blocks of content that are repeated on the website, such as the site navigation. This lets people who can’t use a mouse make fewer clicks to reach the content they are interested in.

Skip links provide direct access to key content on a web page. This lets users bypass blocks of content that are repeated on multiple pages of the website, for example, navigation links, headers, advertisements, etc. In this way, skip links can save time and effort when navigating a web page.

People who can view the website’s content with their eyes and navigate with a mouse can visually identify each block of content and ignore those with which they do not need to interact. For people who use assistive technology, such as a screen reader, or navigate websites with a keyboard or keyboard-like interface, an alternative must be provided to avoid these blocks of repeated content or to which access is not required.

This is especially true for sighted keyboard navigators who navigate content sequentially and often must make dozens of keystrokes before reaching the main content, which can be slow and sometimes painful. Sighted keyboard navigators cannot typically use landmark regions or headings to navigate on a web page and rely instead on techniques like skip links to make navigation easier.

Including skip links is recommended for most websites for this reason, as they support sighted keyboard navigators where headings, landmark regions, and other waypoints may not. Other bypass methods that help to support sighted keyboard navigators can include shortcut keys, a short popup menu with links to key sections of content, and locating important actions early in the tab order.

Watch this short Keyboard Compatibility video from the Web Accessibility Initiative to see how techniques like skip links support keyboard navigators.

Further Reading

Web Accessibility

• Exploration of Content
• Site Structure
• Page Structure
• Page Title
• Page Purpose
• Headings
• Landmark Regions
• Skip Links