Devographics / Devographics/Monorepo

Disclosure widget accessibility issues

Open
#371 0 comments 0 reactions 0 assignees View on GitHub
a11y
Dominant language
TypeScript
Stars
178
Forks
55
Avg merge
1m
Merged PRs (30d)
2

Description

Using the [Accessibility page](https://2023.stateofhtml.com/en-US/features/accessibility/) from the latest (2023) survey, the disclosure widgets under [Accessibility Pain Points](https://2023.stateofhtml.com/en-US/features/accessibility/#accessibility_pain_points) have a few problems.

1. They do not have an `aria-expanded` attribute to programmatically convey their state.
2. Their accessible name changes when activated.
3. Their focus styles do not match their hover styles (definitely in Firefox).

For item 1, I encourage you to use [`aria-expanded`](https://www.w3.org/TR/wai-aria/#aria-expanded) with `true` when expanded and `false` when collapsed. This will convey to screen reader users whether new content has been exposed or not. If you are unfamiliar with how disclosure widgets are exposed to screen readers, I have a [video using JAWS / Chrome](https://adrianroselli.com/2020/05/disclosure-widgets.html#Simple) showing it in action.

For item 2, the accName changes from "+7" (or similar) to "-" (announced "hyphen" or "dash"). This change [may not be communicated](https://adrianroselli.com/2020/12/be-careful-with-dynamic-accessible-names.html), or it may be communicated and then a voice user has an extra challenge while a screen reader user may not understand the context.

For item 3, I don't see a `:hover` selector, and so I am worried this is managed by JS. In Firefox, the only visual cue is the [default browser focus indicator](https://adrianroselli.com/2017/02/avoid-default-browser-focus-styles.html), which passes WCAG (on a technicality) but is essentially useless as a visual cue. There is no reason to leave Firefox _and_ keyboard users in particular with an inadequate interface, particularly if this is the simple CSS fix I expect it would be.

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.