dequelabs / dequelabs/cauldron

RFC: Support for consolidated skip link region

Open
#1,023 4 comments 0 reactions 0 assignees View on GitHub
accessibility rfc
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.