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

Breadcrumb accessibility #2773

Merged
merged 14 commits into from
Mar 21, 2022
Merged

Breadcrumb accessibility #2773

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
bb5425e
Update accessibility.mdx
mbgower Mar 7, 2022
efbb069
Update accessibility.mdx
mbgower Mar 7, 2022
3be7482
Update accessibility.mdx
mbgower Mar 8, 2022
5dcca04
added images
mbgower Mar 9, 2022
f17c66e
Update accessibility.mdx
mbgower Mar 9, 2022
128f6e3
Merge branch 'main' into breadcrumb-accessibility
mbgower Mar 10, 2022
e44002b
Update accessibility.mdx
mbgower Mar 11, 2022
2666015
updated images
mbgower Mar 11, 2022
98e725f
Merge branch 'main' into breadcrumb-accessibility
mbgower Mar 12, 2022
5751918
Merge branch 'main' into breadcrumb-accessibility
mbgower Mar 16, 2022
e51f45e
Update accessibility.mdx
mbgower Mar 16, 2022
35065a0
Merge branch 'breadcrumb-accessibility' of https://github.com/mbgower…
mbgower Mar 16, 2022
e76bd85
Merge branch 'main' into breadcrumb-accessibility
mbgower Mar 17, 2022
d50dd63
Merge branch 'main' into breadcrumb-accessibility
kodiakhq[bot] Mar 21, 2022
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
338 changes: 28 additions & 310 deletions src/pages/components/breadcrumb/accessibility.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,335 +6,53 @@ description:
tabs: ['Usage', 'Style', 'Code', 'Accessibility']
---

import {
StructuredListWrapper,
StructuredListHead,
StructuredListBody,
StructuredListRow,
StructuredListInput,
StructuredListCell,
OrderedList,
ListItem,
} from 'carbon-components-react';
<PageDescription>

No accessibility annotations are needed for breadcrumbs, but keep these considerations in mind if you are modifying Carbon or creating a custom component.

</PageDescription>

<AnchorLinks>
<AnchorLink>How it works</AnchorLink>
<AnchorLink>Accessibility considerations</AnchorLink>
<AnchorLink>Resources</AnchorLink>
<AnchorLink>Accessibility testing</AnchorLink>
<AnchorLink>What Carbon provides</AnchorLink>
<AnchorLink>Development considerations</AnchorLink>
</AnchorLinks>

## How it works
## What Carbon provides

The `Breadcrumb` component implements the
[Breadcrumb design pattern from WAI ARIA](https://www.w3.org/TR/wai-aria-practices-1.1/#breadcrumb)
for Carbon. It establishes a landmark on the page which assists the user in
understanding where they currently are and which pages exist in the current
page's hierarchical order.
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.

The landmark is provided through the `<nav>` element which contains a list of
links. The `<nav>` element is labeled by the `aria-label`attribute, providing a
chance to describe to the user the type of navigation provided by the list of
links. The current page is identified with the `aria-current="page"` attribute
on the appropriate link.
### Keyboard interactions

## Accessibility considerations
Each page link in the breadcrumb is reached by `Tab` and activated by `Enter`. The current page, if listed in the breadcrumb, is not a link. If the breadcrumb is truncated, the ellipsis button for the overflow menu is in the tab order. See [overflow menu](https://carbondesignsystem.com/components/overflow-menu/usage/) for details on its keyboard operation.

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.

1. The breadcrumb should remain in the same relative order and location on each
web page.
1. The link text should be clear, reflect the breadcrumb location accurately and
easy to understand for all users.
1. The link to the current page element in the breadcrumb has the
`aria-current="page"` attribute.
<Row>
<Column colLg={8}>

## Resources
![example of breadcrumb keyboard interaction](images/breadcrumb-accessibility-1.png)

- [W3C WAI-ARIA Authoring Practices Breadcrumb Design Pattern](https://www.w3.org/TR/wai-aria-practices/#breadcrumb)
covers the usage of ARIA names, state and roles.
- [IBM Accessibility Requirements:](https://www.ibm.com/able/requirements/requirements/)
- [2.4.4 Link Purpose (In Context)](https://www.ibm.com/able/requirements/requirements/#2_4_4)
(WCAG Success Criteria
[2.4.4](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-refs.html))
- [3.2.3 Consistent Navigation](https://www.ibm.com/able/requirements/requirements/#3_2_3)
(WCAG Success
Criteria[3.2.3](https://www.w3.org/TR/UNDERSTANDING-WCAG20/consistent-behavior-consistent-locations.html))
<Caption>The breadcrumb's links are reached by `Tab` and activated by `Enter`.</Caption>
laurenmrice marked this conversation as resolved.
Show resolved Hide resolved

## Accessibility testing
</Column>
</Row>

Accessibility issues are tracked in the
[Carbon Design System 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+breadcrumb%22+).
### Labeling and regions

### Automated test
Carbon implements each page link as a list item inside a navigation region named “breadcrumb.” The ellipsis symbol is a button called “more breadcrumbs” which opens the [overflow menu](https://carbondesignsystem.com/components/overflow-menu/usage/).

<Row>
<Column noGutterSm>
<StructuredListWrapper>
<StructuredListHead>
<StructuredListRow head>
<StructuredListCell head>
Automated test Environment
</StructuredListCell>
<StructuredListCell head>Results</StructuredListCell>
</StructuredListRow>
</StructuredListHead>
<StructuredListBody>
<StructuredListRow>
<StructuredListCell>
- macOS Mojave version 10.14.6 with VoiceOver
<br />
- Chrome version 77.0.3865.90
<br />
- Dynamic Assessment Plugin version 1.8.0.0 - IBM Accessibility WCAG
2.1 Sept. 2019 Ruleset
<br />- Carbon React version 7.7.1
</StructuredListCell>
<StructuredListCell>
<strong>DAP test:</strong>
<br />- No violations
</StructuredListCell>
</StructuredListRow>
</StructuredListBody>
</StructuredListWrapper>
</Column>
</Row>
<Column colLg={8}>

### macOS screen reader tests
![aria-label designates the navigation region 'breadcrumb' and the ellipsis button 'more breadcrumbs’](images/breadcrumb-accessibility-2.png)

<Row>
<Column noGutterSm>
<StructuredListWrapper>
<StructuredListHead>
<StructuredListRow head>
<StructuredListCell head>Environment </StructuredListCell>
<StructuredListCell head>Results</StructuredListCell>
</StructuredListRow>
</StructuredListHead>
<StructuredListBody>
<StructuredListRow>
<StructuredListCell>
- macOS Mojave version 10.14.6 with VoiceOver
<br />
- Chrome version 77.0.3865.90
<br />- Carbon React version 7.7.1
</StructuredListCell>
<StructuredListCell>
<strong>VoiceOver(VO) Test:</strong>
<OrderedList>
<ListItem>
Tab to the breadcrumb and VO announces, "Breadcrumb 1,
breadcrumb navigation".
</ListItem>
<ListItem>
The Tab key and shift-tab navigate between the links in the
breadcrumb. VO announces, "Link Breadcrumb #. You are currently
on a link to click this link press Control-Option-Space."
</ListItem>
</OrderedList>
</StructuredListCell>
</StructuredListRow>
<StructuredListRow>
<StructuredListCell>
- macOS Mojave version 10.14.6 with VoiceOver
<br />
- Safari version 12.14.6
<br />- Carbon React Version 7.7.1
</StructuredListCell>
<StructuredListCell>
<strong>VoiceOver(VO) Test:</strong>
<OrderedList>
<ListItem>
Tab to the breadcrumb and VO announces, "Breadcrumb 1,
breadcrumb navigation".
</ListItem>
<ListItem>
The Tab key and shift-tab navigate between the links in the
breadcrumb. VO announces, "Link Breadcrumb #. You are currently
on a link to click this link press Control-Option-Space."
</ListItem>
<ListItem>
Note: In Safari > Preferences > Advanced > ensure "Press Tab to
highlight each item on a webpage" option is checked.
</ListItem>
</OrderedList>
</StructuredListCell>
</StructuredListRow>
</StructuredListBody>
</StructuredListWrapper>
</Column>
</Row>
<Caption>Carbon provides the accessibility information about the breadcrumb's structure.</Caption>

### Windows screen reader tests

<Row>
<Column noGutterSm>
<StructuredListWrapper>
<StructuredListHead>
<StructuredListRow head>
<StructuredListCell head>Environment</StructuredListCell>
<StructuredListCell head>Results</StructuredListCell>
</StructuredListRow>
</StructuredListHead>
<StructuredListBody>
<StructuredListRow>
<StructuredListCell>
- Microsoft Windows 10
<br />
- Chrome: 71.0.3578.98 (Official Build) (64-bit)
<br />
- JAWS 19.1810.64
<br />- Carbon React version 7.7.1
</StructuredListCell>
<StructuredListCell>
<strong>JAWS Test:</strong>
<OrderedList>
<ListItem>
Navigate the list with the Up and Down Arrow keys.
</ListItem>
<ListItem>
JAWS announces the beginning of the list, number of items in the
list, nesting level, content of the list item and end of the
list.
</ListItem>
<ListItem>
Information and the list item content are announced on two
separate lines on the virtual viewer.
</ListItem>
<ListItem>
Bullets and item numbers are also placed on a separate line.
</ListItem>
</OrderedList>
</StructuredListCell>
</StructuredListRow>
<StructuredListRow>
<StructuredListCell>
- Microsoft Windows 10
<br />
- Chrome: 71.0.3578.98 (Official Build) (64-bit)
<br />
- NVDA 2018.4.1
<br />- Carbon React version 7.7.1
</StructuredListCell>
<StructuredListCell>
<strong>NVDA test:</strong>
<OrderedList>
<ListItem>
Navigate the list with the Up and Down Arrow keys.
</ListItem>
<ListItem>
NVDA announces the beginning of the list, number of items in the
list, nesting level, content of the list item.
</ListItem>
<ListItem>
End of list, when exiting the list from the top or bottom.
</ListItem>
<ListItem>
List item parameters are announced together with the list item
content.
</ListItem>
</OrderedList>
</StructuredListCell>
</StructuredListRow>
</StructuredListBody>
</StructuredListWrapper>
</Column>
</Column>
</Row>

### Android screen reader tests
## Development considerations

<Row>
<Column noGutterSm>
<StructuredListWrapper>
<StructuredListHead>
<StructuredListRow head>
<StructuredListCell head>Environment </StructuredListCell>
<StructuredListCell head>Results</StructuredListCell>
</StructuredListRow>
</StructuredListHead>
<StructuredListBody>
<StructuredListRow>
<StructuredListCell>
- Android version 9 with Talkback
<br />
- Chrome: 71.0.3578.98 (Official Build) (64-bit)
<br />- Carbon React version 7.7.1
</StructuredListCell>
<StructuredListCell>
<strong>Talkback Test:</strong>
<OrderedList>
<ListItem>
Navigate the list by swiping left or right or pressing the Alt
key with the Left or Right Arrow key.
</ListItem>
<ListItem>
Talkback announces, "in list" when entering the list and "out of
list" when exiting the list.
</ListItem>
<ListItem>
Talkback also announces entering and exiting the nested lists,
the number of list items, nesting level, and content of the list
item.
</ListItem>
<ListItem>
Bullets and numbers are announced separately from the list item
content.
</ListItem>
</OrderedList>
</StructuredListCell>
</StructuredListRow>
</StructuredListBody>
</StructuredListWrapper>
</Column>
</Row>
Keep these considerations in mind if you are modifying Carbon or creating a custom component:

### iOS screen reader tests

<Row>
<Column noGutterSm>
<StructuredListWrapper>
<StructuredListRow head>
<StructuredListCell head>Environment </StructuredListCell>
<StructuredListCell head>Results</StructuredListCell>
</StructuredListRow>
<StructuredListBody>
<StructuredListRow>
<StructuredListCell>
- iOS version 13.1.3 with VoiceOver
<br />
- Safari version 13.1.3
<br />- Carbon React version 7.7.1
</StructuredListCell>
<StructuredListCell>
<strong>VoiceOver test:</strong>
<OrderedList>
<ListItem>
Navigate list items by swiping left or right, or using the Left
and Right Arrow keys on the keyboard when the quick navigation
is turned on.
</ListItem>
<ListItem>
VoiceOver announces the beginning of the list, nesting level,
content of the list item, the end of the list.
</ListItem>
<ListItem>
VoiceOver announces the beginning of the list, nesting level,
content of the list item, the end of the list.
</ListItem>
<ListItem>
Information about the list, bullets and numbers and list item
contents are pronounced separately, we have to navigate through
these one by one.
</ListItem>
</OrderedList>
</StructuredListCell>
</StructuredListRow>
</StructuredListBody>
</StructuredListWrapper>
</Column>
</Row>
* The Carbon implementation uses an html5 `<nav>` element; this could also be achieved with a “navigation” landmark on a `<div>`.
* Each link in the breadcrumb is implemented as an unordered list item so that screen readers provide more context.
* The visual / separators do not need to be text (Carbon uses CSS) and are not intended to be navigable.
Binary file added src/pages/components/breadcrumb/images/breadcrumb-accessibility-1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/pages/components/breadcrumb/images/breadcrumb-accessibility-2.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.