Headings
- Navigating through the
<h1>and<h2>give a user an overview of a page and how its content is structured. The<h3>through<h6>elements provide a quick understanding of the details in each section. - Heading tags should be in order. That means an
<h1>is followed by an<h2>, an<h2>is followed by a<h2>or<h3>and so on. It is ok to skip heading levels when going up in order (ex.<h4>to<h1>). - Keep heading tags consistent. Inconsistently implementing headings can create confusion and frustration for users using assistive technologies.
- Do not style text to give the visual appearance of headings - use actual heading tags.
WCAG 2.1 Guidelines
1.1.1 Non-text Content - All non-text content that is presented to the user has a text alternative that serves the equivalent purpose (some exceptions). (Level A)
Note: If non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it does not need text alternatives.
I’m writing the code,
but I do not realize,
hours have gone by.
My eyes are bloodshot,
My fingertips are bleeding,
but I carry on.
<section class="headings-section">
<div>
<h1>I’m writing the code,</h1>
<h2>but I do not realize,</h2>
<h3>hours have gone by.</h3>
<h4>My eyes are bloodshot,</h4>
<h5>My fingertips are bleeding,</h5>
<h6>but I carry on.</h6>
</div>
</section>
Copied!
Lists
- Creating accessible lists is fairly straight-forward and easy if you use the correct mark-up.
- Use
olmarkup to group ordered lists; useulmarkup to group unordered lists; and usedlmarkup to group terms with their definitions. - Simple comma-separated lists may not need list markup, but longer lists or groups of links should have it.
WCAG 2.1 Guidelines
1.3.1 Info and Relationships - Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)
Ordered List
Best Nikola Tesla Quotes
- "Our virtues and our failings are inseparable, like force and matter. When they separate, man is no more."
- "The scientists of today think deeply instead of clearly. One must be sane to think clearly, but one can think deeply and be quite insane."
- "It is paradoxical, yet true, to say, that the more we know, the more ignorant we become in the absolute sense, for it is only through enlightenment that we become conscious of our limitations. Precisely one of the most gratifying results of intellectual evolution is the continuous opening up of new and greater prospects."
Unordered List
List of Unusual Dog Breeds
- Beauceron
- Belgian Malinois
- Entlebucher Mountain Dog
- Keeshond
- Kooikerhondje
- Mudi
- Petit Basset Griffon Vendéen
- Portuguese Podengo Pequeno
- Schipperke
- Xoloitzcuintli
Definition List
- Vegetables That Are Technically Fruits
- Avocados
- Bell Peppers
- Cucumbers
- Eggplants
- Pumpkins
- Tomatoes
- Zucchinis
<section class="lists-section1">
<h3>Ordered List</h3>
<h4>Best Nikola Tesla Quotes</h4>
<ol>
<li>"Our virtues and our failings are inseparable, like force and matter. When they separate, man is no more."</li>
<li>"The scientists of today think deeply instead of clearly. One must be sane to think clearly, but one can think deeply and be quite insane."</li>
<li>"It is paradoxical, yet true, to say, that the more we know, the more ignorant we become in the absolute sense, for it is only through enlightenment that we become conscious of our limitations. Precisely one of the most gratifying results of intellectual evolution is the continuous opening up of new and greater prospects."</li>
</ol>
</section>
<section class="lists-section2">
<div class="break"></div>
<h3>Unordered List</h3>
<h4>List of Unusual Dog Breeds</h4>
<ul>
<li>Beauceron</li>
<li>Belgian Malinois</li>
<li>Entlebucher Mountain Dog</li>
<li>Keeshond</li>
<li>Kooikerhondje</li>
<li>Mudi</li>
<li>Petit Basset Griffon Vendéen</li>
<li>Portuguese Podengo Pequeno</li>
<li>Schipperke</li>
<li>Xoloitzcuintli</li>
</ul>
</section>
<section class="lists-section3">
<div class="break"></div>
<h3>Definition List</h3>
<dl>
<dt>Vegetables That Are Technically Fruits</dt>
<dd>Avocados</dd>
<dd>Bell Peppers</dd>
<dd>Cucumbers</dd>
<dd>Eggplants</dd>
<dd>Pumpkins</dd>
<dd>Tomatoes</dd>
<dd>Zucchinis</dd>
</dl>
</section>
Copied!
Tables
- Tables with one header and simple data are fairly accessible out of the box and may not need additional accessibility updates. Always use the simplest table configuration possible.
- When your tables get more complex, use the
<th>element to identify the header cells by adding a scope attribute. For header rows use<th scope="row">. For header columns use<th scope="col"> - Add the optional
<caption>element before the table content to give users more information on the table contents. Think of it as a headline for your table.
Resources
WCAG 2.1 Guidelines
1.3.1 Info and Relationships - Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.
Option #1: Table with one header
| Date | Event | Venue |
|---|---|---|
| 3 February | Surprise Party | Party Town USA |
Option #2: Table with two headers and caption
| Color | French | German | Italian | Portuguese | Spanish |
|---|---|---|---|---|---|
| Red | rouge | rot | rosso | vermelho | rojo |
| Orange | orange | orange | arancione | laranja | anaranjado |
| Yellow | jaune | gelb | giallo | amarelo | amarillo |
| Green | vert | grün | verde | verde | verde |
| Blue | bleu | blau | blu | azul | azul |
| Purple | pourpre | lila | porpora | roxo | morado |
Option #3: Complex Table
| Kingdom | Phylum | Class | Order |
|---|---|---|---|
| Animalia | Chordata | Mammalia | Carnivora |
| Animalia | Arthropoda | Insecta | Lepidoptera |
| Animalia | Echinodermata | Asteroidea | Forcipulatida |
| Family | Genus | Species | Common |
| Felidae | Panthera | Panthera tigris | Tiger |
| Danaidae | Dannaus | Plexippus | Monarch Butterfly |
| Asteriidae | Asterias | Asterias amurensis | Northern Pacific seastar |
Option #4: Responsive Table
| House Side | House Address | Other | Other Address | Senate Side | Senate Address |
|---|---|---|---|---|---|
| Rayburn House Office Building | 50 Independence Ave, SW Washington, DC 20515 | Library of Congress | 101 Independence Ave SE, Washington, DC 20540 | Russell Senate Office Building | 2 Constitution Ave NE, Washington, DC 20002 |
| Longworth House Office Building | 15 Independence Ave, SW Washington, DC 20515 | Supreme Court | 1 First Street, NE Washington, DC 20543 | Dirksen Senate Office Building | 100 Constitution Ave NE Washington, DC 20002 |
| Cannon House Office Building | 25 Independence Ave, SE Washington, DC 20003 | Capitol Visitors Center | First & East Capitol St SE, Washington, DC 20004 | Hart Senate Office Building | 150 Constitution Ave NE Washington, DC 20510 |
| Capitol South Metro | 307 First Street SE Washington, DC 20003 | Federal Center Metro | 401 3rd Street SW Washington, DC 20024 | Union Station Metro | 701 First St. NE Washington, DC 20002 |
<section class="tables-section">
<h3>Option #1: Table with one header</h3>
<table class="tables" cellspacing="0" summary="Information for surprise party">
<tr>
<th>Date</th>
<th>Event</th>
<th>Venue</th>
</tr>
<tr>
<td>3 February</td>
<td>Surprise Party</td>
<td>Party Town USA</td>
</tr>
</table>
</section>
<section class="tables-section2">
<div class="break"></div>
<h3>Option #2: Table with two headers and caption</h3>
<table class="tables" cellspacing="0">
<caption>Color Names in Multiple Languages</caption>
<tr class="headers">
<th scope="col">Color</th>
<th scope="col">French</th>
<th scope="col">German</th>
<th scope="col">Italian</th>
<th scope="col">Portuguese</th>
<th scope="col">Spanish</th>
</tr>
<tr>
<th scope="row">Red</th>
<td>rouge</td>
<td>rot</td>
<td>rosso</td>
<td>vermelho</td>
<td>rojo</td>
</tr>
<tr>
<th scope="row">Orange</th>
<td>orange</td>
<td>orange</td>
<td>arancione</td>
<td>laranja</td>
<td>anaranjado</td>
</tr>
<tr>
<th scope="row">Yellow</th>
<td>jaune</td>
<td>gelb</td>
<td>giallo</td>
<td>amarelo</td>
<td>amarillo</td>
</tr>
<tr>
<th scope="row">Green</th>
<td>vert</td>
<td>grün</td>
<td>verde</td>
<td>verde</td>
<td>verde</td>
</tr>
<tr>
<th scope="row">Blue</th>
<td>bleu</td>
<td>blau</td>
<td>blu</td>
<td>azul</td>
<td>azul</td>
</tr>
<tr>
<th scope="row">Purple</th>
<td>pourpre</td>
<td>lila</td>
<td>porpora</td>
<td>roxo</td>
<td>morado</td>
</tr>
</table>
</section>
<section class="tables-section3">
<div class="break"></div>
<h3>Option #3: Complex Table</h3>
<table class="tables" cellspacing="0">
<tbody>
<tr class="headers">
<th id="co1" headers="blank">Kingdom</th>
<th id="co2" headers="blank">Phylum</th>
<th id="co3" headers="blank">Class</th>
<th id="co4" headers="blank">Order</th>
</tr>
<tr>
<td headers="co1">Animalia</td>
<td headers="co2">Chordata</td>
<td headers="co3">Mammalia</td>
<td headers="co4">Carnivora</td>
</tr>
<tr>
<td headers="co1">Animalia</td>
<td headers="co2">Arthropoda</td>
<td headers="co3">Insecta</td>
<td headers="co4">Lepidoptera</td>
</tr>
<tr>
<td headers="co1">Animalia</td>
<td headers="co2">Echinodermata</td>
<td headers="co3">Asteroidea</td>
<td headers="co4">Forcipulatida</td>
</tr>
<tr class="headers">
<th id="co5" headers="blank">Family</th>
<th id="co6" headers="blank">Genus</th>
<th id="co7" headers="blank">Species</th>
<th id="co8" headers="blank">Common</th>
</tr>
<tr>
<td headers="co5">Felidae</td>
<td headers="co6">Panthera</td>
<td headers="co7">Panthera tigris</td>
<td headers="co8">Tiger</td>
</tr>
<tr>
<td headers="co5">Danaidae</td>
<td headers="co6">Dannaus</td>
<td headers="co7">Plexippus</td>
<td headers="co8">Monarch Butterfly</td>
</tr>
<tr>
<td headers="co5">Asteriidae</td>
<td headers="co6">Asterias</td>
<td headers="co7">Asterias amurensis</td>
<td headers="co8">Northern Pacific seastar</td>
</tr>
</tbody>
</table>
</section>
<section>
<div class="break"></div>
<h3>Option #4: Responsive Table</h3>
<table class="responsive-table" id="responsive-tableID">
<thead>
<tr align="center">
<th class="responsive">House Side</th>
<th class="responsive">House Address</th>
<th class="responsive">Other</th>
<th class="responsive">Other Address</th>
<th class="responsive">Senate Side</th>
<th class="responsive">Senate Address</th>
</tr>
</thead>
<tbody>
<tr>
<td class="responsive">Rayburn House Office Building</td>
<td class="responsive">50 Independence Ave, SW Washington, DC 20515</td>
<td class="responsive">Library of Congress</td>
<td class="responsive">101 Independence Ave SE, Washington, DC 20540</td>
<td class="responsive">Russell Senate Office Building</td>
<td class="responsive">2 Constitution Ave NE, Washington, DC 20002</td>
</tr>
<tr>
<td class="responsive">Longworth House Office Building</td>
<td class="responsive">15 Independence Ave, SW Washington, DC 20515</td>
<td class="responsive">Supreme Court</td>
<td class="responsive">1 First Street, NE Washington, DC 20543</td>
<td class="responsive">Dirksen Senate Office Building</td>
<td class="responsive">100 Constitution Ave NE Washington, DC 20002</td>
</tr>
<tr>
<td class="responsive">Cannon House Office Building</td>
<td class="responsive">25 Independence Ave, SE Washington, DC 20003</td>
<td class="responsive">Capitol Visitors Center</td>
<td class="responsive">First & East Capitol St SE, Washington, DC 20004</td>
<td class="responsive">Hart Senate Office Building</td>
<td class="responsive">150 Constitution Ave NE Washington, DC 20510</td>
</tr>
<tr>
<td class="responsive">Capitol South Metro</td>
<td class="responsive">307 First Street SE Washington, DC 20003</td>
<td class="responsive">Federal Center Metro</td>
<td class="responsive">401 3rd Street SW Washington, DC 20024</td>
<td class="responsive">Union Station Metro</td>
<td class="responsive">701 First St. NE Washington, DC 20002</td>
</tr>
</tbody>
</table>
</section>
Copied!
Tabs - draft
- Be mindful of using tabs, as they are less discoverable by design.
- Once a tab button is focused, other tabs can be selected with the arrow keys.
- A tab's contents can be accessed via Tab (if there are focusable elements in the tab well) or PgDn (if there are no focusable elements in the tab well).
- Be sure to update the values of the
aria-posinsetandaria-setsizeattributes if you have more than three tabs.
Resources
WCAG 2.1 Guidelines
2.1.1 Keyboard - All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user's movement and not just the endpoints. (Level A)
Tab 1
The important achievement of Apollo was demonstrating that humanity is not forever chained to this planet and our visions go rather further than that and our opportunities are unlimited.
<section class="tabs" aria-multiselectable="false">
<ul class="tabs__navlist" role="tablist">
<li class="tabs__nav-item is-active" role="presentation">
<button class="tabs__nav-trigger" id="tab-label-1" role="tab" aria-setsize="3" aria-posinset="1" tabindex="0" aria-controls="tab-panel-1" aria-selected="true">Tab 1</button>
</li><li class="tabs__nav-item" role="presentation">
<button class="tabs__nav-trigger" id="tab-label-2" role="tab" aria-setsize="3" aria-posinset="2" tabindex="-1" aria-controls="tab-panel-2" aria-selected="false">Tab 2</button>
</li><li class="tabs__nav-item" role="presentation">
<button class="tabs__nav-trigger" id="tab-label-3" role="tab" aria-setsize="3" aria-posinset="3" tabindex="-1" aria-controls="tab-panel-3" aria-selected="false">Tab 3</button>
</li>
</ul>
<div class="tabs__panels">
<div class="tabs__panel is-current" id="tab-panel-1" role="tabpanel" aria-labelledby="tab-label-1" tabindex="-1">
<h3>Tab 1</h3>
<div class="panel-body">
<p>The important achievement of Apollo was demonstrating that humanity is not forever chained to this planet and our visions go rather further than that and our opportunities are unlimited.</p>
</div>
</div>
<div class="tabs__panel" id="tab-panel-2" aria-hidden="true" role="tabpanel" aria-labelledby="tab-label-2" tabindex="-1">
<h3>Tab 2</h3>
<div class="panel-body">
<p>Never limit yourself because of others' limited imagination; never limit others because of your own limited imagination.</p>
</div>
</div>
<div class="tabs__panel" id="tab-panel-3" aria-hidden="true" role="tabpanel" aria-labelledby="tab-label-3" tabindex="-1">
<h3>Tab 3</h3>
<div class="panel-body">
<p>After Apollo 17, America stopped looking towards the next horizon. The United States had become a space-faring nation, but threw it away. We have sacrificed space exploration for space exploitation, which is interesting but scarcely visionary.</p>
</div>
</div>
</div>
</section>
Copied!