redoc icon indicating copy to clipboard operation
redoc copied to clipboard

Tracking: Web interface isn't accessibility friendly

Open lornajane opened this issue 5 years ago • 11 comments
trafficstars

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

  • [x] #1280 Make Response status accordions clickable
  • [x] #1281 Enable "Copy", "Expand All" and "Collapse All" to be focusable
  • [x] #1282 Make request content type dropdowns accessible
  • [x] #1283 UI review/update on method/path dropdown
  • [x] #1330 Cannot access response schema details
  • [x] #1331 Response samples can't be selected
  • [x] #1332 Make API endpoint selectable/focusable
  • [x] #1341 Make callbacks expandable
  • [x] #1342 Right hand bar body samples can't be expanded/collapsed
  • [ ] #1410 All non-text content has a text alternative (WCAG 1.1.1)
  • [ ] #2405
  • [ ] #2406
  • [ ] #2407
  • [ ] #2408
  • [ ] #2402

lornajane avatar May 29 '20 09:05 lornajane

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 avatar May 29 '20 09:05 RomanHotsiy

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

RomanHotsiy avatar May 29 '20 09:05 RomanHotsiy

Is this done @RomanHotsiy?

adamaltman avatar Jul 16 '20 02:07 adamaltman

@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!

RomanHotsiy avatar Jul 25 '20 16:07 RomanHotsiy

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

lornajane avatar Jul 28 '20 07:07 lornajane

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

Thanks!

RomanHotsiy avatar Aug 04 '20 11:08 RomanHotsiy

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?

lornajane avatar Aug 04 '20 12:08 lornajane

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 [email protected]

RomanHotsiy avatar Aug 04 '20 12:08 RomanHotsiy

I can use the most recent releases but I would like to know how to use my local clone with a local spec as well if possible - then I'd be able to test a branch

lornajane avatar Aug 05 '20 18:08 lornajane

Everything marked as complete is working perfectly now! I am definitely adopting redoc as my everyday local tool :) I did find and capture a couple of other things while I was testing a different spec today.

lornajane avatar Aug 05 '20 19:08 lornajane

Hi, are there any updates on this?

ramsy-nl avatar Apr 25 '22 11:04 ramsy-nl