Recently, we got a internal web mail about accessibility and the whole digital team is going to do some improvement on a11y. It is quite a good thing, but just found some of the devs, they have a wrong understanding about it.
First, some devs are thinking a11y == screen reader. This is not true. Because a11y contains more rules than that. Basically if you write correct HTML, screen reader can read correctly in most cases. Like using <fieldset> to wrap a form radio group. If you wrap it using <div> which seems to be the same, but screen reader will treat them as different. You can try NVDA or JAWS, listen for the first reading and then change the radio button selection, you will hear the screen readers understand what it is and read clearly, when using <fieldset>. <div> tag will let screen reader read the contents as well, but screen reader doesn’t treat radio buttons as a group and doesn’t read legend again.
So, write good HTML, and use aria attributes optionally, when necessary.
second, thinking about the keyboard users, all the website should be able to navigate from top to bottom, left to right by tab key. But you should not add tab stop to all the headers, asides etc. Only the interactive elements should be tab stopped. In the past, one of our testers was trying to use tab key to let Screen reader read every content, which is wrong. Screen reader has it’s own shortcut keys, like insert-down to read next sentence, insert-page down to read next paragraph. And there is something called Form Mode, which makes form inputs much easier. Usually, users are using these keys.
So, use tabindex=-1 wisely. We should set focus to something when necessary and should not break the normal tab top flow. Also users will use some shortcut keys to list all the links in the screen and choose one they want to go. (this is also why [learn more] is not good for links, users don’t know the context when choosing links)
Next, contrast ratio and font size really matters. Although users can zoom in or out the website, but it’s another operation, we should make the user feel comfortable at first. And there is a High Contrast mode in the browser, it’s better to test it one time.
And there is another misunderstanding : chrome is always better than other browsers. In fact JAWS has better support in IE than in Chrome.
Quoted from WebAIM Survey:
If you don’t consider versions of Internet Explorer, the most common combinations are:
JAWS with IE — 23.9%
Window-Eyes with IE — 14.9%
NVDA with Firefox — 11.4%
ZoomText with IE — 9.8%
ZoomText with Firefox — 6.9%
VoiceOver with Safari — 6.8%
So, try to use different browsers when trying screen readers.
Accessibility at first maybe kind of troublesome, but in fact on the road of making our site accessible, it makes ourselves better, as we are writing good HTML, making everything clear and correct. Try to do it correct at first. :)
