Meaningful Page Structure
Creating a meaningful content structure is one important way to give people with disabilities the best possible opportunity for accessibility.
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.
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 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.
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 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.
- W3C ARIA Landmarks Example
- Youtube - Leonie Watson - How ARIA landmark roles help screen reader users
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
<h6> to help create a more accessible
content structure that does not depend entirely on visual font styling.
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.
Page headings and heading levels must be decided during the design stages, then communicated to development.
- 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
h1on the page.
h1should be the first heading inside the
- 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.).
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.
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.
A great example of this is to use a list to express chronologically ordered messages in a conversation thread.
Another great example is to use a list to help communicate the sibling relationship between items in a row of related cards.
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
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.
<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