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 1

WCAG ARIA ADA 508 AUDIT

Accessibility ¡Tes6ng ¡with ¡Axe ¡

@dylanbarrell ¡ ¡ dylanb ¡

9/24/19 2

Other ¡Myths ¡

• Accessibility ¡tes6ng ¡is ¡usability ¡tes6ng ¡

Other ¡Myths ¡

• Accessibility ¡tes6ng ¡is ¡usability ¡tes6ng ¡

9/24/19 3

Other ¡Myths ¡

• Accessibility ¡tes6ng ¡is ¡usability ¡tes6ng ¡
• Accessibility ¡tes6ng ¡cannot ¡be ¡automated ¡

Prac6cal ¡Accessibility ¡Tes6ng ¡ Journey ¡

9/24/19 4

• Lets ¡do ¡everything ¡manually ¡
• Lets ¡automate ¡it ¡

Two ¡part ¡journey ¡

1 1 1 1 1: widget annotations

Role: toolbar Name: Player Controls Role: button Name: Previous track State: disabled Role: button Name: Pause State: Focusable Role: button Name: Next track State: Focusable

Design ¡Communica6on ¡

9/24/19 5

Role: button Name: Next track State: Focusable Voice: Next

2 2: interaction annotations 2

Role: toolbar Name: Player Controls Role: button Name: Previous track State: disabled Voice: previous Role: button Name: Pause State: Focusable Voice: Pause Interaction for role=button Keyboard: SPACE or ENTER equals click Disabled buttons cannot receive focus Disabled buttons do not respond to a click/touch Interaction for the entire component When on first track: disable “previous track” button When on last track: disable “next track” button When playing, display the “pause” button and hide the “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

Design ¡Communica6on ¡

2 2 2

3: alternative state annotations 3

Role: toolbar Name: Player Controls Role: button Name: Previous track State: disabled Voice: Previous Role: button Name: Pause State: Focusable Voice: Pause Role: button Name: Next track State: Focusable Voice: Next Interaction for role=button Keyboard: SPACE or ENTER equals click Disabled buttons cannot receive focus Disabled buttons do not respond to a click/touch Interaction for the entire component When on first track: disable “previous track” button When on last track: disable “next track” button When playing, display the “pause” button and hide the “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 Focused state for a button Background color: rgb(201,201,201) Foreground color: rgb(54,64,77)

Design ¡Communica6on ¡

9/24/19 6

4: minimum control size annotations 4

Role: toolbar Name: Player Controls Interaction for role=button Keyboard: SPACE or ENTER equals click Disabled buttons cannot receive focus Disabled buttons do not respond to a click/touch Interaction for the entire component When on first track: disable “previous track” button When on last track: disable “next track” button When playing, display the “pause” button and hide the “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 Focused state for a button Background color: rgb(201,201,201) Foreground color: rgb(54,64,77) 56x56

Design ¡Communica6on ¡

Role: button Name: Previous track State: disabled Voice: Previous Role: button Name: Pause State: Focusable Voice: Pause Role: button Name: Next track State: Focusable Voice: Next

• 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”) ¡

Doing ¡it ¡manually ¡

9/24/19 7

• Automated ¡tes6ng ¡
• Seman6c ¡markup ¡
• Missing ¡or ¡incorrect ¡aVribute ¡usage ¡
• Color ¡contrast ¡ ¡
• … ¡
• Interac6ve ¡tes6ng ¡
• Meaning ¡
• States ¡
• “Invisible” ¡informa6on ¡
• … ¡

Axe ¡

powered ¡by ¡Deque

Demo ¡of ¡interac6ve ¡tes6ng ¡

9/24/19 8

• Why ¡
• Regressions ¡should ¡be ¡free ¡
• You ¡need ¡some ¡tools ¡
• Automated ¡tes6ng ¡
• Calcula6ng ¡complicated ¡stuff ¡

Doing ¡it ¡automa6cally ¡

// 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() }) }) …

How ¡to ¡automate ¡the ¡extension ¡tests ¡

9/24/19 9

… // Check the Deque CEO’s image let img = fixture.querySelector(‘.ceoImage’)

• k(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’)

• k(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' ); …

How ¡to ¡automate ¡the ¡tools ¡tests ¡

9/24/19 10

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 ¡

9/24/19 11

• 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 ¡

Workflows ¡for ¡using ¡Axe ¡

@dylanbarrell ¡ ¡ dylanb ¡

Ques6ons? ¡