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.
<header>
<nav>
<main>
<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
- W3C ARIA Landmarks Example
- Youtube - Leonie Watson - How ARIA landmark roles help screen reader users
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 themain
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.
Example
Another great example is to use a list to help communicate the sibling relationship between items in a row of related cards.
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