dequelabs / dequelabs/cauldron
RFC: Support for consolidated skip link region
- Dominant language
- TypeScript
- Stars
- 127
- Forks
- 31
- Avg merge
- 2d 12h
- Merged PRs (30d)
- 8
Description
### Background
Using the `` component multiple times like this:
```jsx
```
Generates markup that includes multiple separate navigation regions:
```html
```
When multiple navigation regions appear on the same page, [it is recommended](https://dequeuniversity.com/class/program-management/building-a-library-of-components-patterns/navigation-menus) to differentiate their purpose using the `aria-label` or `aria-labelledby` attributes. If we apply this practice to multiple instances of the `` component:
```jsx
```
We end up with multiple navigation regions with different accessible names, but with a very similar purpose (they're all skip links of one sort or another):
```html
```
Sailesh P. has pointed out that this creates an overly verbose experience for AT users. It would be preferable in this scenario to have a single navigation region for all skip links with a more general accessible name:
```html
```
There is currently no way to accomplish this with the `` component as-is.
### Recommendation
Decouple the navigation region from the skip link itself by removing the `` element from the rendered output of the `` component. The anchor can still be wrapped in a semantically neutral element to allow class-based styling to be applied to the component's rendered output.
This would allow authors to compose skip-link navigation regions more explicitly:
```jsx
```
Contributor guide
Assessment
This issue has not been assessed yet.