5 Free Tools for Web Accessibility Testing

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

“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

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

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

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

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.

Default Browser Focus Browser Default focus indicator IE Firefox Chrome

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

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.

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.

What could you be missing?

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 : http://iamceege.github.io/tooltipster/ 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

Live Demo

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)

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.

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: https://www.deque.com/products/axe/ 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.

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

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

Live Demo

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: http://www.nvaccess.org/download/, donation is optional Run the installer.

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.

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

Live Demo

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.

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: https://www.bostonglobe.com/ has 4 versions of the page depending on dimensions of the viewport

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