Automating Accessibility Testing with Axe Presented by: - PDF document

¡ ¡ W9 ¡ Accessibility ¡Testing ¡ Wednesday, ¡October ¡2nd, ¡2019 ¡1:30 ¡PM ¡ ¡ ¡ ¡ ¡ Automating ¡Accessibility ¡Testing ¡with ¡ Axe ¡ ¡ Presented ¡by: ¡ ¡ ¡ ¡ Dylan ¡Barrell ¡ ¡ Deque ¡Systems ¡Inc. ¡ ¡ Brought ¡to ¡you ¡by: ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ 888 -­‑-­‑-­‑ 268 -­‑-­‑-­‑ 8770 ¡ ·√·√ ¡904 -­‑-­‑-­‑ 278 -­‑-­‑-­‑ 0524 ¡-­‑ ¡info@techwell.com ¡-­‑ ¡http://www.starwest.techwell.com/ ¡ ¡ ¡ ¡ ¡ ¡ ¡

¡ Dylan ¡Barrell ¡ ¡ Dylan ¡Barrell ¡has ¡been ¡focused ¡on ¡accessibility ¡testing ¡for ¡the ¡past ¡nine ¡years, ¡ having ¡developed ¡the ¡first ¡browser-­‑based ¡developer ¡tool ¡for ¡accessibility ¡testing ¡ and ¡founded ¡the ¡open ¡source ¡technologies ¡that ¡make ¡up ¡the ¡axe ¡family ¡of ¡tools. ¡This ¡ includes ¡axe-­‑core, ¡axe-­‑webdriverjs, ¡and ¡react-­‑axe. ¡He ¡has ¡also ¡been ¡involved ¡in ¡ many ¡large ¡accessibility ¡remediation ¡projects ¡in ¡financial ¡services, ¡online ¡retail, ¡and ¡ government ¡sectors. ¡He ¡has ¡a ¡degree ¡in ¡computer ¡science ¡and ¡a ¡master's ¡in ¡business ¡ administration ¡from ¡the ¡University ¡of ¡Michigan ¡and ¡is ¡currently ¡the ¡Chief ¡Product ¡ Officer ¡at ¡Deque. ¡ ¡ ¡

9/24/19 Accessibility ¡Tes6ng ¡with ¡Axe ¡ @dylanbarrell ¡ ¡ 508 dylanb ¡ AUDIT ARIA ADA WCAG 1

9/24/19 Other ¡Myths ¡ • Accessibility ¡tes6ng ¡is ¡usability ¡tes6ng ¡ Other ¡Myths ¡ • Accessibility ¡tes6ng ¡is ¡usability ¡tes6ng ¡ 2

9/24/19 Other ¡Myths ¡ • Accessibility ¡tes6ng ¡is ¡usability ¡tes6ng ¡ • Accessibility ¡tes6ng ¡cannot ¡be ¡automated ¡ Prac6cal ¡Accessibility ¡Tes6ng ¡ Journey ¡ 3

9/24/19 Two ¡part ¡journey ¡ • Lets ¡do ¡everything ¡manually ¡ • Lets ¡automate ¡it ¡ Design ¡Communica6on ¡ 1: widget annotations 1 Role: toolbar Name: Player Controls 1 1 Role: button Role: button Name: Next track Name: Previous track State: State: disabled Focusable 1 Role: button Name: Pause State: Focusable 4

9/24/19 Design ¡Communica6on ¡ 2: interaction annotations Interaction for role=button 2 Keyboard: SPACE or ENTER equals click Disabled buttons cannot receive focus Role: toolbar Disabled buttons do not respond to a click/touch Name: Player Controls Interaction for the entire component Role: button Role: button Name: Next track 2 Name: Previous track When on first track: disable “previous track” button State: State: disabled Focusable When on last track: disable “next track” button Voice: previous When playing, display the “pause” button and hide the 2 Voice: Next 2 “play” button When not playing: display the “play” button and hide the “pause” button After clicking “play”, place focus on the “pause” button After clicking “pause” place focus on the “play” button Role: button Name: Pause State: Focusable Voice: Pause 2 Design ¡Communica6on ¡ 3: alternative state annotations Interaction for role=button Keyboard: SPACE or ENTER equals click Disabled buttons cannot receive focus Role: toolbar Disabled buttons do not respond to a click/touch Name: Player Controls Interaction for the entire component Role: button Role: button Name: Next track Name: Previous track When on first track: disable “previous track” button State: State: disabled Focusable When on last track: disable “next track” button Voice: Previous When playing, display the “pause” button and hide the Voice: Next “play” button When not playing: display the “play” button and hide the “pause” button After clicking “play”, place focus on the “pause” button After clicking “pause” place focus on the “play” button 3 Focused state for a button Role: button Name: Pause Background color: rgb(201,201,201) Foreground color: rgb(54,64,77) State: Focusable Voice: Pause 5

9/24/19 Design ¡Communica6on ¡ 4: minimum control size annotations Interaction for role=button Keyboard: SPACE or ENTER equals click Disabled buttons cannot receive focus Role: toolbar Disabled buttons do not respond to a click/touch Name: Player Controls Interaction for the entire component Role: button Role: button Name: Next track Name: Previous track When on first track: disable “previous track” button State: State: disabled Focusable When on last track: disable “next track” button Voice: Previous When playing, display the “pause” button and hide the Voice: Next 4 56x56 “play” button When not playing: display the “play” button and hide the “pause” button After clicking “play”, place focus on the “pause” button After clicking “pause” place focus on the “play” button Role: button Focused state for a button Background color: rgb(201,201,201) Name: Pause State: Foreground color: rgb(54,64,77) Focusable Voice: Pause Doing ¡it ¡manually ¡ • Why ¡ • Test ¡while ¡you ¡develop ¡ • Resolve ¡differences ¡with ¡your ¡automated ¡tests ¡ • Learn ¡about ¡accessibility ¡ • You ¡need ¡some ¡tools ¡ • Automated ¡tes6ng ¡ • Roles, ¡rela6onships ¡and ¡meaning ¡(esp. ¡“non-­‑text”) ¡ 6

9/24/19 Axe ¡ • Automated ¡tes6ng ¡ • Seman6c ¡markup ¡ • Missing ¡or ¡incorrect ¡aVribute ¡usage ¡ • Color ¡contrast ¡ ¡ • … ¡ • Interac6ve ¡tes6ng ¡ • Meaning ¡ • States ¡ • “Invisible” ¡informa6on ¡ powered ¡by ¡ Deque • … ¡ Demo ¡of ¡interac6ve ¡tes6ng ¡ 7

9/24/19 Doing ¡it ¡automa6cally ¡ • Why ¡ • Regressions ¡should ¡be ¡free ¡ • You ¡need ¡some ¡tools ¡ • Automated ¡tes6ng ¡ • Calcula6ng ¡complicated ¡stuff ¡ How ¡to ¡automate ¡the ¡extension ¡tests ¡ // setup the test fixture … it(‘Do good functionality and pass accessibility tests', function(done) { // Do the functionality … let fixture = document.getElementById(‘fixture') axe.run(fixture, function(err, result) { expect(err).toBe(null) expect(result.violations.length).toBe(0) done() }) }) … 8

9/24/19 How ¡to ¡automate ¡the ¡tools ¡tests ¡ … // Check the Deque CEO’s image let img = fixture.querySelector(‘.ceoImage’) ok(img.src.indexOf(‘preety.png' !== -1)) equal(img.getAttribute('alt'), ‘Preety Kumar') … How ¡to ¡automate ¡the ¡tools ¡tests ¡ … // Check the Deque CEO’s image let img = fixture.querySelector(‘.ceoImage’) ok(img.src.indexOf(‘preety.png' !== -1)) equal(img.getAttribute('alt'), ‘Preety Kumar') … Or ¡using ¡axe-­‑core ¡u6li6es ¡ … equal( axe.commons.text.accessibleText(fixture.querySelector(‘.ceoImage')), 'Preety Kumar' ); … 9

9/24/19 Workflows ¡for ¡using ¡Axe ¡ • Test ¡driven ¡development ¡ • Write ¡tests ¡ • Write ¡code ¡ • Use ¡Axe ¡to ¡resolve ¡differences ¡between ¡tests ¡and ¡code ¡ Workflows ¡for ¡using ¡Axe ¡ • Test ¡driven ¡development ¡ • Write ¡tests ¡ • Write ¡code ¡ • Use ¡Axe ¡to ¡resolve ¡differences ¡between ¡tests ¡and ¡code ¡ • Test ¡a[er ¡development ¡ • Write ¡code ¡ • Validate ¡code ¡with ¡Axe ¡ • Write ¡tests ¡ • Use ¡Axe ¡to ¡resolve ¡differences ¡between ¡tests ¡and ¡code ¡ 10

9/24/19 Workflows ¡for ¡using ¡Axe ¡ • Test ¡driven ¡development ¡ • Write ¡tests ¡ • Write ¡code ¡ • Use ¡Axe ¡to ¡resolve ¡differences ¡between ¡tests ¡and ¡code ¡ • Test ¡a[er ¡development ¡ • Write ¡code ¡ • Validate ¡code ¡with ¡Axe ¡ • Write ¡tests ¡ • Use ¡Axe ¡to ¡resolve ¡differences ¡between ¡tests ¡and ¡code ¡ • No ¡automa6on ¡ • Write ¡code ¡ • Validate ¡code ¡with ¡Axe ¡ Ques6ons? ¡ @dylanbarrell ¡ ¡ dylanb ¡ 11