tota11y needs keyboard and screen reader accessibility

[deborahgu]

I was excited to try tota11y, but the tool itself is actually not accessible via keyboard or speech recognition. Technically it can be used via a screen reader, but realistically it would be almost impossible to use via screen reader without being able to see. (It doesn't make any announcements on dynamic updates, and checking a box to open up a flag on inaccessible content doesn't move the focus to the new content warning, making it almost impossible for the screen reader user to find the newly-opened warning box.)

This is important to fix for two reasons:

• many accessibility professionals (and many web professionals in general) are disabled and use assistive technology, and
• if you are trying to showcase how easy it is to fix a product to make it accessible, it would be really wonderful if your product showed off accessibility.

Thanks for building the tool and thanks for caring about accessibility!

[jdan]

Yes x10000. It's really unfortunate (and somewhat ironic) that the tool is lacking in that regard.

The main is reason is that annotations, which are the core feature of tota11y, do not place themselves too close in the DOM to the element they are labeling. Because of this, it's tricky to provide that information to screen-readers.

I've got a couple clever solutions on some local branches that I'll be shipping soon.

Thank you for the specific suggestions though.

[jdan]

Wanted to give an update here.

I've been making a number of changes on a local "a11y" branch, more specifically I've made the list of plugins keyboard accessible by using real checkboxes and a number of button styles.

I plan on making the info panel accessible next, then I'll be tackling annotations. It's coming along quite nicely, though!

[jdan]

Hey @deborahgu - have a look at #71 for some good progress. Annotations are tricky, but I think we're getting there.

[jdan]

Now that #71 has landed things are a lot better. Still, if there's anything small we can do better, let us know!