Accessibility testing tools - Denis Boudreau

Accessibility testing tools Practical tools for web content accessibility testing

a11yMTL Meetup Group Shopify Montreal October 18th, 2016

Panorama of testing tools Guilty parties

Arthur Rigaud

Arthur Gouveia

Toufic Sbeiti

Denis Boudreau

#Agilité, #Accessibilité, #Analytics. Development Team Leader @ loto-quebec

Front End Developer @ Shopify. Goofy, nerd, coffee aficionado and beer appreciator.

Public servant. Web Accessibility Guy. co-organizer of #a11yyow Accessibility Camp Ottawa

Pragmatism. Empathy. Digital Inclusion. Inclusive Design. Accessibility. User eXperience.

@a11yMTL

Practical tools for web content accessibility testing

15

Shopify

Reference: http://www.shopify.com/ @a11yMTL


16

Shopify Demo Store

Reference: https://tota11y.myshopify.com/ @a11yMTL


17

Radio-Canada

Reference: http://www.radio-canada.ca/ @a11yMTL


18

Banque Laurentienne

Reference: https://www.banquelaurentienne.ca/ @a11yMTL


19

Follow along!

http://bit.ly/2e4QpsH @a11yMTL


20

Arthur Rigaud @a11yMTL


21

Opquast Desktop by Temesis

@a11yMTL


22

Opquast Desktop Extension Installation: • Free download •

https://desktop.opquast.com/en/ or https://desktop.opquast.com/fr/

• Available for Firefox 45.0 to 50.0 (version 2.0.4) and older versions This tool provides: • Automatic testing of more than 450 Accessibility, SEO, Quality, UX and Performance tests • The ability to choose among the checklists (for example only SGQRI-008 or WCAG 2.0) • A detailed result for each failed test @a11yMTL


23

@a11yMTL


24

@a11yMTL


25

@a11yMTL


26

@a11yMTL


27

@a11yMTL


28

Tenon by Tenon LLC

@a11yMTL


29

@a11yMTL


30

@a11yMTL


31

Arthur Gouveia @a11yMTL


32

I’LL TOTA11Y SNIFF YOUR CODE TOOLS FOR EMPOWERING YOUR A11Y SKILLZ

Arthur Gouveia FRONT END STUFF & BEER

@ARTHURGOUVEIA

TOTA11Y.JS & HTML_CODESNIFFER WHAT, HOW AND WHY

tota11y.js

http://khan.github.io/tota11y/

http://bit.ly/google-axs

LIVE DEMO USING TOTA11Y.JS ON OUR DEV ROUTINE

Pros: • • •

tota11y.js

• • •

Easy integration Good entry point to a11y Great for quick wins Awesome UI for finding problems Good insights educating about practices “Supported” by Google

Cons • •

Simplified results No control over WCAG compliance level

http://bit.ly/a11y-sniffer

WCAG 2.0 Standard: “Summary”

LIVE DEMO USING HTML_CODESNIFFER ON OUR DEV ROUTINE

Pros: • • • • •

Easy integration Good UI for finding problems Throughout insight on the problems Links to solution + WCAG principle Validated with different WCAG levels

Cons •

Can’t be used as a bookmarklet on all sites due to `Content Security Policy directive`

MATHEMATICAL ACCESSIBILITY

a11y = GAGP * e GAGP = Guidelines And Good Practices e = Empathy

THANKS!

@ARTHURGOUVEIA

Toufic Sbeiti @a11yMTL


48

Colour Contrast Analyser by the The Paciello Group

@a11yMTL


49

Colour Contrast Analyzer Installation: • Free download •

https://www.paciellogroup.com/resources/contrastanalyser/

• Available for Windows and OS X in multiple languages

This tool provides two useful core functionalities: • a pass/fail assessment against WCAG 2.0 color contrast success criteria • a simulation of certain visual conditions, including dichromatic color-blindness and cataracts @a11yMTL


50

@a11yMTL


51

@a11yMTL


52

@a11yMTL


53

@a11yMTL


54

@a11yMTL


55

@a11yMTL


56

@a11yMTL


57

Web Developer Toolbar by Chris Pederick

@a11yMTL


58

Web Developer Toolbar Installation: • Browser extension •

http://chrispederick.com/work/web-developer/

• The extension is available for Chrome, Firefox and Opera, and will run on any platform that these browsers support including Windows, macOS and Linux.

@a11yMTL


59

@a11yMTL


60

@a11yMTL


61

@a11yMTL


62

@a11yMTL


63

@a11yMTL


64

@a11yMTL


65

@a11yMTL


66

@a11yMTL


67

AInspector

@a11yMTL


68

AInspector Sidebar Installation: • Web accessibility evaluation tool for Firefox based on WCAG 2.0 and ARIA •

https://addons.mozilla.org/en-US/firefox/addon/ainspector-sidebar/

• Documentation http://ainspector.github.io/overview.html

What this tool does: • AInspector Sidebar evaluates the accessibility compliance of web pages based on WCAG 2.0 Level A and AA requirements using OpenAjax Alliance rulesets. It organizes the evaluation results by Rule Categories and WCAG Guidelines. @a11yMTL


69

AInspector

@a11yMTL


70

AInspector

@a11yMTL


71

Denis Boudreau @a11yMTL


72

Your keyboard!

Reference: https://www.w3.org/WAI/perspectives/keyboard.html @a11yMTL


73

Axe developer tools

Resource: https://addons.mozilla.org/en-us/firefox/addon/axe-devtools/ @a11yMTL


74

Axe Demo



75

Axe Demo Using the Web developer tools » Accessibility audit

Reference:

http://www.radio-canada.ca/ @a11yMTL


76

Axe Demo Using the Web inspector » Inspect element

Reference:



77

Axe Demo Using the Web inspector » Select the “Accessibility tab”

Reference:



78

Axe Demo



79

Axe-core rules

Resource: https://github.com/dequelabs/axe-core/blob/master/doc/rule-descriptions.md @a11yMTL


80

Axe-core manifesto Automated accessibility testing rules must… 1. 2. 3. 4.

have a zero false positive rate be lightweight and fast work in all modern browsers themselves, be tested automatically

Join the Axe-Core community and get involved! https://github.com/dequelabs/axe-core

@a11yMTL


81

Questions & comments

Stay in touch! @a11yMTL

[email protected] @arigaud_ca [email protected] @arthurgouveia

[email protected] @TouficSbeiti [email protected] +1 (514) 730-9168 Practical tools for web content accessibility testing @dboudreau

82

Merci beaucoup! Practical tools make for practical results. Me

facebook.com/boudden @a11yMTL

ca.linkedin.com/in/dboudreau

twitter.com/dboudreau

about.me/dboudreau


83

@a11yMTL


84

http://a11yMTL.org/ @a11yMTL


85