1. 5 Free Tools for Web Accessibility Testing

2. Who are we? John McNabb jmcnabb@paciellogroup.com @JohnKMcNabb
William (Bill) Anstice
@bill_guy

3. “It is not the beauty of a building you should look at; it's the construction of the foundation that will stand the test of time” David Allan Coe

4. Session Overview
We are going to walkthrough 5 essential tools which can be used in combination to thoroughly test desktop web sites. These tools will help you address WCAG 2.0 requirements, not 2.1, so keep that in mind.
We will be covering:
Keyboard
Windows Magnifier
Colour Contrast Analyser
aXe
NVDA
out of scope - WCAG 2.1 
because most of it requires manual testing
dependency on a physical mobile device
current laws use WCAG 2.0

5. 1) Keyboard
Lets start with the one test tool that comes with every computer (physical or virtual) your keyboard
Strategy:
Tab order
Consider the order the items are tabbed to and if it makes sense
Focus Styles
Is there is indication of what element is the current one, and can it be seen
Mouse/Keyboard Parity
Does everything that works with your mouse, work with your keyboard
*Testing should be completed without a screen reader

6. What to Expect Tab order
Tab goes to the next actionable element, Shift+Tab goes to the previous one. This may be programmatically defined so pay close attention.
Check EVERYTHING!
When on a link, pressing Enter will engage it.
When on a button, pressing Enter or Space will engage it.
When on a radio button or checkbox, pressing Up/Down arrow keys will cycle through all the elements in the group.
Consider if or where ARIA may be used

7. What to Expect Focus Styles
A visible focus indicator is, any dotted line, highlight, or visible marker that shows which actionable element you’ve tabbed to.
Most modern web browsers have their own default method to indicate focus.
Unfortunately WCAG 2.0 does not clearly define the requirements, only that it is required.
Custom styling is regularly used on websites to change the default behaviour and define a unique focus indication.
You need to pay close attention to non native elements, or custom page styling as they could override default behaviour or eliminate the default altogether.

8. Default Browser Focus Browser Default focus indicator IE Firefox
Chrome

9. What to Expect Mouse/Keyboard Parity
As not all users can leverage a mouse, you need to be consistent with the mouse and keyboard experience.
Ensure that for all items that have a mouseover or hover state, also have a corresponding focus state
They do not have to be the same, but it must be applied.
Elements that are actionable with a mouse should also be actionable with a keyboard.
This is especially applicable to items that have an onclick function associated to it
Look out for improper ARIA use

10. Keyboard Testing Script
Step
Test
Pass
Fail 1
Tab around the page, and verify that you can reach all actionable elements.
All actionable elements can be reached.
Some actionable elements can’t be reached. 2
As you tab around the page, all actionable elements must show a visible focus indicator.
All actionable elements show a visible focus indicator.
Some actionable elements don’t show a visible focus indicator. 3
All actionable elements must be reached in a logical order (top to bottom, left to right).
All actionable elements are reached in a logical order.
Some actionable elements are not reached in a logical order. 4
Tab to some links and press Enter.
Links function as though they were clicked.
Links don’t function as though they were clicked. 5
When you’ve reached a radio button or checkbox, press the Up/Down arrow keys to cycle through them.
All actionable elements in the group can be reached. 6
When you’ve reached a submit button, press Enter or Space to ‘click’ it.
Submit button was clicked.
Submit button wasn’t clicked.

11. 2) Windows Magnifier
When testing a site for accessibility, it’s easy to focus on blind users and forget about users with low vision. Users with low vision may use a screen magnifier, which will require them to scroll horizontally - and that’s something we may not have considered when designing a page.
Testing with a magnifier is recommended when implementing a new framework, new types of form controls, or new mouseover features.
Set up Windows Magnifier
Press Windows Key+U and select Start Magnifier
Please Note: Using Windows Magnifier is not the same experience as using browser-based zooming, and test results will not be the same.
Tip: The macOS equivalent is under Settings  Accessibility  Zoom.

12. What could you be missing?

13. What to Expect How do it use it:
Windows - Magnifier - set to around 200% - 400% - Know your audience
Test any tooltips/rollovers and make sure you can read them - make sure they don’t disappear when you scroll sideways to read them.
Test these :
Any elements which dynamically appear/change should be adjacent to the control which activated them
Related controls should be near each other - not on opposite sides of the screen

14. Live Demo

15. 3) Colour Contrast Analyser
For people with low vision or colour
blindness, it’s important that text have
good colour contrast compared to its
background
Colour Contrast Analyser does not
require any installation; it just
needs to be run.
Strategy:
Use your mouse to select a foreground
and background colour and the application will compare the colours and provide a contrast ratio
Consider any background colour as well as any background images that are being used with the text.
4.5:1 or higher for stand sized text, or 3.0:1 or higher for large text
Large text (24px/1.5em or 19px/1.2em bold)

16. This tool allows you to select the rendered colour of fore/background.
What to Expect
How to use:
Click on the eye Dropper for foreground and background and to select the desired colour.
This will display a magnified lens to assist you in finding the intended colours
This may be tricky due to the antialiasing effect of your computer, so you may need to try a few times to get an appropriate colour selection.
You can also input the Hex colour value if you are having difficulty.
You can also use the slider to make minor changes
This tool allows you to select the rendered colour of fore/background.

17. 4) aXe
The aXe browser plugin is a great automated testing tool, but it doesn’t replace other forms of testing, like manual screen reader testing.
How to get it:
Go to the aXe website: and download the version for Firefox or Chrome.
Install aXe per the instructions on the above website.
How do I start:
Open your browser (Chrome or Firefox).
Navigate to the page to be tested.
Open developer tools; usually by pressing F12
Click the aXe tab/menu. **Called “Accessibility” in Safari
Click the Analyze button.

18. What to Expect What does this give me:
A description of the issue with a link to additional info available for free on Deque University
A snippet of the code that has caused the issue
Guidelines for fixing the issue
Information about the severity of the issue and which accessibility guidelines are being violated (e.g. WCAG 2.0, Section 508, etc.)
And the "Inspect" button which will bring you to the problem-code in your browser's page inspector

19. aXe sample output # Purpose Details 1 Violation categories
Click these to select a category 2
List of violations within the current category
Click to step through violations 3
Inspect Node link
Click to inspect the HTML code using the browser’s developer tools 4
Highlight link
Click to visually highlight the page element within the browser 5
Learn more link
Click to visit the dequeuniversity.com web site and learn more about the violation 6
Info on violation
Provides information at a glance, such as: category, WCAG level, and WCAG success criterion violated

20. Live Demo

21. 5) NVDA
A screen reader is a program that reads the screen aloud, with a voice synthesizer. Screen readers are generally used by blind users, although they may also be used by users with low vision or cognitive disabilities (like dyslexia).
VoiceOver for iOS or macOS
Narrator for Windows 10
TalkBack for Android - for details, see docs on gestures and explore by touch
JAWS for Windows
How to get it:
On Windows, download NVDA from here: donation is optional
Run the installer.

22. What to Expect How to test with NVDA Load your web and Launch NVDA.
Set the mouse aside so it doesn't interfere with your test.
Optionally you can toggle mouse tracking on/off: Insert+M
Press Control to stop NVDA from reading. (You will use this a lot.)
Press Control+Home to jump to the top of the page. Press the down arrow key repeatedly, reading the page contents from top to bottom, while verifying reading order
Press Ctrl+Home to jump to the top of the page again. This time, tab through the page - you should reach each link and form control.
Without using the mouse, you should be able to have NVDA read anything on the page, and you should be able to use all links and form controls.
Press Insert+F7 - this will display a convenient menu of Links, Headings, and Landmarks. To again verify content is detected.

23. NVDA Quick Tips Suggestions: Keyboard Keystrokes Toggle Mouse tracking
It can be helpful for verifying content quickly
Leverage Speech Viewer, as it will visualize what NVDA is speaking
Helpful for accuracy checks
Keyboard Keystrokes
Ctrl - stop talking
Ctrl+Home - place focus at top of page
Down arrow - read next line
Insert+F7 - show menu of Links, Headings, and Landmarks
Tab - takes you to links and form controls (not text)
Insert+Space - exit focus mode
Insert+Q - closes NVDA
Ctrl+Alt+up/down/left/right arrow keys - navigate data table
Insert+N > T > S - open Speech Viewer

24. Live Demo

25. Honorable Mentions Bookmarklets - pauljadam.com
Bookmarklets are small JavaScript code snippets that inject elements into your page to help visually review page content.
Lighthouse - built into Chrome
Leveraging aXe-core, it is a "light" version of the aXe toolbar that is included in all new versions of Chrome.
Especially useful in corporate organizations where Chrome extensions may be locked down.

26. Anything else to Consider?
Responsive Design
You may need to evaluate the same page several times in different resolutions to test all the content
For example:
has 4 versions of the page depending on dimensions of the viewport

27. Questions? William (Bill) Anstice bill.anstice@td.com @bill_guy
John McNabb
@JohnKMcNabb