Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update navigation component a11y documentation #4916

Merged
merged 1 commit into from
Nov 24, 2023
Merged

Update navigation component a11y documentation #4916

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions templates/docs/patterns/navigation/accessibility.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,13 @@ context:

Navigation allows users to navigate different pages or content in a website. The list of navigation items can be displayed on the top or left edge of the viewport.

The component can be navigated to via the keyboard. Pressing the `Tab` key will highlight the navigation items. When an element is highlighted, pressing the `Enter` key will open the corresponding view.
The component can be navigated via the keyboard. Pressing the `Tab` key will highlight the navigation items. When an element is highlighted, pressing the `Enter` key will open the corresponding view.

We use JavaScript, to ensure the side navigation items are only accessible using the keyboard when the drawer is open and in view. We've controlled the focus, so it lands on the toggle button in the drawer when the drawer opens, and lands on the toggle button outside the drawer when the drawer closes.

The navigation component has the `<nav>` HTML tag to aid assistive technology. Also it uses several WAI-ARIA tools to aid assistive technology:
The navigation component has the `<nav>` HTML tag to aid assistive technology. It also uses several WAI-ARIA tools to aid assistive technology:

- Navigation component uses `aria-label`, which is the description of it.
- The navigation component uses `aria-label`, which is the description of it.
- Individual items use several `aria` attributes:
- `aria-control`, which references the ID of the navigation panel it controls.
- `aria-hidden`, which takes a boolean value to control the dropdown navigation items.
Expand All @@ -30,10 +30,10 @@ Consider the size that navigation elements are displayed at. They should be easi
This component strives to follow [WCAG 2.1 (level AA) guidelines](https://www.w3.org/TR/WCAG21/), and care must be taken to ensure this effort is maintained when the component is implemented across other projects. This section offers advice to that effect:

- The visual order of the UI objects that is read by assistive technologies should match with the source code.
- Each navigation element should have a unique and clear label. Be sure not to include the word “navigation” in the `aria-label`, as this would be repeated by the screen reader.
- Javascript will be needed to show/hide a collapsible element. The toggle element should have an `aria-controls` attribute that matches with the collapsible element’s `id`.
- Give each navigation element a unique and clear label. Do not include the word “navigation” in the `aria-label`, as this would be repeated by the screen reader.
- JavaScript will be needed to show/hide a collapsible element. The toggle element should have an `aria-controls` attribute that matches with the collapsible element’s `id`.
- The target element is shown/hidden by changing `aria-hidden` to `true` or `false` accordingly.
- Javascript will be needed to indicate which navigation element is active. `aria-current="page"` attribute should be given to the navigation item.
- JavaScript will be needed to indicate which navigation element is active. `aria-current="page"` attribute should be given to the navigation item.
- JavaScript should be used to handle both mouse and keyboard interactions.

## Resources
Expand Down