Navigation Links: Disclosure Pattern

Example

Navigation Links: Disclosure Pattern on WebEdit

More information on the ARIA disclosure pattern.

Keyboard Features

  • Button open and closes the list of links using space or enter key.
  • Pressing the esc key when focus is on a link closes the container element and moves focus back to the button..

ARIA Markup

  • aria-expanded="true" on the button when the container is open.
  • aria-expanded="false" on the button when the container is closed.
  • aria-controls="id-container" on the button to reference the id of container element that opens and closes.

High Contrast Support

  • When button does not have focus, CSS border property is set to 1px.
  • When button does have focus, CSS border property is set to 3px and padding is reduced by 2px.
  • When a element does not have focus, CSS border property is set to none.
  • When a element does have focus, CSS border property is set to 2px and padding is reduced by 2px.

HTML Source Code

CSS Source Code

Javascript Source Code