Tracking: Web interface isn't accessibility friendly

[lornajane]

I'm looking at ReDoc v2 (nice job by the way) but I'm running into problems where the interface isn't very accessible. Looking at the "Accessibility" tab in Firefox, it's mostly div and span tags with onClick events attached that are tripping me up. In order to be useful to more people (and for us to potentially adopt this at work), it would be great to review these and see if some of them could be implemented with some alternative markup or made focusable with tabindex.

Work items

• Make Response status code accordions clickable #1280 Make Response status accordions clickable
• Enable "Copy", "Expand All" and "Collapse All" to be focusable #1281 Enable "Copy", "Expand All" and "Collapse All" to be focusable
• Make request content type dropdowns accessible #1282 Make request content type dropdowns accessible
• UI review/update on method/path dropdown #1283 UI review/update on method/path dropdown
• Cannot access response schema details #1330 Cannot access response schema details
• Response samples can't be selected #1331 Response samples can't be selected
• Make API endpoint selectable/focusable #1332 Make API endpoint selectable/focusable
• Make callbacks expandable #1341 Make callbacks expandable
• Right hand bar body samples can't be exanded/collapsed #1342 Right hand bar body samples can't be expanded/collapsed
• Accessibility: Guideline 1.1.1: Non-Text Content and Text Labels #1410 All non-text content has a text alternative (WCAG 1.1.1)
• Accessibility: focus ring disappears on headings #2405
• Accessibility: "Authorizations" not keyboard accessible #2406
• Accessibility: Tablists do not have accessible name #2407
• Accessibility: skipped heading levels (h2 -> h5) #2408
• Accessibility: aria-required-parent on nested side nav links #2402

[RomanHotsiy]

Hey @lornajane! Thanks for the issue!

We are all in to make Redoc v2 more accessible!

Would it help to have separate issues for the different occurrences? I don't want to spam the issue queue if that's not appropriate!

Open different issues! Just make sure to group similar issues into one 😄

[RomanHotsiy]

Let's use this issue as umbrella for all the further issues. Just edit your initial comment.

[adamaltman]

Is this done @RomanHotsiy?

[RomanHotsiy]

@adamaltman, note this is a tracking issue. We will add more items here when discovered.

But all the current ones are fixed already on version 2.0.0-rc.35.

@lornajane would be great to get your feedback!

[lornajane]

Oh this is making such a big difference already! Thanks, people! There are definitely more things that I can see but not click on, I'll add to the list

[RomanHotsiy]

Hey @lornajane, we've fixed all the newly reported issues. Could you check this out again and provide any extra feedback?

Thanks!

[lornajane]

Sure, what's the best way to use a local branch with a custom spec? I had a look a few weeks ago but I'm not a frontender and it wasn't clear to me how to build a bleeding-edge or other-branch version of the thing I include in my html page to render specs (or is the CLI ready enough for an unskilled person to use at this point? That's how I used v1)

... let me know if we should track this in a separate issue or other location for discussion not about accessibility?

[RomanHotsiy]

You can use our demo page https://redocly.github.io/redoc/ or use TL;DR section from the README and replace spec-url with your definition URL: https://github.com/Redocly/redoc#tldr. Use 2.0.0-rc.36.

Also, the latest redoc-cli should be good too. Make sure to use redoc-cli@0.9.10