Accessibility: Guideline 1.1.1: Non-Text Content and Text Labels

[LGallione]

trafficstars

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.

1. 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.
2. 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
3. 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
4. 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.
5. 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.

[adamaltman]

On number 3 (links), is this label okay:

[kburk1997]

@adamaltman is there a way to customize that label to match the heading text instead of the destination?