Press "Enter" to skip to content

What I think I know about making accessible widgets

I mention Oracle in this post so as a reminder: my views are my own and do not necessarily reflect the views of my employer.

One nice thing about working at Oracle is that they take accessibility seriously. I have worked on web apps before that were supposed to be accessible but this is the first company I have worked for where I could actually get my hands on a (non-demo-mode) JAWS screen reader to do my own testing. You can try to follow all the best practices but you really do need to test with a screen reader to know how well you have done.

I have found that keyboard accessibility and screen reader accessibility are somewhat at odds.

If you do the right thing for keyboard accessibility (i.e. managing focus) and don’t use WAI-ARIA at all then you have a chance of being accidentally partially accessible in JAWS and probably other screen readers. This is assuming that you follow best practices for being accessible to screen readers (use label correctly, use native form controls – links, checkboxes etc. in semantically appropriate ways).

The problem is that all your keyboard/focus management logic is in vain since you are probably going to use arrow keys and JAWS is not going to give them to you (JAWS uses many keys for itself). The reason you have any chance of success is because the normal screen reading behavior of the arrow keys may be close enough and using native form controls will allow JAWS to access them in a reasonable way. How well it works will depend on the details of your rich control. The best you can do is to try to find the right balance between normal use and screen reader use. This should work OK with older browsers and screen readers depending on the various bugs and odd interactions between various browser and screen readers.

The other option is to go the full WIA-ARIA route. By using the appropriate ARIA roles and states and properties you can get JAWS version 10 (and presumably other new ARIA aware readers) to give you the keyboard keys you need. For this to work you need very recent versions of browser and JAWS. I have had some initial success with JAWS 10 and FF3.5. It looks like this approach will provide the very best functionality for all users. I have not yet tried the combination of JAWS 10 and IE8. The trouble is that the combination of JAWS 10 and IE7 works quite badly when you use ARIA. JAWS seems to get some of the ARIA information like roles but doesn’t get enough to work correctly. It gives up the keyboard keys but then doesn’t handle the ARIA based changes and therefore the normal JAWS arrow key functionality doesn’t work either. This is the worst possible behavior. Presumably older versions of JAWS that don’t know anything about ARIA will work fine with IE7 even if the rich control uses ARIA provided the ARIA support is on top of non-ARIA techniques mentioned previously. I have not yet tested this combination.

To me this means that if you are adding on to an existing app that must support older browsers or screen readers then using ARIA probably isn’t worth it yet. But if you are starting a new app that wont be released for a while then using ARIA is the way to go. You can still support older browsers but you would have to require that for screen reader accessibility an ARIA aware browser and reader must be used.

Another possible solution is to have an option to turn WAI-ARIA support on or off. I don’t like this because of the added complexity of implementation and testing.

Here are some resources that I found very useful in my recent accessibility work: Improving Accessibility Through Focus Management, WAI-ARIA Best Practices, and Delegating the focus and blur events.