diff --git a/src/pages/components/tag/accessibility.mdx b/src/pages/components/tag/accessibility.mdx index ca966261bb1..253d22802d4 100644 --- a/src/pages/components/tag/accessibility.mdx +++ b/src/pages/components/tag/accessibility.mdx @@ -19,205 +19,70 @@ import { ListItem, } from '@carbon/react'; + + +No accessibility annotations are needed for tags, but keep these considerations +in mind if you are modifying Carbon or creating a custom component. + + + - How it works - Accessibility considerations - Resources - Accessibility testing + What Carbon provides + Development considerations -## How it works +## What Carbon provides -Tags are used for web content that needs to be labeled, categorized, or -organized using keywords that describe them. Tags are often used as a filter -where all tags are in the same color, or used when content is mapped to multiple -categories, where color is used to differentiate between categories. +Carbon bakes keyboard operation into its components, improving the experience of +blind users and others who operate via the keyboard. Carbon incorporates many +other accessibility considerations, some of which are described below. -## Accessibility considerations +### Keyboard interaction -This component has been validated to meet the -[WCAG 2.0 AA](https://www.w3.org/TR/WCAG20/) and -[Section 508](http://www.section508.gov/) accessibility guidelines, however -changes made by the content owner can affect accessibility compliance. Be sure -to review and follow the guidance in this section when updating or adding new -content to this component. +Read-only tags are not in the tab order, are not interactive, and do not receive +focus. -1. Be sure the tag text is clear and concise. -2. Color should not be used as the only means to differentiate tag categories. -3. When using custom colors be sure the minimum contrast requirements are met. -4. Tags that are modified as a link to filter content should also follow the - link Carbon Component guidance. +Dismissible tags are in the tab order and receive focus around the close icon. +Pressing `Enter` or `Space` will dismiss the tag. Tabbing away from the tag will +move focus to the next element in the tab order. -## Resources + + -#### Helpful resources for creating customized accessible implementations +![Dismissible tag in the tab order receiving focus on the close icon to potentially dismiss the tag.](images/tag-accessibility-dismissible.png) -- [IBM Accessibility Requirements](https://www.ibm.com/able/requirements/requirements/): - - [1.4.1 Use of Color](https://www.ibm.com/able/requirements/requirements/#1_4_1) - (WCAG Success Criteria - [1.4.1](https://www.w3.org/WAI/WCAG21/Understanding/use-of-color)) - - [1.4.3 Contrast (Minimum)](https://www.ibm.com/able/requirements/requirements/#1_4_3) - (WCAG Success Criteria - [1.4.3](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum)) + + -## Accessibility testing +Selectable tags are in the tab order and focus is shown around each tag. +Pressing `Enter` or `Space` toggles the selection on and off. -Accessibility issues are tracked in the -[Carbon Component GitHub repository](https://github.com/carbon-design-system/carbon/issues?q=is%3Aopen+label%3A%22type%3A+a11y+%E2%99%BF%22+label%3A%22component%3A+tag%22+) + + -### Automated test +![A group of selectable tags in the tab order, with each tag receiving focus to select or deselect.](images/tag-accessibility-selectable.png) - - - - - - - Automated test environment - - Results - - - - - - - macOS Mojave version 10.14.6 with VoiceOver -
- - Chrome version 77.0.3865.90 -
- - Dynamic Assessment Plugin version 1.8.0.0 - IBM Accessibility WCAG - 2.1 Sept. 2019 Ruleset -
- Carbon React version 7.7.1 - - - DAP test -
- Violations - - - - - + -### macOS Screen reader tests +Operational tags are in the tab order and focus is shown around each tag. +Pressing `Enter` or `Space` will disclose additional related tags. - - - - - Environment - Results - - - - - - - macOS Mojave version 10.14.6 with VoiceOver -
- - Safari Version 13.0.2 -
- Carbon React version 7.7.1 - - - VoiceOver(VO) test: - - - Control-Option-Shift-Down Arrow to enter the Web area. - - - Press Control-Option-Right Arrow key. VO announces the label and - that it is a text element. - - - Navigate to the tag with filter. VO announces, "Clear Filter, - you are currently on a group. To interact with items in this - group press Control-Option-Shift-Down Arrow." (Note: There is an - open issue. VO does not announce the "X" clear filter when Tab - is pressed immediately after the Tag text is read.) - - - - - - - - + -### Windows screen reader tests +![An operational tag in the tab order, disclosing related tags.](images/tag-accessibility-operational.png) - - - - - - Environment - Results - - - - - - - Microsoft Windows 10 -
- - Firefox version 68 -
- - JAWS 18 -
- Carbon React version 7.7.1 - - - JAWS test: - - - Navigate to the Tag. JAWS announces the tag text. - - - Navigate to the Tag with Filter. JAWS announces the tag text and - clear filter. - - - - - - - + -### iOS screen reader tests +## Developer considerations - - - - - Environment - Results - - - - - - iOS version 12.2 with VoiceOver -
- - Safari version 12.2 -
- Carbon React version 7.7.1 - - - VoiceOver test: - - - Swipe Right to the tag. VO announces the tag text and main - landmark. - - - Navigate to the tag with filter. Swipe Right to the "X". VO - announces "Clear Filter Image. Possibly very sharp close." - (Note: There is an open issue. VO should announce this as a - clear filter button.) - - - - - - - - +Keep this in mind if you’re modifying Carbon or creating a custom component. + +- Do not add an `onClick` functionality to the dismissible tag, and only reserve + interactions for the close icon in the tag. +- Do not nest buttons within the operational tag. Consider using the `as` prop + to change an element tag to avoid nesting buttons. diff --git a/src/pages/components/tag/images/tag-accessibility-dismissible.png b/src/pages/components/tag/images/tag-accessibility-dismissible.png new file mode 100644 index 00000000000..89fdb46dd4e Binary files /dev/null and b/src/pages/components/tag/images/tag-accessibility-dismissible.png differ diff --git a/src/pages/components/tag/images/tag-accessibility-operational.png b/src/pages/components/tag/images/tag-accessibility-operational.png new file mode 100644 index 00000000000..8d3b54ace65 Binary files /dev/null and b/src/pages/components/tag/images/tag-accessibility-operational.png differ diff --git a/src/pages/components/tag/images/tag-accessibility-overflow.png b/src/pages/components/tag/images/tag-accessibility-overflow.png new file mode 100644 index 00000000000..71baa557f6c Binary files /dev/null and b/src/pages/components/tag/images/tag-accessibility-overflow.png differ diff --git a/src/pages/components/tag/images/tag-accessibility-read-only.png b/src/pages/components/tag/images/tag-accessibility-read-only.png new file mode 100644 index 00000000000..7934f81d296 Binary files /dev/null and b/src/pages/components/tag/images/tag-accessibility-read-only.png differ diff --git a/src/pages/components/tag/images/tag-accessibility-selectable.png b/src/pages/components/tag/images/tag-accessibility-selectable.png new file mode 100644 index 00000000000..d2fd677b125 Binary files /dev/null and b/src/pages/components/tag/images/tag-accessibility-selectable.png differ