I'm new to getting my designs working well with assistive tools. What do you use for testing and what are the prominent tools that should be targeted?
Get comfortable navigating web pages using the various functionalities available (the ability to scan only headlines, for example).
I also open the accessibility tab in the web inspector in Chrome or Firefox to see the accessibility tree, which is like a simplified version of the DOM tree that gets exposed to assistive technologies.
- you want to at least test with JAWS, NVDA and VoiceOver
- automated tooling isn’t great and you probably need to manually verify things
- axe does help spot problems just don’t rely on it completely
That doesn't mean that Orca doesn't do a good job or that it works very differently than other screen readers. The A11ySupport site [1] does have some data on Orca's support for specific code. For instance, it fully supports the aria-expanded attribute but has no support for description list elements.
If you have an iOS or Android device, using their built-in screen readers might be more instructive.
[0] https://webaim.org/projects/screenreadersurvey8/ [1] https://a11ysupport.io/
It depends on what the stakes are but if you’re consistently confirming things work with just one screen reader, that makes most of the difference.
NVDA with Firefox or Chrome is probably the best to test with; it’s free, probably the most common choice now, and it has a lot in common with JAWS. But if testing with Windows is inconvenient, testing VoiceOver with Safari for Mac is still very useful, in part because it’s very similar to VoiceOver on iOS.
Simple things like 'outline' on focused or activated elements are easy things to pick up. Elements that are changed by JavaScript should not only change on a mouseclick or touch, but also on pressing Enter or ESC.