diff --git a/third_party/aria-practices/src/content/patterns/disclosure/examples/disclosure-navigation.html b/third_party/aria-practices/src/content/patterns/disclosure/examples/disclosure-navigation.html index 3ba188ae9ea88..b6c12866d7ef6 100644 --- a/third_party/aria-practices/src/content/patterns/disclosure/examples/disclosure-navigation.html +++ b/third_party/aria-practices/src/content/patterns/disclosure/examples/disclosure-navigation.html @@ -2,71 +2,13 @@ - Example Disclosure Navigation Menu - - - - - - - - - -
-

Example Disclosure Navigation Menu

- -
-

About This Example

-
-

Important

-

- Although this example uses the word "menu" in the colloquial sense to refer to a set of navigation links, it does not use the WAI-ARIA menu role. - This implementation of site navigation does not use the menu role because it does not provide the complex functionality that assistive technologies expect in a widget that has the menu role. - Typical site navigation does not need all the - keyboard interactions specified by the menu and menubar pattern. -

-
- -

- The following example demonstrates using the Disclosure Pattern to show and hide dropdown lists of links in a navigation bar for a mythical university web site. - Each disclosure button represents a section of the web site, and expanding it shows a list of links to pages within that section. -

-

Similar examples include:

- -

Example Usage Options

-

- This example demonstrates two different ways of implementing keyboard support. - Toggle between them with the following checkbox. -

- -
- -
-
-

Example

-
-
- -
- -
-

Accessibility Features

-
    -
  1. Since this set of disclosure buttons controls visibility of navigation links for the mythical university web site, the list that contains them is wrapped in a navigation landmark named Mythical University.
    2. -
  2. - 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. -
    3. -
  3. - 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. -
    4. -
  4. 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.
    5. -
  5. - Optional navigation keys (Arrow keys, Home, and End): -
      -
    1. Implementing the optional arrow key support prevents the default page scroll behavior when focus is contained within the navigation region.
      2. -
    2. - Optional 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. -
    3. - If implemented, the optional 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. -
      4. -
    -
    6. -
-
- -
-

Keyboard Support

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
KeyFunction
- Tab
- 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
- (Optional) - 		-
    -
  • 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
- (Optional) - 		-
    -
  • 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 (Optional) -
    -
  • 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 (Optional) -
    -
  • 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.
    • -
-
-
- -
-

Role, Property, State, and Tabindex Attributes

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
RoleAttributeElementUsage
- aria-controls="IDREF" - - button - The disclosure button controls visibility of the container identified by the IDREF value.
- aria-expanded="false" - - button - -
    -
  • Indicates that the container controlled by the disclosure button is hidden.
    • -
  • - CSS attribute selectors (e.g. [aria-expanded="false"]) are used to synchronize the visual states with the value of the aria-expanded attribute. -
    • -
-
- aria-expanded="true" - - button - -
    -
  • Indicates that the container controlled by the disclosure button is visible.
    • -
  • - CSS attribute selectors (e.g. [aria-expanded="true"]) are used to synchronize the visual states with the value of the aria-expanded attribute. -
    • -
-
- aria-current="page" - - a - Indicates that the page referenced by the link is currently displayed.
-
- -
-

Assistive Technology Support

-

Learn how to interpret and use assistive technology support data

- -
- -
-

JavaScript and CSS Source Code

- - -
- -
-

HTML Source Code

-

To copy the following HTML code, please open it in CodePen.

- -
- - -
-