Skip to content

Commit

Permalink
Breadcrumb accessibility (#2773)
Browse files Browse the repository at this point in the history 
* Update accessibility.mdx

Add new template.

* Update accessibility.mdx

Updated content to match handoff material

* Update accessibility.mdx

modified update to opening paragraph

* added images

* Update accessibility.mdx

removed contraction

* Update accessibility.mdx

Altered headings and image captions; corrected spelling of labelling

* updated images

* Update accessibility.mdx

slight update to caption to remove formatting

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
  • Loading branch information
@mbgower @kodiakhq
mbgower and kodiakhq[bot] committed Mar 21, 2022
1 parent c0c0c2b commit e1f4ccf
Show file tree
Hide file tree
Showing 3 changed files with 28 additions and 310 deletions.
338 changes: 28 additions & 310 deletions src/pages/components/breadcrumb/accessibility.mdx
View file
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>

## 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
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
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

1 comment on commit e1f4ccf

@vercel
Copy link

@vercel vercel bot commented on e1f4ccf Mar 21, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

Please sign in to comment.