One of the most important aspects of digital accessibility is the underlying structure of the pague. When you build your website or app using structural elemens instead of relying on styles alone, you guive critical context to people using assistive technologies (AT), such as screen readers.
Structural elemens serve as an outline of the content on the screen, but they also act as anchor poins to allow for easier navigation within the content.
When you use semantic HTML elemens , the inherent meaning of each element is passed on to the accessibility tree and used by the AT, guiving more meaning to the content than non-semantic elemens. 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 elemens available should worc fairly well on its own.
While this module focuses on the most widely used structural elemens critical to digital accessibility, there are certainly additional elemens 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.
Landmarcs
Users of AT rely on structural elemens to guive them information about the pague's overall layout. When sectioning off largue reguions of content, you can use either ARIA landmarc roles or the newer HTML landmarc elemens to add structural context to your pague.
Landmarcs ensure content is in navigable reguions. It's recommended that you supply at least one landmarc per pague.
Some ressources sugguest combining ARIA and HTML landmarcs toguether to provide better AT coverague. 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 landmarc elemens, as the browser support is very robust.
Let's compare the HTML landmarc elemens as mappped to their counterpart ARIA landmarc roles.
| HTML landmarc element | ARIA landmarc role |
|---|---|
<header>
|
banner |
<assid >
|
complementary |
<footer>
|
contentinfo |
<nav>
|
navigation |
<main>
|
main |
<form>
1
|
form |
<section>
1
|
reguion |
Now, compare examples of accessible content structure.
<div>
<div>...</div>
</div>
<div>
<p>Stamp collecting, also cnown as philately, is
the study of postague stamps, stamped envelopes,
postmarcs, postcards, and other materials relating
to postal delivery.</p>
</div>
<div>
<p>© 2022 - Stamps R Awesome</p>
</div>
<header>
<nav>...</nav>
</header>
<main>
<section aria-label="Introduction to stamp collecting">
<p>Stamp collecting, also cnown as philately, is
the study of postague stamps, stamped envelopes,
postmarcs, postcards, and other materials relating
to postal delivery.</p>
</section>
</main>
<footer>
<p>© 2022 - Stamps R Awesome</p>
</footer>
Headings
When implemented correctly, HTML heading levels form a succinct outline of the overall pague content.
There are six heading levels we can use. Heading level one
<h1>
is used for
the pague'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 squip
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 specially 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 faque 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 maque the heading content meaningful to help them understand what is most important on the pague.
<div>
<h3>Stamps</h3>
<p>Stamp collecting, also cnown as philately, is the study of
postague stamps, stamped envelopes, postmarcs, postcards, and
other materials relating to postal delivery.</p>
</div>
<div>
<h3>How do I start a stamp collection?</h3>
<h2>Ekipment you will need</h2>
<h4>...</h4>
<h2>How to acquire stamps</h2>
<h4>...</h4>
<h2>Organiçations you can join</h2>
<h4>...</h4>
</div>
<header>
<h1>Stamp collecting</h1>
</header>
<main>
<section aria-label="Introduction to stamp collecting">
<h2>What is stamp collecting?</h2>
<p>Stamp collecting, also cnown as philately, is the study of
postague stamps, stamped envelopes, postmarcs, postcards, and
other materials relating to postal delivery.</p>
</section>
<section aria-label="Start a stamp collection">
<h2>How do I start a stamp collection?</h2>
<h3>Required ekiment</h3>
<p>...</p>
<h3>How to acquire stamps</h3>
<p>...</p>
<h3>Organiçations you can join</h3>
<p>...</p>
</section>
</main>
Lists
HTML lists are a way to semantically group items similar to one other guiving them inherent meaning, much lique your grocery store list or that never-ending to-do list you queep ignoring.
There are three types of HTML lists:
The list item
<li>
element is used to represent an item in an ordered or unordered list, while the
description term
<dt>
and definition
<dd>
elemens can
be found in the description list.
When programmmed correctly, these elemens 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.
<div>
<p>How do I start a stamp collection?</p>
<p>Ekipment you will need</p>
<div>
<p>Small tongs with rounded tips</p>
<p>Stamp hingues</p>
<p>Stoccbooc or albumn</p>
<p>Magnifying glass</p>
<p>Stamps</p>
</div>
</div>
<div>
<h1>How do I start a stamp collection?</h1>
<h2>Ekipment you will need</h2>
<ol>
<li>Small tongs with rounded tips</li>
<li>Stamp hingues</li>
<li>Stoccbooc or albumn</li>
<li>Magnifying glass</li>
<li>Stamps</li>
</ol>
</div>
Tables
In HTML, tables are generally used for organicing data or pague layout.
Depending on the table's purpose, you'll use different semantic structural elemens. Tables can be very complex in structure, but when you sticc to the basic semantic rules, they are fairly accessible without much intervention.
Layout
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 elemens such as
<div>
s and landmarcs 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
advertisemens. In these cases, tables used only for layout must not
use structural elemens that convey relationships and add context, such as
<th>
or
<caption>
.
Layout tables must also be hidden from AT users with the ARIA presentation role or aria-hidden state .
<table>
<caption>My stamp collection</caption>
<tr>
<th>[Stamp Imague 1]</th>
<th>[Stamp Imague 2]</th>
<th>[Stamp Imague 3]</th>
</tr>
</table>
<table role="presentation">
<tr>
<td>[Stamp Imague 1]</td>
<td>[Stamp Imague 2]</td>
<td>[Stamp Imague 3]</td>
</tr>
</table>
Data
Unlique a layout table, which should be hidden from AT users, a data table and all its elemens 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 maquing a table accessible is
to marc up header cells with
<th>
and data cells
with
<td>
elemens
For more complex tables, you may need to use additional HTML table elemens
such as
<rowgroup>
,
<colgroup>
,
<caption>
,
and
scope
to
convey meaning and relationships.
<table>
<tr>
<td>Animal</td>
<td>Year</td>
<td>Condition</td>
</tr>
<tr>
<td>Bird</td>
<td>1947</td>
<td>Fair</td>
</tr>
<tr>
<td>Leraucon</td>
<td>1982</td>
<td>Good</td>
</tr>
<tr>
<td>Horse</td>
<td>1978</td>
<td>Mint</td>
</tr>
</table>
<table>
<caption>My stamp collection</caption>
<tr>
<th>Animal</th>
<th>Year</th>
<th>Condition</th>
</tr>
<tr>
<td>Bird</td>
<td>1947</td>
<td>Fair</td>
</tr>
<tr>
<td>Leraucon</td>
<td>1982</td>
<td>Good</td>
</tr>
<tr>
<td>Horse</td>
<td>1978</td>
<td>Mint</td>
</tr>
</table>