Meaningful Page Structure

Creating a meaningful content structure is one important way to give people with disabilities the best possible opportunity for accessibility.

Organizing Page Content with Landmark Regions

Web design begins with a foundational layout, often including a page header and footer, site navigation, main content area, and more.

When a page is visually organized into sections but the purpose of those sections is not communicated to screen reader users, it can make understanding content more complicated for these users.

This is why it is essential to divide our page into 'landmark' sections or regions to help communicate content structure for users who cannot see the screen.

How Landmark Regions Can Improve Screen Reader Experience

Landmark regions are a means to improve wayfinding and orientation for screen reader users.

You can use HTML5 sectional elements and WAI-ARIA landmark roles to help screen reader users understand the layout of the user interface.

A screen reader user can pull up a list of the landmarks on a page to quickly understand the essential parts and organization. They can then jump directly to a landmark without listening to the entire page from top to bottom.

HTML5 Landmark Regions

HTML5 has several elements for structuring the content into valuable regions.

  • <header> - Document header
  • <nav> - Site navigation
  • <main> - Main body content
  • <section> - Document section (generic)
  • <article> - Independent, self-contained body content
  • <aside> - Supplementary content
  • <footer> - Document footer

Ensure that all content on the page is encapsulated inside a sectioning element so there is no "orphaned" content.

When using the <main> element or role= "main", ensure it encloses the page's primary content. It shouldn't include sections like the site-wide navigation, header, or supplemental content specific to the page.

We can illustrate how the following document landmarks can be included in a page layout.

  1. <header>
  2. <nav>
  3. <main>
  4. <aside>

Illustration of a generic page layout showing document landmarks including 1 header, 2 nav, 3 main and 4 aside

ARIA & Landmark Regions

The WAI-ARIA specification also has a corresponding set of "landmark" roles that can be used to convey the same information as HTML5 landmark regions.

We should only use the corresponding WAI-ARIA landmark roles when using the HTML5 sectioning elements is not possible.

Duplicate landmarks

Duplicate landmarks should have uniquely different names.

For example, if you have two <nav> region elements in the document, differentiate between them by giving them unique names.

Further Information

Headings

Content design often uses visual styling attributes like font size, weight, and color to convey the relative importance and structure of content provided on a page.

However, not everyone will be able to perceive visual font styling and arrive at the same understanding of the content structure.

HTML markup offers six levels of heading tags <h1> to<h6> to help create a more accessible content structure that does not depend entirely on visual font styling.

How Headings Relate to Screen Reader Experience

Heading markup provides additional benefits to the user experience as well.

When a sighted user scans a website or application, they take note of headings, controls, and visual groupings. Headings create a "document outline" that users with impaired vision can use to get the same sense of the content's structure.

The headings on a page are the primary means of achieving this structure, so headings must be clear, descriptive, logical, and comprehensible.

Note that it is also vital to consider landmarks together with the heading structure. Where possible, they should reinforce each other.

Who is Responsible for Defining Page Headings?

Page headings and heading levels must be decided during the design stages, then communicated to development.

Content Heading Guidelines

  • The main part of your page should begin with a level 1 heading, clearly describing the page's primary purpose.
  • There should be one and only one h1 on the page.
  • The h1 should be the first heading inside the main landmark.
  • Heading levels should align with the visual importance of the heading. Level 1 represents the most significant, most prominent title text on the page.
  • Heading levels are intended to be used to represent the content hierarchy. Skipping heading levels should be avoided if possible. Where unavoidable, minimise the impact of the skipped levels (e.g. Avoid following a level 1 heading with a level 5 heading.).

Further Information :

Lists

When content is visually shown to express structure, such as a heading or a list, that same structure should be determined from the markup.

Assistive technology users will not understand the relationships conveyed visually in the content layout without semantic HTML elements. Without using the correct markup, users will not navigate to and within lists using the features their assistive technology software provides.

How Lists Relate to Screen Reader Experience

Using HTML lists provides a screen reader with information such as the number of items in the list and what they are currently listening to. This provides a comparable audible experience to what is presented visually.

Lists are often thought of as simple numbered <ol> or bulleted <ul> lists of items.

But, it can also be helpful to use HTML list markup in more creative ways to group related items together.

For example, a visual diagram showing the user which step they are currently working on out of a total number of steps in a more significant, multi-step flow.

Example

A great example of this is to use a list to express chronologically ordered messages in a conversation thread.

Stylised illustration of a message thread with four items

Example

Another great example is to use a list to help communicate the sibling relationship between items in a row of related cards.

Stylised illustration showing a horizontal row of user profile cards representing colleagues in team

Further Information :

Tables

Content is often arranged into rows and columns on a page to better use screen real estate. Sometimes, the content will have direct logical relationships in the rows and columns, such as in a calendar or schedule. These relationships must be maintained for users who cannot perceive the visual layout of the content in the rows and columns.

HTML markup offers the <table> element that can be used when a design calls for data with logical relationships.

How Tables Relate to Screen Reader Experience

Screen readers allow users to navigate a table while automatically providing contextual column header names regardless of which row they are focussed on.

Similarly, users can also traverse data cells vertically. If applicable to the design, screen readers can also automatically provides a contextual row header.

Further Information :

Table Concepts - WAI Web Accessibility Tutorials

Table Guidelines

  • A <table> must not be used for layout and presentation. It should be used to markup tabular data and information.
  • Data tables must provide column headers and should provide row headers.
  • Avoid empty column headers in data tables.
  • Where applicable, the first column of a data table should provide descriptive row headers.
  • Provide a descriptive heading or caption to help introduce users to the data presented in the table.
  • Avoid nesting form controls inside table cells, since this will increase the information a screen reader user must process and comprehend.
  • Avoid complex tables. Instead, consider breaking it into multiple tables or presenting data in another format.

Can't Find What You Need?

Check out our FAQ section which may help you find the information you're looking for.

FAQ Section