js-fileexplorer icon indicating copy to clipboard operation
js-fileexplorer copied to clipboard

ARIA implementation/ADA screen reader compliance

Open cubiclesoft opened this issue 4 years ago • 0 comments

During the initial development, significant effort was made to make sure keyboard navigation worked well and hit on all the critical navigation areas. This is a very complex widget with lots of little details. The big question is: Is this Americans with Disabilities Act (ADA) compliant? If not, then what ARIA labels, code changes, etc. need to be applied to bring it into compliance?

Firefox has a built-in accessibility analyzer. When I run it, it shows a giant list of "problems" that it found. Here's an example:

Clickable elements must be focusable and should have interactive semantics.

The very first of several hundred potential accessibility issues that Firefox finds with the widget is in regards to the entire widget wrapper and keyboard navigation. Basically, Firefox is saying that while the mouse can click on the widget wrapper, the keyboard can't reach the same element. When the user clicks on the widget, it forces the keyboard focus area to a focusable element.

There are several questions to answer here for just this one issue:

  • Is the mouse-click -> focus-steal behavior the correct thing to do?
  • Does there need to be keyboard interaction on the entire widget wrapper for ADA compliance?
  • What ARIA items and/or code changes are needed to achieve ADA compliance?

I am not qualified (as in, I don't use a screen reader and, even if I did, I wouldn't use it the same way a person with vision deficiencies would) nor am I sufficiently knowledgeable in this area to figure out what the correct answers are despite reading a number of guides on ARIA. What happens now, IMO, makes the most sense under a wide range of circumstances, but the various choices made might not be the best choices.

As I mentioned, I've read a number of ARIA guides - clearly written by fully sighted people (who are also unqualified) - and there doesn't seem to be a consensus on how to approach building widgets like this one. Just broad, sweeping, hand-waving "here are the various ARIA attributes" and "good luck!" style messaging. Neither of which help to actually answer the earlier questions. So if you chance upon this issue and can provide laser-focused answers to those three questions (and whatever others I might have), it would provide a starting point to work through the accessibility issue list and ultimately bring the whole widget into complete ADA compliance.

cubiclesoft avatar Jun 18 '20 18:06 cubiclesoft