Devographics / Devographics/Monorepo
Disclosure widget accessibility issues
- 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.