Use semantic HTML, landmarks, and tables for accessible content.
One of the most important aspects of digital accessibility is the underlying structure of the page. When you build your website or app using structural elements instead of relying on styles alone, you give critical context to people using assistive technologies (AT), such as screen readers.
Structural elements serve as an outline of the content on the screen, but they also act as anchor points to allow for easier navigation within the content.
When you use semantic HTML elements, the inherent meaning of each element is passed on to the accessibility tree and used by the AT, giving more meaning to the content than non-semantic elements. There may be cases where you need to add additional ARIA attributes to build relationships or to enhance the overall user experience, but in most situations, one of the 100+ HTML elements available should work fairly well on its own.
While this module focuses on the most widely used structural elements critical to digital accessibility, there are certainly additional elements and environmental factors to consider when building structure into your website or app. These examples are an introduction to the topic, rather than all-inclusive.
Users of AT rely on structural elements to give them information about the page's overall layout. When sectioning off large regions of content, you can use either ARIA landmark roles or the newer HTML landmark elements to add structural context to your page.
Landmarks ensure content is in navigable regions. It's recommended that you supply at least one landmark per page.
Some resources suggest combining ARIA and HTML landmarks together to provide better AT coverage. While this type of redundancy shouldn't cause issues for your users, test the patterns using a screen reader to be certain. When in doubt, it's best to default to using only the newer HTML landmark elements, as the browser support is very robust.
Let's compare the HTML landmark elements as mapped to their counterpart ARIA landmark roles.
|HTML landmark element||ARIA landmark role|
Now, let's compare examples of accessible content structure.
When implemented correctly, HTML heading levels form a succinct outline of the overall page content.
There are six heading levels we can use. Heading level one
<h1> is used for the page's highest and most important information, moving incrementally to heading level six
<h6> for the lowest and least important information.
The sequence of the heading levels is important. Ideally, you won't skip heading levels, for example, starting a section with an
<h1> and immediately following it with an
<h5>. Instead, you should progress to the
<h5> in order. Heading level order is especially important to AT users as this is one of their primary ways to navigate through content.
To help you adhere to the proper semantic structure and order for headings, consider decoupling your CSS styles from the heading levels. This allows you more flexibility in heading styles while maintaining the heading level order. It's critical you don't use styles alone to create headings, as these aren't seen by AT as a heading.
When we fake headings, the appropriate structure isn't conveyed to AT users.
Headings are also helpful for people with cognitive and attention deficit disorders. It's important to make the heading content meaningful to help them understand what is most important on the page.
HTML lists are a way to semantically group items similar to one other giving them inherent meaning, much like your grocery store list or that never-ending to-do list you keep ignoring.
There are three types of HTML lists:
When programmed correctly, these elements can inform non-sighted AT users about the visible structure of the list. When an AT encounters a semantic list, it can tell the user the list name and how many items are in it. As the user navigates within the list, the AT will read each list item out loud and tell which number it's in the list—item one of five, item two of five, and so on.
Grouping items into lists also helps sighted people who have cognitive and attention disorders and those with reading disabilities, as list content is typically styled to have more visual whitespace and the content is to the point.
In HTML, tables are generally used for organizing data or page layout.
Depending on the table's purpose, you'll use different semantic structural elements. Tables can be very complex in structure, but when you stick to the basic semantic rules, they are fairly accessible without much intervention.
In the early days of the internet, layout tables were the primary HTML element used to build visual structures. Today, we use a mix of semantic and non-semantic elements such as
<div>s and landmarks to create layouts.
While the days of creating layout tables are mostly over, there are times when layout tables are still used, such as in visually rich emails, newsletters, and advertisements. In these cases, tables used only for layout must not use structural elements that convey relationships and add context, such as
Unlike a layout table, which should be hidden from AT users, a data table and all its elements must be exposed. The structure of data tables is critical for conveying simple and complex information to users.
When a table is structured correctly, relationships form between the column headers and rows and the data within the table. When structured incorrectly, the user is left to decipher the meaning and context of the information in the table.
Depending on the complexity of the table, forming relationships through code is accomplished in different ways. The first step to making a table accessible is to mark up header cells with
<th> and data cells with