Do accessibility review

mozilla / remote-newtab

Remotely-hosted New Tab Page

https://mozilla.github.io/remote-newtab/src/

Mozilla Public License 2.0

15 stars 7 forks source link

Do accessibility review #179

Open k88hudson opened 8 years ago

k88hudson commented 8 years ago

Bugzilla bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1194236

Look at or just inspect current new tab page
Make sure we have the same accessibility features
use the .sr-only(screen-reader only) class if needed, see main.scss

rlr commented 8 years ago

First I thought this was just adding aria-* and role attributes to the right elements. But it's more than that because those attributes are dynamic based on what is in focus and all that. We need to add a bunch of keyboard event handling too. Basically, reimplement/apply the accessibility specific stuff in https://dxr.mozilla.org/mozilla-central/source/browser/base/content/contentSearchUI.js

marcoscaceres commented 8 years ago

I hope we don't need to add additional arial-* if we use the appropriate HTML elements. We should really get Moz's accessibility folks, like @asurkov, to do the review for us. It will save us a lot of time and at least we can be assured we are doing it right.

oyiptong commented 8 years ago

Down with arial, @marcoscaceres ? ;-)

marcoscaceres commented 8 years ago

Down with arial, @marcoscaceres ? ;-)

Busted! I'm still on post-op drugs :) Githubs is fun!!!!

rlr commented 8 years ago

uhm. Well I just finished doing keyboard navigation of the search widget and added the attributes to match what's currently in product. But the attributes were the easy part. We can easily change that if there is a new gold standard for a11y in rich html widgets.

marcoscaceres commented 8 years ago

@rlr, that's awesome to hear that you got that working, btw! My suggestion is basically let's defer additional stuff to the a11y folks. They will know more precisely what is needed (if anything!) and probably have access to actual a11y technology to test this on.

rlr commented 8 years ago

yes, for sure! I dont feel qualified to sign off on the final review :+1:

oyiptong commented 8 years ago

I've spoken to dbolter and will try to get on marco's calendar for an a11y review

asurkov commented 8 years ago

@marcoscaceres I wish people have used accessible HTML elements instead ARIA, but that doesn't happen unfortunately for bunch of reasons.

Marco Zehe should be helpful in review, and is capable to advise about ARIA and accessible HTML if needed.

marcoscaceres commented 8 years ago

@asurkov, we have the possibility to do the right thing for a change, as we are basically redoing the new tab page from scratch (i.e., we don't have to "div" and "span" all the things, and can use actual "HTML" stuff :smile:). Looking forward to getting Marco Zehe's feedback.

asurkov commented 8 years ago

As long as the authors are on the same page about those divs and spans then we are in good shape :) Another problem is that HTML misses some widgets like grids you're probably gonna use.

k88hudson commented 8 years ago

I talked to Marco Zehe in the office today, he suggested the following:

look at about:home, test on Windows
look at this blog post with regards to autocomplete stuff
it is more expected/natural to tab to the to the next button and blur the search input, instead of maintaining focus on the input while tabbing through buttons. Although, it's a good question whether we want to make improvements or maintain the same functionality as the other search inputs...

When we are ready with some initial fixes, let's put this patch up on gh-pages so we can ask Marco to test it!

Good work so far :+1:

asurkov commented 8 years ago

Autocompletes are supported by native HTML, please be cautious, it's likely you don't need ARIA for that. If not then please file a11y bug, we have to fix it.

Let me add that DOM focus and user focus may be different. Having said that, if the app keeps them in sync then it's great. However it's still ok if it doesn't, in this case you need to make sure to report the user focus to the assistive technologies.