There is no single tool that does a full accessibility assessment of a web page. Developers use a variety of tools to help them evaluate websites. This is a practical talk with lots of demos. I will share my favorites, free and easy to use, tools to measure the level of accessibility of web page.

1. Practical tools for web content accessibility testing 1
Ottawa
May 2018
Practical tools for web content
accessibility testing
Accessibility testing
tools
@TouficSbeiti

2. Practical tools for web content accessibility testing 2
Accessibility testing tools
http://toufics.github.io/a11yppt/tools/list.html

3. Practical tools for web content accessibility testing 3
What’s web accessibility?
The level of usability of a web site for people
with disability

4. Practical tools for web content accessibility testing 4
Why this is important?
“The power of the Web is in its
universality.
Access by everyone regardless of
disability is an essential aspect.”
Tim Berners-Lee
W3C Director and inventor of the World Wide Web

5. Practical tools for web content accessibility testing 5
In Canada
One in seven Canadians aged 15 years or older
(3.8 million) reported a disability

6. Practical tools for web content accessibility testing 6
Around the world

7. Practical tools for web content accessibility testing 7
What’s WCAG?
Web Content Accessibility Guidelines

8. Practical tools for web content accessibility testing 8
8

9. Practical tools for web content accessibility testing 9
9

10. Practical tools for web content accessibility testing 10
10

11. Practical tools for web content accessibility testing 11
11

12. Practical tools for web content accessibility testing 12
12

13. Practical tools for web content accessibility testing 13
Why it’s important?
• Avoid Legal Complications (It is the law)
• Broaden Your Market Penetration
• Build Positive Public Relations
• Better SEO
• Avoid Discrimination (It is the right thing to do)
• Create a better user experience for everyone

14. Practical tools for web content accessibility testing 14
14

15. Practical tools for web content accessibility testing 15
Panorama of testing tools
• Browsers Addons/extensions
• Bookmarklets
• Software
• Online tools
• Screen Readers

16. Practical tools for web content accessibility testing 16
Panorama of testing tools
• Web Developper Toolbar
• Wave
• Accessibility Evaluator for Firefox
• PAE
• Ainspector
• Cynthia Says
• Achecker
• Chrome Accessibility Audit
• Axe
• Tenon
• HTML_CodeSnifer
• Tota11y
• Juicy Studio
• Color Contrast Analyser
• WCAG Contrast Checker
• ContrastChecker.com
• Color Oracle
• NVDA
• voiceOver MAC / iPhone
• FANG
• PEAT
• + 1

17. Practical tools for web content accessibility testing 17
Web Developer Toolbar
• Browser extension
• Chrome, Firefox and Opera (Windows, macOS and Linux)
• Tests divided by category
• Individuals tests but can be combined

18. Practical tools for web content accessibility testing 18
Wave
• Sidebar for chrome and Firefox
• Also available as an online tool
• Visual indications on the page with explanations
• Color contrast checker
• Outline display
• No Styles display

19. Practical tools for web content accessibility testing 19
Accessibility Evaluator for Firefox
• Firefox add-on
• Generate reports/lists
• No color indications/hard to read --
• Lang change ++
• Links to various tools ++

20. Practical tools for web content accessibility testing 20
Functional Accessibility Evaluator (FAE)
• Evaluate multiple pages via
web crawling (require login)
• Summary Report identifies
problem design features (e.g.
rules) and pages
• Archived Reports list
• Individual Pages checking without login
AInspector Sidebar will generally be more accurate than FAE for looking at Individual Pages

21. Practical tools for web content accessibility testing 21
Ainspector
• Sidebar for Firefox
• Based on WCAG 2.0 and ARIA
• Results organized by Categories or
WCAG Guidelines
• Provide rules definitions and
recommended actions
• Highlight issues on the web page

22. Practical tools for web content accessibility testing 22
Cynthia Says
• Online tool
• Must provide 1 URL
• WCAG 2.0 or Section 508
• Report structured by level
and SC
• Hard to read --
“Cynthia Says educates you in the concepts behind website accessibility. It is
meant for personal, non-commercial use to inform the community on what
constitutes accessible web design and accessible content.”

23. Practical tools for web content accessibility testing 23
Achecker
• Online tool
• WCAG 2.0 Section 508, BITV and Stanca
• Import results function
• Evaluate URL, uploaded file or HTML input
• Group by known, likely and potential issues
• Displays images and color contrast in results ++
• Required human check (yellow) can be flagged
as none issue with registration.

24. Practical tools for web content accessibility testing 24
Chrome Accessibility Audit
• Extension in web dev tools
• Using Lighthouse (open source)
• Results grouped by category
• Provide a score
• Show pass and fails
• Show code and link back to code inspector

25. Practical tools for web content accessibility testing 25
AXE
• Chrome extension
• Issue description
• Show only issues
• Describe the impact of the issue
• Inspect element
• Highlight issue on the page
• Dynamic interface
• Manually evaluate suggested issues

26. Practical tools for web content accessibility testing 26
Tenon.io
• Online (URL or code)
• Login $ - 20 free evaluation
• API

27. Practical tools for web content accessibility testing 27
Tenon.io

28. Practical tools for web content accessibility testing 28
Tenon.io

29. Practical tools for web content accessibility testing 29
Tenon.io

30. Practical tools for web content accessibility testing 30
Tenon.io

31. Practical tools for web content accessibility testing 31
Tenon.io

32. Practical tools for web content accessibility testing 32
Tenon.io

33. Practical tools for web content accessibility testing 33
Tenon.io

34. Practical tools for web content accessibility testing 34
Tenon.io

35. Practical tools for web content accessibility testing 35
HTML_CodeSnifer
• Client-side script that checks HTML source code
• Written entirely in JavaScript
• WCAG and Section 508
• Beatiful design
• Issue desciption
• Link to standard
• Visual indication

36. Practical tools for web content accessibility testing 36
tota11y
• Visualize how a web page performs with
assistive technologies
• A single JavaScript file
• Inserts a small button in the bottom corner
• The toolbar consists of several plugins
• Easy and informative

37. Practical tools for web content accessibility testing 37
Bookmarklets
• Diagnostic.css (20 basic tests)
• A11y.css
• Paul J Adam Bookmarklets (individual tests)

38. Practical tools for web content accessibility testing 38
Juicy Studio
• Firefox addon
• Color Contrast Analyzer
• Table Inspector (data table only)
• Visual Display of the cell role

39. Practical tools for web content accessibility testing 39
Colour Contrast Analyser
• Available for Windows and OS X in
multiple languages
• Pass/fail assessment against WCAG 2.0
• Simulation of certain visual conditions,
including color-blindness and cataracts
• Not only for a web page **

40. Practical tools for web content accessibility testing 40
WCAG Contrast Checker
• Only works on a website
• Plugin for Firefox
• Analyze a whole page and list every color pair
• Sorted from least contrast to the most
• Visual indication on the page

41. Practical tools for web content accessibility testing 41
ContrastChecker.com
• Online tool
• Pass/fail against WCAG 2.0 AA
and AAA
• Generate history
• Import to PDF
• Adjust color
• Propose colors in an image

42. Practical tools for web content accessibility testing 42
Color Oracle
• Color blindness simulator
• Window, Mac and Linux
• Full screen color filter
• Provide statistics on various type

43. Practical tools for web content accessibility testing 43
NVDA
• Free screen reader for windows
• Portable copy
• Speech Viewer
• Focus highlight (plugin)

44. Practical tools for web content accessibility testing 44
VoiceOver
• Mac
• iPhone

45. Practical tools for web content accessibility testing 45
FANG
• Firefox add-on
• Render a text version of a web
page similar to how a screen
reader would read it
• Display Headings list
• Display Links list

46. Practical tools for web content accessibility testing 46
PEAT
• Photosensitive Epilepsy
Analysis Tool
• Identify content that may induce
seizures in people with
photosensitive seizure
disorders

47. Practical tools for web content accessibility testing 47
Keyboard
• Focus Visible
• Focus Order
• No trap
• Resize text

48. Practical tools for web content accessibility testing 48
Questions & comments
Stay in
touch!
touficottawa@gmail.com
@TouficSbeiti

49. Practical tools for web content accessibility testing 49
Merci beaucoup!
Practical tools make for practical results.