Main navigation Noscript Complex

The Main navigation Noscript Complex snippet is in development

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 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.