Data

Forms

Groupings

Images

Structure

Nutrition Facts label

The Nutrition Facts label found on packaged foods and beverages is your daily tool for making informed food choices that contribute to healthy lifelong eating habits.

Examples

Without table

Nutrition Facts

4 servings per container

Serving size 1 ½ cup (208g)

Amount Per Serving

240 Calories

% Daily Value ^{. Go to footnote 1}

Total Fat 4g

Saturated Fat 1.5g

Trans Fat 0g

Cholesterol 5mg

Sodium 430mg

19%

Total Carbohydrate 46g

17%

Dietary Fiber 7g

25%

Total Sugars 4g

Includes 2g Added Sugars

Protein 11g

Vitamin D 2mcg

10%

Calcium 260mg

20%

Iron 6mg

35%

Potassium 240mg

The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice. Back to reference 1

HTML code

<aside id="abbr-container">
  <h4 id="abbr-heading">Abbreviations list</h4>
  <ul class="abbr-list" aria-labelledby="abbr-heading">
    <li>g = <span id="abbr-g">grams</span></li>
    <li>mg = <span id="abbr-mg">milligrams</span></li>
    <li>mcg = <span id="abbr-mcg">micrograms</span></li>
  </ul>
</aside>
<div id="facts" class="nfl-front">
  <div class="facts_title">Nutrition Facts</div>
  <div class="facts_serving_pre">4 servings per container</div>
  <div class="facts_serving_size">Serving size 1 &frac12; cup (208g)</div>
  <div class="facts_box">
    <div class="fact_row_norule"><small>Amount Per Serving</small></div>
    <div class="fact_row calories"><span class="data calorieamt">240</span> <strong>Calories</strong></div>
  </div>
  <!--.facts_box-->
  <div class="facts_box thin">
    <div class="fact_row txt_right">
      <a href="#footnote-1" id="ref-footnote-1">
        <small id="daily-value">% Daily Value</small>
        <sup><span class="visually-hidden">. Go to footnote </span>1</sup>
      </a>
    </div>
    <div class="fact_row"><strong>Total Fat</strong> 4g <div class="daily-value bold">5%</div></div>
    <div class="fact_row sub">Saturated Fat 1.5g <div class="daily-value bold">8%</div></div>
    <div class="fact_row sub"><em>Trans</em> Fat 0g</div>
    <div class="fact_row"><strong>Cholesterol</strong> 5mg <div class="daily-value bold">2%</div></div>
    <div class="fact_row"><strong>Sodium</strong> 430mg <div class="daily-value bold">19%</div></div>
    <div class="fact_row"><strong>Total Carbohydrate</strong> 46g <div class="daily-value bold">17%</div></div>
    <div class="fact_row sub">Dietary Fiber 7g <div class="daily-value bold">25%</div></div>
    <div class="fact_row sublv2">Total Sugars 4g</div>
    <div class="fact_row sublv3">Includes 2g Added Sugars <div class="daily-value bold">4%</div></div>
    <div class="fact_row"><strong>Protein</strong> 11g</div>
  </div>
  <!--.facts_box-->
  <div class="facts_box">
    <div class="fact_row">Vitamin D 2mcg <div class="daily-value">10%</div></div>
    <div class="fact_row">Calcium 260mg <div class="daily-value">20%</div></div>
    <div class="fact_row">Iron 6mg <div class="daily-value">35%</div></div>
    <div class="fact_row">Potassium 240mg <div class="daily-value">6%</div></div>
  </div>
  <!--.facts_box-->
  <div class="facts_descr">
    <h4 id="footnotes-title"
        class="visually-hidden">Footnotes</h4>
    <ol aria-labelledby="footnotes-title">
      <li id="footnote-1">
        The % Daily Value (DV) tells you how much a nutrient in a serving of
        food contributes to a daily diet. 2,000 calories a day is used for
        general nutrition advice.
        <a href="#ref-footnote-1">
          Back to reference<span class="visually-hidden"> 1</span>
        </a>
      </li>
    </ol>
  </div>
</div>

CSS code

/* Nutrition Label */
#facts {
  margin-top: 20px;
  margin-right: 1rem;
  z-index: 10;
  background: #fff;
  border: 1px solid #000;
  padding: 20px 0px;
  font-size: 1rem;
  line-height: 1rem;
  box-shadow: 4px 10px 10px rgba(0, 0, 0, .2);
  width: 300px;
  font-family: 'Atkinson Hyperlegible', 'NeueBlk';
}

.on-label-blue #facts {
  border: 2px solid #000;
}

#facts .facts_title {
  font-family: 'Atkinson Hyperlegible', 'NeueBlk';
  font-size: 1.825rem;
  font-weight: bolder;
  color: #231f20;
  padding-left: 10px;
  padding-right: 10px;
  margin-bottom: 5px;
}

#facts .facts_serving_pre {
  font-size: .75rem;
  padding: 10px;
}

#facts .facts_serving_size {
  padding: 5px 10px;
  font-size: .975rem;
  font-weight: bold;
}

#facts .calories {
  padding-top: 4px;
  padding-bottom: 12px;
  font-size: 1.25em !important;
  line-height: 1em !important;
  position: relative;
  font-weight: bold;
}

#facts .calorieamt {
  background-color: transparent;
  font-size: 1.8em !important;
  font-weight: bolder;
}

#facts .txt_right {
  text-align: right;
}

#facts .facts_box {
  border-top: 13px solid #231f20;
  margin-left: 10px;
  margin-right: 10px;
}

#facts .facts_box.thin {
  border-width: 5px;
}

#facts .fact_row {
  padding-bottom: 2px;
  padding-top: 5px;
  font-size: 14px;
  line-height: 14px;
  border-bottom: 1px solid #838181;
  position: relative;
}

#facts .fact_row_norule {
  padding-bottom: 2px;
  padding-top: 5px;
  font-size: 14px;
  line-height: 14px;
  position: relative;
}

#facts .fact_row.pinkbg {
  background: #feeab8;
  padding-left: 10px;
  padding-right: 10px;
  margin-left: -10px;
  margin-right: -10px;
}

#facts .fact_row.bluebg {
  background: #ebf3c0;
  padding-left: 10px;
  padding-right: 10px;
  margin-left: -10px;
  margin-right: -10px;
}

#facts .fact_row.pinkbg.sub {
  padding-left: 28px;
}

#facts .fact_row.bluebg.sub {
  padding-left: 28px;
}

#facts .fact_row.sub {
  padding-left: 18px;
}

#facts .fact_row.sublv2 {
  margin-left: 18px;
}

#facts .fact_row.sublv3 {
  padding-left: 36px;
}

#b_box #b_content #facts .plus_in_label,
#b_box #b_content #facts .minus_in_label {
  width: 40px;
  position: absolute;
  top: 23px;
  left: -33px;
  z-index: 2;
  display: none;
}

#b_box #b_content #facts .fact_row.pinkbg.withicon:before {
  content: "\0020";
  background: #fab2dc;
  width: 35px;
  height: 100%;
  border-top: 1px solid #fab2dc;
  position: absolute;
  top: 0;
  left: -39px;
  z-index: 1;
  display: none;
}

#b_box #b_content #facts .fact_row.bluebg.withicon:before {
  content: "\0020";
  background: #b2e7fa;
  width: 35px;
  height: 100%;
  border-top: 1px solid #b2e7fa;
  position: absolute;
  top: 0;
  left: -39px;
  z-index: 1;
  display: none;
}

#b_box #b_content #facts .fact_row.pinkbg.withicon.withicon_min:before,
#b_box #b_content #facts .fact_row.bluebg.withicon.withicon_min:before {
  width: 19px;
  left: -23px;
  display: none;
}

#b_box #b_content #facts .plus_in_label_min,
#b_box #b_content #facts .minus_in_label_min {
  width: 20px;
  position: absolute;
  top: 2px;
  left: -16px;
  z-index: 2;
  display: none;
}

#facts .fact_row small {
  font-size: 12px;
  line-height: 12px;
  color: #000;
}

#facts .fact_row div,
#facts .data {
  float: right;
}

#facts strong {
  color: #000;
}

#facts .facts_descr {
  padding-left: 20px;
  padding-right: 10px;
  font-size: 11px;
  line-height: 12px;
  margin: 8px 0 8px;
  position: relative;
  color: #000;
}

#facts .facts_descr ol {
  margin-left: 0;
  padding-inline-start: 0;
}

#facts .facts_table {
  margin-left: 10px;
  margin-right: 10px;
  color: #000;
}

#facts table {
  width: 100%;
}

#facts table th,
#facts table td {
  font-size: 11px;
  line-height: 11px;
}

#facts table th {
  text-align: left;
  padding-bottom: 1px;
}

#facts table td {
  padding: 3px 0 0px;
  vertical-align: bottom;
}

#facts table tbody {
  border-top: 1px solid #4c4849;
}

#facts a {
  border-bottom: 0;
  color: #000;
  text-decoration: none;
  transition: all .5s;
  position: relative;
  z-index: 10;
}

#facts a.light {
  background: #FF0;
  text-decoration: underline;
  box-shadow: 0 0 0px 2px #FF0;
}

#facts a:hover {
  text-decoration: underline;
}

#facts .daily-value.bold {
  font-weight: bold;
}

/* End of Facts */

References

Based on Interactive Nutrition Facts Label from the U.S. Food and Drug Administration (FDA) website: https://www.accessdata.fda.gov/scripts/interactivenutritionfactslabel/default.cfm.
CSS file

Auto-suggest

Making forms accessible is a simple process. Each form element should be associated with its instructions and/or errors, and everything should be accessible via the keyboard and announced to a screen reader user.

Search auto-suggestions are more popular than ever. We will dig in on how to make one accessible and usable to all.

Requirement #1 - Keyboard accessible

Use the proper HTML5 elements and their semantics to build your search elements.

HTML Code

CSS code

How to test

Making forms accessible is a simple process. Each form element should be associated with its instructions and errors, and everything should be accessible via the keyboard.

Testing

Identify each form element.
Find all instructions associated with each element.
- It is a failure if a form element isn’t programatically associated with all instructions. This includes legends, labels, hint text and tooltips.
- A common way of achieving this is using fieldset and legend tags. Fieldset is used to group a set of elements. Legend is the first child of a fieldset tag and provides context for those fields.
Ensure all field elements are accessible via the keyboard.
- If the form cannot be filled out with just a keyboard, this is a failure.
Check for title attributes
- Title attributes can be a substitute for labels.
- If the title attributes provides all the related information it passes, if it provides extra information it fails.
- Title attributes are not accessible via keyboard.

Fieldset

Making forms accessible is a simple process. Each form element should be associated with its instructions and errors, and everything should be accessible via the keyboard.

How to test

Identify each form element.
Find all instructions associated with each element.
- It is a failure if a form element isn’t programatically associated with all instructions. This includes legends, labels, hint text and tooltips.
- A common way of achieving this is using fieldset and legend tags. Fieldset is used to group a set of elements. Legend is the first child of a fieldset tag and provides context for those fields.
Ensure all field elements are accessible via the keyboard.
- If the form cannot be filled out with just a keyboard, this is a failure.
Check for title attributes
- Title attributes can be a substitute for labels.
- If the title attributes provides all the related information it passes, if it provides extra information it fails.
- Title attributes are not accessible via keyboard.

Examples

Passes

Name First Last

Favorite Soup? Pea Soup Chicken Noodle Tomato

<fieldset>
  <legend>Name</legend>
  <label for="firstname">First</label>
  <input type="text" id="firstname">
  <label for="lastname">Last</label>
  <input type="text" id="lastname">
</fieldset>

<fieldset>
  <legend>Favorite Soup?</legend>
  <input type="radio" name="soup" value="pea" id="peasoup" title="Pea Soup"><label for="peasoup">Pea Soup</label>
  <input type="radio" name="soup" value="chicken" id="chicken" title="Chicken Noodle"><label for="chicken">Chicken Noodle</label>
  <input type="radio" name="soup" value="tomato" id="tomato" title="Tomato"><label for="tomato">Tomato</label>
</fieldset>

Name: Each form element has a label, and it’s associated with the for attribute. The for attribute refers to the id of the input. When looking at this form, ‘First’ and ‘Last’ wouldn’t make sense without ‘Name.’ This is associated with the fieldset and legend. All elements are wrapped in a fieldset. There can only be one legend tag per fieldset. Anything in the legend tag will be associated.

Favorite Soup: Fieldset and legend is often used for radio buttons as its the easiest way to associate the radio buttons with the question. Notice there are no labels for the radio buttons, but each button has a title attribute for assistive technology to read.

Fails

Name First Last

Favorite Soup? This Question Is Required Pea Soup Chicken Noodle Tomato

<fieldset>
  <legend>Name</legend>
  <label for="first_name-2">First</label>
  <input type="text" id="firstname-2">
  <label for="1lastname">Last</label>
  <input type="text" id="1lastname">
</fieldset>

<fieldset>
  <legend>Favorite Soup?</legend>
  <span style="color:#990000;">This Question Is Required</span>
  <input type="radio" name="soup" value="pea" id="pea-2" title="Chick Pea Soup"><label for="pea-2">Pea Soup</label>
  <input type="radio" name="soup" value="chicken" id="chicken-2" title="Chicken Noodle"><label for="chicken-2">Chicken Noodle</label>
  <input type="radio" name="soup" value="tomato" id="tomato-2" title="Tomato"><label for="tomato-2">Tomato</label>
</fieldset>

Failure: First name label for and id don’t match.

Failure: Last name has an invalid id.

Failure: “This Question Is Required” is not associated with the form fields.

Failure: The title tag for Pea Soup indicates it’s ‘Chick Pea Soup.’ This information is not available to keyboard, sighted users.

How ARIA affects form inputs

Screen readers vary on what they read and the additional information they provide by default. This is a broad summary of what is read based on VoiceOver for Mac OSX.

You can test these with your own screen reader. If you have a OSX you can turn VoiceOver on by hitting command+F5.

Further Information Using aria-label or aria-labelledby will cause a screen reader to only read them and not the default label. If you want an input to read from multiple things like an error message, use aria-labelledby and pass it the for attribute of the label and any additional ids you want read. ex. aria-labelledby='car1 car_description car-error-message'

No ARIA

Reads just the label and not the description

<label for="car_1">Car</label>
<input type="text" id="car_1"/><br/>
<span id="carmakedescription_1"><i>Please enter Make and Model</i></span>

Screen Reader reads input as: Car Edit text

With aria-label

Reads the aria-label and doesn’t read the normal label.

<label for="car_2">Car</label>
<input type="text" id="car_2" aria-label="Car, please enter make and model" /><br/>
<span id="carmakedescription_2"><i>Please enter Make and Model</i></span>

Screen Reader reads input as: Car, please enter make and model Edit text

With aria-labelledby pointing at `carmakedescription`

Reads only the aria-labelledby attribute and not the default label

<label for="car_3">Car</label>
<input type="text" id="car_3" aria-labelledby="carmakedescription_3" /><br/>
<span id='carmakedescription_3'><i>Please enter Make and Model</i></span>

Screen Reader reads input as: Please enter Make and Model Edit text

With aria-labelledby pointing at `carlabel carmakedescription`

Reads both labels indicated by the aria-labelledby attribute

<label for="car_4" id="carlabel_4">Car</label>
<input type="text" id="car_4" aria-labelledby="carlabel_4 carmakedescription_4" /><br/>
<span id="carmakedescription_4"><i>Please enter Make and Model</i></span>

Screen Reader reads input as: Car Please enter Make and Model Edit text

With aria-describedby pointing at `carmakedescription`

Jaws reads both the label and the description. So does VoiceOver, but there is a slight delay before it reads the description.

  <label for="car_5">Car</label>
  <input type="text" id="car_5" aria-describedby="carmakedescription_5" /><br/>
  <span id='carmakedescription_5'><i>Please enter Make and Model</i></span>

Screen Reader reads input as: Car Edit text Please enter Make and Model

Auto-Suggestion

Auto-update

Coming soon!

Example

The following example demonstrates using the disclosure design pattern to show and hide dropdown lists of links in a navigation bar for Web Content Accessibility Guidelines (WCAG) 2.1 quick reference guide. Each disclosure button represents a section of the web site, and expanding it shows a list of links to a guideline within that guide.

HTML code

<nav aria-label="Web Content Accessibility Guidelines 2.1 guidelines">
  <ul id="wcag-guidelines-menu" class="disclosure-nav">
    <li>
      <button aria-expanded="false" aria-controls="id_perceivable_menu">
        Perceivable
      </button>
      <ul id="id_perceivable_menu">
        <li>
          <a href="https://www.w3.org/WAI/WCAG21/quickref/#text-alternatives">
            1.1 Text Alternatives
          </a>
        </li>
        <li>
          <a href="https://www.w3.org/WAI/WCAG21/quickref/#time-based-media">
            1.2	Time-based Media
          </a>
        </li>
        <li>
          <a href="https://www.w3.org/WAI/WCAG21/quickref/#adaptable">
            1.3 Adaptable
          </a>
        </li>
        <li>
          <a href="https://www.w3.org/WAI/WCAG21/quickref/#distinguishable">
            1.4	Distinguishable
          </a>
        </li>
      </ul>
    </li>
    <li>
      <button aria-expanded="false" aria-controls="id_operable_menu">
        Operable
      </button>
      <ul id="id_operable_menu">
        <li>
          <a href="https://www.w3.org/WAI/WCAG21/quickref/#keyboard-accessible">
            2.1	Keyboard Accessible
          </a>
        </li>
        <li>
          <a href="https://www.w3.org/WAI/WCAG21/quickref/#enough-time">
            2.2	Enough Time
          </a>
        </li>
        <li>
          <a href="https://www.w3.org/WAI/WCAG21/quickref/#seizures-and-physical-reactions">
            2.3	Seizures and Physical Reactions
          </a>
        </li>
        <li>
          <a href="https://www.w3.org/WAI/WCAG21/quickref/#navigable">
            2.4	Navigable
          </a>
        </li>
        <li>
          <a href="https://www.w3.org/WAI/WCAG21/quickref/#input-modalities">
            2.5	Input Modalities
          </a>
        </li>
      </ul>
    </li>
    <li>
      <button aria-expanded="false" aria-controls="id_understandable_menu">
        Understandable
      </button>
      <ul id="id_understandable_menu">
        <li>
          <a href="https://www.w3.org/WAI/WCAG21/quickref/#readable">
            3.1	Readable
          </a>
        </li>
        <li>
          <a href="https://www.w3.org/WAI/WCAG21/quickref/#predictable">
            3.2	Predictable
          </a>
        </li>
        <li>
          <a href="https://www.w3.org/WAI/WCAG21/quickref/#input-assistance">
            3.3	Input Assistance
          </a>
        </li>
      </ul>
    </li>
    <li>
      <button aria-expanded="false" aria-controls="id_robust_menu">
        Robust
      </button>
      <ul id="id_robust_menu">
        <li>
          <a href="https://www.w3.org/WAI/WCAG21/quickref/#compatible">
            4.1	Compatible
          </a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

CSS stylesheet

Main navigation stylesheet file

Javascript files

Example Usage Options

This example demonstrates two different ways of implementing keyboard support.

Includes support for arrow keys, Home, and End

Accessibility Features

Since this set of disclosure buttons controls visibility of navigation links for a potential WCAG 2.1 web site, the list that contains them is wrapped in a navigation landmark named WCAG 2.1 guidelines.
The semantics of the list structure communicates the hierarchy of the navigation system to assistive technology users. The top-level set of three buttons is in a list of three items, and the set of links controlled by each button is contained within a list nested inside the item with the controlling button.
If a dropdown is open and focus is inside the navigation region, pressing Esc will close the dropdown. Moving focus out of the navigation region also closes an open dropdown. Implementing this Esc behavior is necessary to meet the WCAG 2.1 1.4.13: Content on Hover or Focus criterion.
The visual indicator of the show/hide state is created using CSS ::after pseudo element border styles so the caret is reliably rendered in high contrast mode of operating systems and browsers.
Navigation keys (Arrow keys, Home, and End):
1. Implementing the arrow key support prevents the default page scroll behavior when focus is contained within the navigation region.
2. Navigation key support is primarily for the benefit of keyboard users who are not running a screen reader. Screen readers that have both reading and interaction modes intercept these navigation keys and do not pass them to the page when the screen reader is in reading mode. When interacting with this example, such screen readers are typically in reading mode because this example does not use a widget role that triggers screen reader interaction mode.
3. If implemented, the navigation keys supplement, but do not replace, tabbing among buttons and links. This is because the buttons and links are not contained by an element with a widget role, such as grid, that is expected to occupy only one stop in the page Tab sequence and manage focus for all its descendants.

Keyboard Support

When the disclosure control has focus:

Enter activates the disclosure control and toggles the visibility of the disclosure content.
Space activates the disclosure control and toggles the visibility of the disclosure content.

Tab and Shift + Tab

Move keyboard focus among top-level buttons, and if a dropdown is open, into and through links in the dropdown.

Space or Enter

If focus is on a disclosure button, activates the button, which toggles the visibility of the dropdown.
If focus is on a link:
- If any link has aria-current set, removes it.
- Sets aria-current="page" on the focused link.
- Activates the focused link.

Escape

If a dropdown is open, closes it and sets focus on the button that controls that dropdown.

Down Arrow or Right Arrow

If focus is on a button and its dropdown is collapsed, and it is not the last button, moves focus to the next button.
if focus is on a button and its dropdown is expanded, moves focus to the first link in the dropdown.
If focus is on a link, and it is not the last link, moves focus to the next link.

Up Arrow or Left Arrow

If focus is on a button, and it is not the first button, moves focus to the previous button.
If focus is on a link, and it is not the first link, moves focus to the previous link.

Home

If focus is on a button, and it is not the first button, moves focus to the first button.
If focus is on a link, and it is not the first link, moves focus to the first link.

End

If focus is on a button, and it is not the last button, moves focus to the last button.
If focus is on a link, and it is not the last link, moves focus to the last link.

Note

Some keys will be overridden by screen readers and might not function as described.

WAI-ARIA Roles, States, and Properties

The element that shows and hides the content has role button.
When the content is visible, the element with role button has aria-expanded set to true. When the content area is hidden, it is set to false.
Optionally, the element with role button has a value specified for aria-controls that refers to the element that contains all the content that is shown or hidden.

References

Screen readers tested

Chrome with JAWS,
Edge with NVDA,
Safari with Voiceover.

Example

HTML code

<nav aria-label="Web Content Accessibility Guidelines 2.1 guidelines">
  <ul id="wcag-guidelines-menu" class="disclosure-nav complex">
    <li>
      <input id="id_perceivable_label"
              type="checkbox" 
              aria-expanded="true" 
              aria-controls="id_perceivable_menu" 
              class="visually-hidden hidden-trigger-toggle"
              value="" />
      <label for="id_perceivable_label" class="trigger-toggle">Perceivable</label>
      <script>
        {
          btn = "<button id='id_perceivable_label'";
          btn += " class='trigger-toggle'";
          btn += " aria-expanded='false'";
          btn += " aria-controls='id_perceivable_menu'>";
          btn += " Perceivable";
          btn += " </button>";
          document.write(btn);
        }
      </script>
      <ul id="id_perceivable_menu"
          aria-labelledby="id_perceivable_label">
        <li>
          <a href="https://www.w3.org/WAI/WCAG21/quickref/#text-alternatives">
            1.1 Text Alternatives
          </a>
        </li>
        <li>
          <a href="https://www.w3.org/WAI/WCAG21/quickref/#time-based-media">
            1.2	Time-based Media
          </a>
        </li>
        <li>
          <a href="https://www.w3.org/WAI/WCAG21/quickref/#adaptable">
            1.3 Adaptable
          </a>
        </li>
        <li>
          <a href="https://www.w3.org/WAI/WCAG21/quickref/#distinguishable">
            1.4	Distinguishable
          </a>
        </li>
      </ul>
    </li>
    <li>
      <input id="id_operable_label"
              type="checkbox" 
              aria-expanded="true" 
              aria-controls="id_operable_menu" 
              class="visually-hidden hidden-trigger-toggle"
              value="" />
      <label for="id_operable_label" class="trigger-toggle">Operable</label>
      <script>
        {
          btn = "<button id='id_operable_label'";
          btn += " class='trigger-toggle'";
          btn += " aria-expanded='false'";
          btn += " aria-controls='id_operable_menu'>";
          btn += " Operable";
          btn += " </button>";
          document.write(btn);
        }
      </script>
      <ul id="id_operable_menu"
          aria-labelledby="id_operable_label">
        <li>
          <a href="https://www.w3.org/WAI/WCAG21/quickref/#keyboard-accessible">
            2.1	Keyboard Accessible
          </a>
        </li>
        <li>
          <a href="https://www.w3.org/WAI/WCAG21/quickref/#enough-time">
            2.2	Enough Time
          </a>
        </li>
        <li>
          <a href="https://www.w3.org/WAI/WCAG21/quickref/#seizures-and-physical-reactions">
            2.3	Seizures and Physical Reactions
          </a>
        </li>
        <li>
          <a href="https://www.w3.org/WAI/WCAG21/quickref/#navigable">
            2.4	Navigable
          </a>
        </li>
        <li>
          <a href="https://www.w3.org/WAI/WCAG21/quickref/#input-modalities">
            2.5	Input Modalities
          </a>
        </li>
      </ul>
    </li>
    <li>
      <input id="id_understandable_label"
              type="checkbox" 
              aria-expanded="true" 
              aria-controls="id_understandable_menu" 
              class="visually-hidden hidden-trigger-toggle"
              value="" />
      <label for="id_understandable_label" class="trigger-toggle">Understandable</label>
      <script>
        {
          btn = "<button id='id_understandable_label'";
          btn += " class='trigger-toggle'";
          btn += " aria-expanded='false'";
          btn += " aria-controls='id_understandable_menu'>";
          btn += " Understandable";
          btn += " </button>";
          document.write(btn);
        }
      </script>
      <ul id="id_understandable_menu"
          aria-labelledby="id_understandable_label">
        <li>
          <a href="https://www.w3.org/WAI/WCAG21/quickref/#readable">
            3.1	Readable
          </a>
        </li>
        <li>
          <a href="https://www.w3.org/WAI/WCAG21/quickref/#predictable">
            3.2	Predictable
          </a>
        </li>
        <li>
          <a href="https://www.w3.org/WAI/WCAG21/quickref/#input-assistance">
            3.3	Input Assistance
          </a>
        </li>
      </ul>
    </li>
    <li>
      <input id="id_robust_label"
              type="checkbox" 
              aria-expanded="true" 
              aria-controls="id_robust_menu" 
              class="visually-hidden hidden-trigger-toggle"
              value="" />
      <label for="id_robust_label" class="trigger-toggle">Robust</label>
      <script>
        {
          btn = "<button id='id_robust_label'";
          btn += " class='trigger-toggle'";
          btn += " aria-expanded='false'";
          btn += " aria-controls='id_robust_menu'>";
          btn += " Robust";
          btn += " </button>";
          document.write(btn);
        }
      </script>
      <ul id="id_robust_menu"
          aria-labelledby="id_robust_label">
        <li>
          <a href="https://www.w3.org/WAI/WCAG21/quickref/#compatible">
            4.1	Compatible
          </a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

CSS stylesheet

Main navigation stylesheet file

Javascript files

Example Usage Options

This example demonstrates two different ways of implementing keyboard support.

Includes support for arrow keys, Home, and End

Accessibility Features

Since this set of disclosure buttons controls visibility of navigation links for a potential WCAG 2.1 web site, the list that contains them is wrapped in a navigation landmark named WCAG 2.1 guidelines.
The semantics of the list structure communicates the hierarchy of the navigation system to assistive technology users. The top-level set of three buttons is in a list of three items, and the set of links controlled by each button is contained within a list nested inside the item with the controlling button.
If a dropdown is open and focus is inside the navigation region, pressing Esc will close the dropdown. Moving focus out of the navigation region also closes an open dropdown. Implementing this Esc behavior is necessary to meet the WCAG 2.1 1.4.13: Content on Hover or Focus criterion.
The visual indicator of the show/hide state is created using CSS ::after pseudo element border styles so the caret is reliably rendered in high contrast mode of operating systems and browsers.
Navigation keys (Arrow keys, Home, and End):
1. Implementing the arrow key support prevents the default page scroll behavior when focus is contained within the navigation region.
2. Navigation key support is primarily for the benefit of keyboard users who are not running a screen reader. Screen readers that have both reading and interaction modes intercept these navigation keys and do not pass them to the page when the screen reader is in reading mode. When interacting with this example, such screen readers are typically in reading mode because this example does not use a widget role that triggers screen reader interaction mode.
3. If implemented, the navigation keys supplement, but do not replace, tabbing among buttons and links. This is because the buttons and links are not contained by an element with a widget role, such as grid, that is expected to occupy only one stop in the page Tab sequence and manage focus for all its descendants.

Keyboard Support

When the disclosure control has focus:

Enter activates the disclosure control and toggles the visibility of the disclosure content.
Space activates the disclosure control and toggles the visibility of the disclosure content.

Tab and Shift + Tab

Move keyboard focus among top-level buttons, and if a dropdown is open, into and through links in the dropdown.

Space or Enter

If focus is on a disclosure button, activates the button, which toggles the visibility of the dropdown.
If focus is on a link:
- If any link has aria-current set, removes it.
- Sets aria-current="page" on the focused link.
- Activates the focused link.

Escape

If a dropdown is open, closes it and sets focus on the button that controls that dropdown.

Down Arrow or Right Arrow

If focus is on a button and its dropdown is collapsed, and it is not the last button, moves focus to the next button.
if focus is on a button and its dropdown is expanded, moves focus to the first link in the dropdown.
If focus is on a link, and it is not the last link, moves focus to the next link.

Up Arrow or Left Arrow

If focus is on a button, and it is not the first button, moves focus to the previous button.
If focus is on a link, and it is not the first link, moves focus to the previous link.

Home

If focus is on a button, and it is not the first button, moves focus to the first button.
If focus is on a link, and it is not the first link, moves focus to the first link.

End

If focus is on a button, and it is not the last button, moves focus to the last button.
If focus is on a link, and it is not the last link, moves focus to the last link.

Note

Some keys will be overridden by screen readers and might not function as described.

WAI-ARIA Roles, States, and Properties

The element that shows and hides the content has role button.
When the content is visible, the element with role button has aria-expanded set to true. When the content area is hidden, it is set to false.
Optionally, the element with role button has a value specified for aria-controls that refers to the element that contains all the content that is shown or hidden.

References

Screen readers tested

Chrome with JAWS,
Edge with NVDA,
Safari with Voiceover.

Language selector

Example with simple form

In this simple form, no CSS or JavaScript code is required. The production team can add a client-side JavaScript to redirect users on click or do it on the server side. Both method required very simple and little script.

HTML code

<div class="live-snippet">
  <form id="frm-lang-selector"
        action=""
        method="post">
    <label id="lbl-lang-selector"
           for="sel-lang-selector">
      Site language
    </label>
    <select id="sel-lang-selector">
      <option lang="en"
              value="en"
              selected>
        English
      </option>
      <option lang="es"
              value="es">
        Espanol
      </option>
      <option lang="fr"
              value="fr">
        Français
      </option>
    </select>
    <input id="btn-lang-selector"
           type="submit"
           value="Go!" />
  </form>
</div>

Example without form

The example below is working and is accessible without javascript using the spacebar. To the added value of using the enter key to open and close the listbox, please add the small JS code following the CSS code.

Site language: Currently on the English website

HTML code

<input type="checkbox"
       id="chk-lang-selector"
       aria-haspopup="listbox"
       class="chk-dropdown-toggle visually-hidden"
/>
<label id="lbl-lang-selector-2"
    for="chk-lang-selector"
    class="lbl-lang-selector">
  Site language:
  <span class="current-lang">Currently on the English website</span>
  <i class="fas fa-caret-square-down"></i>
</label>
<ul id="lst-lang-selector"
    tabindex="-1"
    role="listbox"
    aria-labelledby="lbl-lang-selector-2"
    class="lst-lang-selector">
  <li id="opt-lang-selector-en"
      role="option"
      aria-selected="true"
      class="focused">
      <a href="?lang=en" lang="en">English</a>
  </li>
  <li id="opt-lang-selector-es"
      role="option">
      <a href="?lang=es" lang="es">Espanol</a>
  </li>
  <li id="opt-lang-selector-fr"
      role="option">
      <a href="?lang=fr" lang="fr">Français</a>
  </li>
</ul>

CSS code

.chk-dropdown-toggle:focus~.lbl-lang-selector {
  outline: 4px solid #999;
}

.chk-dropdown-toggle:focus~.lbl-lang-selector i {
  color: #004da1;
}

.chk-dropdown-toggle:checked~.lst-lang-selector {
  display: block;
}

.chk-dropdown-toggle:unchecked~.lst-lang-selector {
  display: none;
}

.lst-lang-selector {
  display: none;
}

.lbl-lang-selector:hover {
  cursor: pointer;
  outline: 4px solid #999;
}

.lbl-lang-selector:hover i,
.lst-lang-selector a {
  color: #004da1;
}

.chk-dropdown-toggle:checked~.lbl-lang-selector .fa-caret-square-down:before {
  content: "\f151";
}

Javascript code

var aria = aria || {};

/**
 * @desc
 *  Key code constants
 */
aria.KeyCode = {
  BACKSPACE: 8,
  TAB: 9,
  RETURN: 13,
  SHIFT: 16,
  ESC: 27,
  SPACE: 32,
  PAGE_UP: 33,
  PAGE_DOWN: 34,
  END: 35,
  HOME: 36,
  LEFT: 37,
  UP: 38,
  RIGHT: 39,
  DOWN: 40,
  DELETE: 46,
};

function checkboxKeydown (evt) {
  var key = evt.which || evt.keyCode;

  switch (key) {
    case aria.KeyCode.RETURN:
      if (this.getAttribute('checked') === 'checked') {
        this.removeAttribute('checked');
      } else {
        this.setAttribute('checked', 'checked');
      }
      break;
  }
};

window.onload = function () {
  var checkboxes = document.querySelectorAll('input[type="checkbox"]');
  for (i = 0; i < checkboxes.length; i++) {
      var cb = checkboxes[i];
      cb.addEventListener('keydown', checkboxKeydown);
  }
};

Country selector

Example with simple form

HTML code

<form id="frm-country-selector"
      action="/"
      method="post">
  <label id="lbl-country-selector"
          for="sel-country-selector">
    Country:
  </label>
  <select id="sel-country-selector">
    <option value="us"
            selected>
        United States
    </option>
    <option value="ca">
        Canada
    </option>
    <option value="nl">
        Netherlands
    </option>
  </select>
  <input id="btn-country-selector"
         type="submit"
         value="Go!" />
</form>

Example without form

Country: Currently on the United States website

Flags provided by Flagpedia.net

HTML code

<input type="checkbox"
        id="chk-country-selector"
        aria-haspopup="listbox"
        class="chk-dropdown-toggle visually-hidden"
/>
<label id="lbl-country-selector-2"
    for="chk-country-selector"
    class="lbl-country-selector">
  Country:
  <span class="current-country">Currently on the United States website</span>
  <i class="fas fa-caret-square-down"></i>
</label>
<ul id="lst-country-selector"
    tabindex="-1"
    role="listbox"
    aria-labelledby="lbl-country-selector-2"
    class="lst-country-selector">
  <li id="opt-country-selector-en"
      role="option"
      aria-selected="true"
      class="focused">
      <a href="?country=en-us">
        <img
          src="https://flagcdn.com/h20/us.png"
          height="20"
          alt="">
        United States
      </a>
  </li>
  <li id="opt-country-selector-es"
      role="option">
      <a href="?country=en-ca">
        <img
          src="https://flagcdn.com/h20/ca.png"
          height="20"
          alt="">
        Canada
      </a>
  </li>
  <li id="opt-country-selector-fr"
      role="option">
      <a href="?country=en-ca">
        <img
          src="https://flagcdn.com/h20/nl.png"
          height="20"
          alt="">
        Netherlands
      </a>
  </li>
</ul>

CSS code

.chk-dropdown-toggle:focus~.lbl-country-selector {
  outline: 4px solid #999;
}

.chk-dropdown-toggle:focus~.lbl-country-selector i {
  color: #004da1;
}

.chk-dropdown-toggle:checked~.lst-country-selector {
  display: block;
}

.chk-dropdown-toggle:unchecked~.lst-country-selector {
  display: none;
}

.lst-country-selector {
  display: none;
}

.lbl-country-selector:hover {
  cursor: pointer;
  outline: 4px solid #999;
}

.lbl-country-selector:hover i,
.lst-country-selector a {
  color: #004da1;
}

.chk-dropdown-toggle:checked~.lbl-country-selector .fa-caret-square-down:before {
  content: "\f151";
}

Javascript code

var aria = aria || {};

/**
 * @desc
 *  Key code constants
 */
aria.KeyCode = {
  BACKSPACE: 8,
  TAB: 9,
  RETURN: 13,
  SHIFT: 16,
  ESC: 27,
  SPACE: 32,
  PAGE_UP: 33,
  PAGE_DOWN: 34,
  END: 35,
  HOME: 36,
  LEFT: 37,
  UP: 38,
  RIGHT: 39,
  DOWN: 40,
  DELETE: 46,
};

function checkboxKeydown (evt) {
  var key = evt.which || evt.keyCode;

  switch (key) {
    case aria.KeyCode.RETURN:
      if (this.getAttribute('checked') === 'checked') {
        this.removeAttribute('checked');
      } else {
        this.setAttribute('checked', 'checked');
      }
      break;
  }
};

window.onload = function () {
  var checkboxes = document.querySelectorAll('input[type="checkbox"]');
  for (i = 0; i < checkboxes.length; i++) {
      var cb = checkboxes[i];
      cb.addEventListener('keydown', checkboxKeydown);
  }
};

Files

References

ISO 3166 country codes

Carousel / Slider

Coming soon!

Lists

The ol element is used when the list is ordered and the ul element is used when the list is unordered. Definition lists (dl) are used to group terms with their definitions. Although the use of this markup can make lists more readable, not all lists need markup. For instance, sentences that contain comma-separated lists may not need list markup.

When markup is used that visually formats items as a list but does not indicate the list relationship, users may have difficulty in navigating the information. An example of such visual formatting is including asterisks in the content at the beginning of each list item and using elements to separate the list items.

Some assistive technologies allow users to navigate from list to list or item to item. Style sheets can be used to change the presentation of the lists while preserving their integrity.

Heading markup can be used to demarcate different navigational sections like top or main navigation, left or secondary navigation and footer navigation.

The aria-labelledby attribute provides a way to associate an section of the page marked up as a region or landmarks with text that is on the page that labels it.

List with visual heading

Poutine's ingredients

French fries
Cheese curds
Gravy

HTML code

<h2 id="list-title">Poutine's ingredients</h2>
<ul aria-labelledby="list-title">
  <li>French fries</li>
  <li>Cheese curds</li>
  <li>Gravy</li>
</ul>

The list structure (ul/ol) is also useful to group hyperlinks. When this is done, it helps screen reader users to navigate from the first item in a list to the end of the list or jump to the next list. This helps them to bypass groups of links if they choose to.

Hiding the heading could be used for menus / navigation in the header or for breadcrumbs.

HTML code

<nav id="utility">
  <h2 id="utility-title"
      class="visually-hidden">
    Utility menu
  </h2>
  <ul class="list-inline list-pipe"
      aria-labelledby="utility-title">
    <li><a href="#">Portal</a></li>
    <li><a href="#">Search</a></li>
  </ul>
</nav>

Breadcrumbs navigation

HTML code

<nav id="breadcrumbs">
  <h2 id="breadcrumbs-title"
      class="visually-hidden">
    Breadcrumbs
  </h2>
  <ul class="list-inline list-breadcrumbs"
      aria-labelledby="breadcrumbs-title">
    <li><a href="#">Home</a></li>
    <li><a href="#">Level 1</a></li>
    <li><a href="#">Level 2</a></li>
    <li>Current page title</li>
  </ul>
</nav>

References

Simple example

HTML Code

<h3 id="connect-title" aria-hidden="true">Social media</h3>
<ul class="list-connect"
    aria-labelledby="connect-title">
  <li><a href="#"
          class="fa-icon fab fa-twitter"
          aria-labelledby="label-twitter">
    <span id="label-twitter"
          class="visually-hidden"
          aria-hidden="true">
      Follow us on Twitter
    </span>
  </a></li>
  <li><a href="#"
          class="fa-icon fab fa-linkedin-in"
          aria-labelledby="label-linkedin">
    <span id="label-linkedin"
          class="visually-hidden"
          aria-hidden="true">
      Follow us on LinkedIn
    </span>
  </a></li>
  <li><a href="#"
          class="fa-icon fab fa-instagram"
          aria-labelledby="label-instagram">
    <span id="label-instagram"
          class="visually-hidden"
          aria-hidden="true">
      Follow us on Instagram
    </span>
  </a></li>
  <li><a href="#"
          class="fa-icon fab fa-facebook-f"
          aria-labelledby="label-facebook">
    <span id="label-facebook"
          class="visually-hidden"
          aria-hidden="true">
      Follow us on Facebook
    </span>
  </a></li>
</ul>

CSS code

.list-connect {
  list-style: none;
  padding: 0;
}

.list-connect > li {
  display: inline;
  margin: .25rem;
}

.list-connect {
  padding-left: 0;
}

.list-connect a[href].fa-icon {
  border: 1px solid #eee;
  outline: 4px solid #eee;
  padding: .5rem;
}

.list-connect a[href].fa-icon:hover,
.list-connect a[href].fa-icon:focus {
  background-color: #004da1;
  border: 1px solid #000;
  color: #eee;
  outline: 4px solid #999;
  padding: .5rem;
}

Screen readers tested

Chrome with JAWS,
Edge with NVDA,
Safari with Voiceover.

Image with screen readers

Discover the impact of the role presentation based on different screen readers.

Images

null alt without role presentation

The screenreader doesn’t announced the image when the alternative text is empty.

null alt with role presentation

With the role set as presentation, the screenreader doesn’t announced the image.

alt value without role presentation

A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a
human, with small arms, and a large head with lots of sharp teeth.

The screenreader announced the image alternative text value.

alt value with role presentation

A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a
human, with small arms, and a large head with lots of sharp teeth.

With the role set as presentation, the screenreader doesn’t announced the image even if there’s an alternative text.

alt value with title attribute

A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a
human, with small arms, and a large head with lots of sharp teeth.

The screenreader announced the image alternative text value, make a pause, and announced the title text value as advisory text.

no alt nor title attibute

If no accessible label (alt, title) is set, the screenreader announced the image filename.

Image with screen readers - details

Discover the impact of the role presentation based on different screen readers.

Images

null alt without role presentation

code

<img src="https://mdn.github.io/learning-area/accessibility/html/dinosaur.png" 
     alt="">

null alt with role presentation

code

<img src="https://mdn.github.io/learning-area/accessibility/html/dinosaur.png" 
     alt="" 
     role="presentation">

alt value without role presentation

A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a
human, with small arms, and a large head with lots of sharp teeth.

code

<img src="https://mdn.github.io/learning-area/accessibility/html/dinosaur.png" 
     alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a 
          human, with small arms, and a large head with lots of sharp teeth.">

alt value with role presentation

A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a
human, with small arms, and a large head with lots of sharp teeth.

code

<img src="https://mdn.github.io/learning-area/accessibility/html/dinosaur.png" 
     alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a 
          human, with small arms, and a large head with lots of sharp teeth." 
     role="presentation">

alt value with title attribute

A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a
human, with small arms, and a large head with lots of sharp teeth.

code

<img src="https://mdn.github.io/learning-area/accessibility/html/dinosaur.png" 
     alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a 
          human, with small arms, and a large head with lots of sharp teeth." 
     title="The Mozilla red dinosaur">

no alt nor title attibute

code

<img src="https://mdn.github.io/learning-area/accessibility/html/dinosaur.png">

Based on Mozilla’s dinosaur

Similar to the page header, most websites also have a region at the bottom of every page that contains site-wide information, such as copyright information, privacy statements, or disclaimers. HTML5 provides the <footer> element, which can be used to define such a region.

Note: If the <footer> element is used inside <article> and <section> elements, it is not identified as the footer for the whole page but only relates to that specific <article> or <section>.

HTML Code

<footer class="footer-page"
        aria-labelledby="footer-title">
  <h2 class="visually-hidden"
      id="footer-title">
    Footer
  </h2>
  <div class="column">
    <div>
      <h3 id="resources-title">Resources</h3>
      <ul class="list-resources"
          aria-labelledby="resources-title">
        <li><a href="#">About</a></li>
        <li><a href="#">Solutions</a></li>
        <li><a href="#"><abbr title="Frequently Asked Questions">FAQ</abbr></a></li>
        <li><a href="#">Careers</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Accessibility Statement</a></li>
        <li><a href="#">Sitemap</a></li>
      </ul>
    </div>
    <div>
      <h3 id="contact-title">Contact</h3>
      <address class="address-contact"
               aria-labelledby="contact-title">
        <div class="label-data phone">
          <div class="label inline"
               id="phone-label">
            Phone:
          </div>
          <div class="data inline">
            <a href="tel:0000000000">000-000-0000</a>
          </div>
        </div>
        <div class="address">
          4240 Airport Road<br>
          Suite 206<br>
          Cincinnati, <abbr title="Ohio">OH</abbr> 45226
        </div>
      </address>
    </div>
    <div>
      <h3 id="connect-title">Social media</h3>
      <ul class="list-connect list-inline"
          aria-labelledby="connect-title">
        <li><a href="#"
               class="fa-icon fab fa-twitter"
               aria-labelledby="label-twitter">
          <span id="label-twitter"
                class="visually-hidden"
                aria-hidden="true">
            Follow us on Twitter
          </span>
        </a></li>
        <li><a href="#"
               class="fa-icon fab fa-linkedin-in"
               aria-labelledby="label-linkedin">
          <span id="label-linkedin"
                class="visually-hidden"
                aria-hidden="true">
            Follow us on LinkedIn
          </span>
        </a></li>
        <li><a href="#"
               class="fa-icon fab fa-instagram"
               aria-labelledby="label-instagram">
          <span id="label-instagram"
                class="visually-hidden"
                aria-hidden="true">
            Follow us on Instagram
          </span>
        </a></li>
        <li><a href="#"
               class="fa-icon fab fa-facebook-f"
               aria-labelledby="label-facebook">
          <span id="label-facebook"
                class="visually-hidden"
                aria-hidden="true">
            Follow us on Facebook
          </span>
        </a></li>
      </ul>

      <form id="frm-lang-selector"
            action="/"
            method="post">
        <label id="lbl-lang-selector"
               for="sel-lang-selector">
          Site language
        </label>
        <select id="sel-lang-selector">
          <option lang="en"
                  value="en"
                  selected>
            English
          </option>
          <option lang="es"
                  value="es">
            Espanol
          </option>
          <option lang="fr"
                  value="fr">
            Français
          </option>
        </select>
        <input id="btn-lang-selector"
               type="submit"
               value="Go!" />
      </form>
    </div>
  </div>
</footer>

CSS code

.footer-page li {
  list-style: none;
  margin: .25rem;
}

.footer-page .list-resources,
.footer-page .address-contact {
  font-size: .825rem;
  padding-left: 0;
}

.footer-page .list-resources a:hover,
.footer-page .address-contact a:hover {
  font-weight: bold;
}

.footer-page .list-connect {
  padding-left: 0;
}

.footer-page .address {
  font-style: italic;
}

@media screen and (min-width: 56.25em) {
  .footer-page .column {
    display: flex;
    justify-content: space-between;
  }
}

.footer-page a[href].fa-icon {
  border: 1px solid #eee;
  outline: 4px solid #eee;
  padding: .5rem;
}

.footer-page a[href].fa-icon:hover,
.footer-page a[href].fa-icon:focus {
  background-color: #004da1;
  border: 1px solid #000;
  color: #eee;
  outline: 4px solid #999;
  padding: .5rem;
}

.footer-page .label-data .inline {
  display: inline;
}

.footer-page .label-data .label {
  font-weight: bold;
}

.footer-page .list-resources abbr[title],
.footer-page .list-resources abbr[data-original-title] {
  text-decoration: none;
}

Tested using

Chrome with JAWS,
Edge with NVDA,
Safari with Voiceover.

Keyboard accessibility

Tabbing sequence

If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability.

As a keyboard user navigates through the page, the order in which interactive items receive keyboard focus is important. The default keyboard navigation order must be logical and intuitive. This generally means that it follows the visual flow of the page—left to right, top to bottom. For most pages this means header first, then main navigation, then page navigation (if present), and finally the footer. This navigation order (and also the reading order for screen readers) is determined by the web page’s source code. For best results:

Structure your underlying source code so that the reading/navigation order is correct.
Then, if necessary, use CSS to control the visual presentation of the elements on your page.
Do not use tabindex values of 1 or greater to change the default keyboard navigation order.

Dark & light focus indicator

Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.

As a developer, less is, for most of the time, better. It’s easier to maintain short and long term, but also redueces the use of complex HTML or ARIA markup or CSS directives like !important that could find your web pages to not validate for HTML5 or accessibility. Another benefit of using less and simpler code, it’s that it requires lower bandwidth when a user browses your website.

Having both a dark & light focus indicator in one style reduces the amount of code you’ll have to use and validate.

Exercise: tab and set focus on the following snippets and their respective items “tab” accessibled. We set up tabindex attributes to 0 on all of the selectors for the benefits of the exercise only, but don’t appear in the HTML code snippet for that reason.

Links, buttons, and form controls are natively accessible to keyboard users, so should be used for interactivity whenever possible. Page elements that are not interactive to mouse or touch users should not be made keyboard focusable (such as by using tabindex). Making non-interactive elements keyboard navigable will cause confusion.

The Force is strong with this one. I have you now.

Kid, I've flown from one side of this galaxy to the other. I've seen a lot of strange stuff, but I've never seen anything to make me believe there's one all-powerful Force controlling everything. There's no mystical energy field that controls my destiny. It's all a lot of simple tricks and nonsense. Alderaan? I'm not going to Alderaan. I've got to go home. It's late, I'm in for it as it is.

What?!
Don't underestimate the Force.
I suggest you try it again, Luke. This time, let go your conscious self and act on instinct.

Fillerama - Star Wars lorem ipsum

The Force is strong with this one. I have you now.

What?!
Don't underestimate the Force.
I suggest you try it again, Luke. This time, let go your conscious self and act on instinct.

Fillerama - Star Wars lorem ipsum

HTML Code

<div class="live-snippet">
    <div class="focus-indicator dark-background">
        <h3>The Force is strong with this one. I have you now.</h3>
        <p>Kid, I've flown from one side of this galaxy to the other. I've seen a lot of strange stuff, but I've never seen anything to make me believe there's one all-powerful Force controlling everything. There's no mystical energy field that controls my destiny. It's all a lot of simple tricks and nonsense. Alderaan? I'm not going to Alderaan. I've got to go home. It's late, I'm in for it as it is.</p>
        <ul>
            <li>What?!</li>
            <li>Don't underestimate the Force.</li>
            <li>I suggest you try it again, Luke. This time, let go your conscious self and act on instinct.</li>
        </ul>
        <div class="reference-link">
            <small><em><a href="http://fillerama.io/" tabindex="0">Fillerama - Star Wars lorem ipsum</a></em></small>
        </div> 
    </div>
    <div class="focus-indicator light-background">
        <h3>The Force is strong with this one. I have you now.</h3>
        <p>Kid, I've flown from one side of this galaxy to the other. I've seen a lot of strange stuff, but I've never seen anything to make me believe there's one all-powerful Force controlling everything. There's no mystical energy field that controls my destiny. It's all a lot of simple tricks and nonsense. Alderaan? I'm not going to Alderaan. I've got to go home. It's late, I'm in for it as it is.</p>
        <ul>
            <li>What?!</li>
            <li>Don't underestimate the Force.</li>
            <li>I suggest you try it again, Luke. This time, let go your conscious self and act on instinct.</li>
        </ul>
        <div class="reference-link">
            <small><em><a href="http://fillerama.io/" tabindex="0">Fillerama - Star Wars lorem ipsum</a></em></small>
        </div> 
    </div>
</div>

CSS code

As always, make sure your outlines and borders have a contrast ratio of at least 4.5:1.

.focus-indicator {
  padding: .5rem;
  border: 1px solid #999;
}

.focus-indicator.dark-background {
  background-color: #000;
  color: #fff;
}

.focus-indicator.dark-background a {
  color: #fff;
}

.focus-indicator.dark-background a:focus,
.focus-indicator.dark-background a:hover {
  border-bottom: 3px solid #000;
  color: #000;
}

.focus-indicator.light-background {
  background-color: #fff;
  color: #000;
}

/* Prevents from having movement from the selector when on focus */
.focus-indicator [tabindex="0"] {
  border: 2px solid transparent;
  outline: 2px solid transparent;
}

.focus-indicator [tabindex="0"]:focus {
  border: 2px solid #000;
  outline: 2px solid #fff;
}

.reference-link {
  text-align: right;
}

References

Page titles

Page titles are important because they help a user navigate their browser. Most users have multiple tabs open at once. It’s easier to jump between pages if each page title is unique. It’s also helpful to have the unique portion first, usually the name of the page.

How to testing

Check that the title shown in the tab for the page is unique and describes the page accurately.

The title should be in plain English or user’s language of selection.
The title should describe the web site as well as the specific page being displayed by the site.

Examples

<title>Page Titles | ilumino Pattern Library</title>

The title for this page is ‘Page Titles | ilumino Pattern Library’. The first half is the name of this page and the second is the name of the site.

Data

Forms

Groupings

Images

Structure

Nutrition Facts label

Examples

Without table

Footnotes

HTML code

CSS code

References

Auto-suggest

Requirement #1 - Keyboard accessible

HTML Code

CSS code

How to test

Testing

Fieldset

How to test

Examples

Passes

Fails

How ARIA affects form inputs

No ARIA

With aria-label

With aria-labelledby pointing at carmakedescription

With aria-labelledby pointing at carlabel carmakedescription

With aria-describedby pointing at carmakedescription

Auto-Suggestion

Auto-update

Main navigation

Example

HTML code

CSS stylesheet

Javascript files

Example Usage Options

Accessibility Features

Keyboard Support

Note

WAI-ARIA Roles, States, and Properties

References

Screen readers tested

Main navigation Noscript Complex

Example

HTML code

CSS stylesheet

Javascript files

Example Usage Options

Accessibility Features

Keyboard Support

Note

WAI-ARIA Roles, States, and Properties

References

Screen readers tested

Language selector

Example with simple form

HTML code

Example without form

HTML code

CSS code

Javascript code

Country selector

Example with simple form

HTML code

Example without form

HTML code

CSS code

Javascript code

Files

References

Carousel / Slider

Lists

List with visual heading

Poutine's ingredients

HTML code

Lists with visually hidden heading

Utility menu

HTML code

Breadcrumbs navigation

With aria-labelledby pointing at `carmakedescription`

With aria-labelledby pointing at `carlabel carmakedescription`

With aria-describedby pointing at `carmakedescription`