Accessibility: Guideline 1.1.1: Non-Text Content and Text Labels
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 25.9k
- Forks
- 2.4k
- Avg merge
- 13h 10m
- Merged PRs (30d)
- 4
Description
This issue is loosely related to https://github.com/Redocly/redoc/issues/1279 and https://github.com/Redocly/redoc/issues/1282 since it is another accessibility issue. Nice work addressing these issues.
We are using the latest version of redoc. I am working on guideline 1.1.1 https://www.w3.org/WAI/WCAG21/quickref/ to verify that all non-text content has a text alternative. I am using the accessibility tab in firefox to check for 'Text Labels' issues and see a couple of issues.
- The search icon is not labelled or associated to a label. Decorative images can be skipped with null label text, but aria-label='search icon' could work too.
- The search input is not labelled or associated to a label. Relying on placeholder text is not acceptable: https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Text_labels_and_names
- Links: Interactive elements must be labeled. (e.g. http://redocly.github.io/redoc/#operation/addPet . There is a nice existing h2 element "Add a new pet to the store" that could be used to generate label text or could be associated to the link element programmatically via for=idOfLink or aria-labelledBy=idOfLabel. https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Text_labels_and_names
- Content type dropdown (right side of page): the input with role="combobox" and the div with role="listbox" must have a visible text label. There is a span element nearby that could be used be used to associate a label to these elements with aria-labelledBy=idOfLabel.
- Content type dropdown (center of page): the editcombobox and listbox roles must have a visible text label. There is an h5 element nearby that could be used to associate a label to these elements with aria-labelledBy=idOfLabel. The downside of using this label directly is "Request Body Schema:" may not describe these choices enough. I'd propose modifying this label to "Request Body Schema Content Type:", but it's up to you.
Thanks for your help.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce the reported cases in the Redoc example for addPet and inspect them with Firefox's Accessibility tab, using WCAG 1.1.1 and the linked MDN guidance as the starting point. Trace the search controls, links, and both content-type dropdowns to their implementation; done means each reported interactive element has an appropriate accessible name and the checks no longer report missing text labels.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100