This repository has been archived by the owner on Dec 17, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
d640d5b
commit 4f503a7
Showing
13 changed files
with
122 additions
and
218 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| - criteria: 1.3.1 | ||
| techniques: [G140] | ||
|
|
||
| - criteria: 1.3.2 | ||
| techniques: [G57, C6] | ||
|
|
||
| - criteria: 1.4.3 | ||
| techniques: [G18, G145] | ||
|
|
||
| - criteria: 1.4.4 | ||
| techniques: [G146] | ||
|
|
||
| - criteria: 1.4.10 | ||
| techniques: [C32] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| - criteria: 1.4.3 | ||
| techniques: [G18, G145] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| - criteria: 1.4.3 | ||
| techniques: [G18, G145] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| - criteria: 1.4.3 | ||
| techniques: [G18, G145] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,102 +1,73 @@ | ||
| ## Accessibility | ||
|
|
||
| In compliance with [WCAG 2.2](https://www.w3.org/TR/WCAG22/) Level AA this component implements the following accessibility features: | ||
|
|
||
| ### [SC 1.3.1: Info and Relationships](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships) [A] | ||
|
|
||
| The contents of this component are contained in a [navigation landmark](https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/navigation.html) and arranged in [lists](https://w3c.github.io/aria/#list). Lists can be nested to reflect the site hierarchy. | ||
|
|
||
| #### References | ||
|
|
||
| * [Technique H97: Grouping related links using the nav element](https://www.w3.org/WAI/WCAG21/Techniques/html/H97.html) | ||
| * [Technique H48: Using ol, ul and dl for lists or groups of links](https://www.w3.org/WAI/WCAG21/Techniques/html/H48.html) | ||
|
|
||
| ### [SC 1.4.1: Use of Color](https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html) [A] | ||
|
|
||
| Wherever color is used to differentiate between navigation levels or link states, there is a minimum contrast ratio of 3:1 between different colors. Shifts in position and/or indentation are used as additional indicators of navigation level. | ||
|
|
||
| ### [SC 1.4.3: Contrast (Minimum)](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html) [AA] | ||
| - criteria: 1.3.1 | ||
| techniques: [H97, H48] | ||
| description: The contents of this component are contained in a navigation landmark and arranged in lists. Lists can be nested to reflect the site hierarchy. | ||
|
|
||
| There is a minimum contrast ratio of 4.5:1 between the label of a navigation item and its background. | ||
| - criteria: 1.4.1 | ||
| description: Wherever color is used to differentiate between navigation levels or link states, there is a minimum contrast ratio of 3:1 between different colors. Shifts in position and/or indentation are used as additional indicators of navigation level. | ||
|
|
||
| ### [SC 1.4.10: Reflow](https://www.w3.org/WAI/WCAG22/Understanding/reflow.html) [AA] | ||
| - criteria: 1.4.3 | ||
| description: There is a minimum contrast ratio of 4.5:1 between the label of a navigation item and its background. | ||
|
|
||
| The navigation reduces to a single column of items on smaller screens, eliminating the need for horizontal scrolling. | ||
| - criteria: 1.4.10 | ||
| description: The navigation reduces to a single column of items on smaller screens, eliminating the need for horizontal scrolling. | ||
|
|
||
| ### [SC 1.4.11: Non-text Contrast](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html) [AA] | ||
| - criteria: 1.4.11 | ||
| description: The icon that indicates the state of an expandable navigation item uses the same foreground and background colors as the item label, ensuring that the icon meets the minimum contrast ratio for text. | ||
|
|
||
| The icon that indicates the state of an expandable navigation item uses the same foreground and background colors as the item label, ensuring that the icon meets the minimum contrast ratio for text. | ||
| - criteria: 1.4.13 | ||
| description: | | ||
| Expandable navigation items do not change state in response to hover and focus events. A click event (mouse click or Space/Enter keypress) is required to toggle the item. | ||
| ### [SC 1.4.13: Content on Hover or Focus](https://www.w3.org/WAI/WCAG22/Understanding/content-on-hover-or-focus.html) [AA] | ||
|
|
||
| Expandable navigation items do not change state in response to hover and focus events. A click event (mouse click or Space/Enter keypress) is required to toggle the item. | ||
|
|
||
| Clicking on a target outside the navigation will close any open dropdowns. Pressing Esc will close any open dropdowns and return focus to a top-level menu item. | ||
| Clicking on a target outside the navigation will close any open dropdowns. Pressing Esc will close any open dropdowns and return focus to a top-level menu item. | ||
| ### [SC 2.1.1: Keyboard](https://www.w3.org/WAI/WCAG22/Understanding/keyboard.html) [A] | ||
| - criteria: 2.1.1 | ||
| description: | | ||
| The following keyboard commands are meaningful when focus is within this component: | ||
| The following keyboard commands are meaningful when focus is within this component: | ||
| * `Tab` moves focus forward to the closest next focusable element in the navigation or to the closest next focusable element following the navigation. | ||
| * `Shift+Tab` moves focus backward to the closest previous focusable element in the navigation or to the closest previous focusable element preceding the navigation. | ||
| * `Space` and `Enter` activate a navigation item exactly as if they were clicked. | ||
| * `Esc` closes any expanded navigation section and returns focus to the closest top-level item. | ||
| Arrow navigation is not currently supported at this time. | ||
| references: | ||
| - title: Example Disclosure Navigation Menu | ||
| url: https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/ | ||
|
|
||
| * `Tab` moves focus forward to the closest next focusable element in the navigation or to the closest next focusable element following the navigation. | ||
| * `Shift+Tab` moves focus backward to the closest previous focusable element in the navigation or to the closest previous focusable element preceding the navigation. | ||
| * `Space` and `Enter` activate a navigation item exactly as if they were clicked. | ||
| * `Esc` closes any expanded navigation section and returns focus to the closest top-level item. | ||
|
|
||
| Arrow navigation is not currently supported at this time. | ||
|
|
||
| #### References | ||
|
|
||
| * [Example Disclosure Navigation Menu](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/) | ||
|
|
||
|
|
||
| ### [SC 2.1.2: No Keyboard Trap](https://www.w3.org/WAI/WCAG22/Understanding/no-keyboard-trap.html) [A] | ||
|
|
||
| Pressing `Esc` while focus is within the component closes any expanded sections and returns focus to the top-level navigation items. | ||
|
|
||
| ### [SC 2.4.3: Focus Order](https://www.w3.org/WAI/WCAG22/Understanding/focus-order.html) [A] | ||
|
|
||
| Focus order is dictated by the source code order, following the links in the underlying list from first to last, skipping any focusable elements hidden within collapsed navigation sections. | ||
| - criteria: 2.1.2 | ||
| description: Pressing `Esc` while focus is within the component closes any expanded sections and returns focus to the top-level navigation items. | ||
|
|
||
| - criteria: 2.4.3 | ||
| description: | | ||
| Focus order is dictated by the source code order, following the links in the underlying list from first to last, skipping any focusable elements hidden within collapsed navigation sections. | ||
| For expanded navigation sections, the focus order proceeds from the section toggle to the first item in the expanded section. For expanded sections with both a link and a toggle, focus order proceeds from the link to the toggle, then to the first item in the section. | ||
| For expanded navigation sections, the focus order proceeds from the section toggle to the first item in the expanded section. For expanded sections with both a link and a toggle, focus order proceeds from the link to the toggle, then to the first item in the section. | ||
| ### [SC 2.4.6: Headings and Labels](https://www.w3.org/WAI/WCAG22/Understanding/headings-and-labels.html) [AA] | ||
| - criteria: 2.4.6 | ||
| techniques: [ARIA14] | ||
| description: | | ||
| The default label, `Main`, satisfies the following recommendations for a navigation landmark name: | ||
| * It distinguishes the main navigation from other navigation elements on the page. | ||
| * It does not contain the word `navigation`. | ||
| * It is 1-3 words in length. | ||
| * It is capitalized. | ||
| references: | ||
| - title: Composing Effective and User-friendly Accessible Names | ||
| url: https://www.w3.org/WAI/ARIA/apg/practices/names-and-descriptions/#naming_effectively | ||
|
|
||
| The default label, `Main`, satisfies the following recommendations for a navigation landmark name: | ||
| - criteria: 2.4.7 | ||
| description: Focus within the component is clearly indicated. | ||
|
|
||
| * It distinguishes the main navigation from other navigation elements on the page. | ||
| * It does not contain the word `navigation`. | ||
| * It is 1-3 words in length. | ||
| * It is capitalized. | ||
|
|
||
| #### References | ||
|
|
||
| * [Technique ARIA14: Using aria-label to provide an invisible label where a visible label cannot be used](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA14.html) | ||
| * [Composing Effective and User-friendly Accessible Names](https://www.w3.org/WAI/ARIA/apg/practices/names-and-descriptions/#naming_effectively) | ||
|
|
||
|
|
||
| ### [SC 2.4.7: Focus Visible](https://www.w3.org/WAI/WCAG22/Understanding/focus-visible.html) [AA] | ||
|
|
||
| Focus within the component is clearly indicated. | ||
|
|
||
| ### [SC 2.5.8: Target Size (Minimum)](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html) [AA] | ||
|
|
||
| Non-inline links and toggle buttons maintain a minimum size of 22×22 pixels. | ||
|
|
||
| ### [SC 4.1.2: Name, Role, Value](https://www.w3.org/WAI/WCAG22/Understanding/name-role-value.html) [A] | ||
|
|
||
|
|
||
| toggle button | ||
| * aria-controls="IDREF" | ||
| * aria-expanded="true/false" | ||
| container | ||
| * id="IDREF" | ||
| link | ||
| * aria-current="page" | ||
| - criteria: 2.5.8 | ||
| description: Non-inline links and toggle buttons maintain a minimum size of 22×22 pixels. | ||
|
|
||
| * removes any existing aria-current attributes in the nav | ||
| * sets aria-current="page" on focused link | ||
|
|
||
|
|
||
| #### References | ||
|
|
||
| * [Using WAI-ARIA state and property attributes to expose the state of a user interface component](https://www.w3.org/WAI/WCAG22/Techniques/aria/ARIA5) | ||
| - criteria: 4.1.2 | ||
| techniques: [ARIA5] | ||
| description: | | ||
| This component utilizes the following ARIA features: | ||
| * The toggle button for expandable sections use the `aria-controls` attribute with a value equal to the `id` of the section contents. | ||
| The toggle button also uses the `aria-expanded` attribute, with a value of `true` or `false` depending on the visibility of the section contents. | ||
| * The recommended usage includes placing `aria-current="page"` on the navigation link that represents the current page. | ||
| * When a navigation item is selected, any existing `aria-current="page"` attribute is removed from the navigation links and `aria-current="page"` is added to the newly selected link. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| releases: | ||
| first: 3.0.0 | ||
| related: | ||
| - il-header | ||
| - il-nav-section | ||
| slots: | ||
| - default: true | ||
| description: | | ||
| Contains an unordered list of navigation items. List items may contain either of the following: | ||
| * A link | ||
| * A [navigation section](../il-nav-section/README.md) | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| - criteria: 1.4.3 | ||
| techniques: [G18, G145] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| - criteria: 1.4.3 | ||
| techniques: [G18, G145] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| - criteria: 1.4.3 | ||
| techniques: [G18, G145] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| - criteria: 1.3.1 | ||
| description: Despite being increased and italic font, no misleading information is being created that might imply text relationships. Quotes are being added via the blockquote tag. | ||
|
|
||
| - criteria: 1.3.2 | ||
| description: Content displayed in the markup matches the sequence generated by the web control. | ||
|
|
||
| - criteria: 1.4.1 | ||
| description: Color is not used to define pertinent information | ||
|
|
||
| - criteria: 1.4.3 | ||
| description: There is a minimum contrast ratio of 4.5:1 between the text and the background, following color themes. | ||
|
|
||
| - criteria: 1.4.5 | ||
| description: The quote is decorative and will not be read by screen readers. | ||
|
|
||
| - criteria: 1.4.10 | ||
| description: The quote changes size to ensure the information retains proper flow. | ||
|
|
||
| - criteria: 2.4.6 | ||
| description: Guidance is given to ensure headings are not used in the quote component. | ||
|
|
||
| - criteria: 2.4.7 | ||
| description: Focus with the component is clearly indicated using the basic themes. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| - criteria: 1.4.3 | ||
| techniques: [G18, G145] |