Better development strategy for web a11y – an overview of the available tools

With an increasing awareness of the accessibility and inclusivity importance comes the responsibility of defining a better design and development strategy for creating accessible websites and apps. Fortunately, there are tools that can help us improve the quality of our projects in terms of web accessibility. In this talk, Radimir will present in details some of the available options and their use cases.

Transcript

1. An overview of the available tools Radimir Bitsov @radibit Better development strategy for web a11y
2. @radibit
3. @radibit Radimir Bitsov Front-end engineer who ❤ web performance, accessibility, and interface animation.
4. @radibit @radibit GitHub · Twi er · CodePen
5. @radibit What is Web Accessibility?
6. @radibit “…the degree to which a website is accessible by as many people as possible” Laura Kalbag, 
 Designer & Writer, Ind.ie Accessibility For Everyone
7. @radibit It’s not about a few people Nearly 1 in 5 people have a disability in the EU Web A11y helps people with physical, mental, vision, hearing challenges and more. A lot of different groups!
8. @radibit # $
9. @radibit % &
10. @radibit Everyone might experience impairments h ps://www.microso .com/en-us/Design/inclusive The persona spectrum helps to foster empathy and to scale a solution to a broader audience.
11. @radibit “What if there was no such thing as a normal human being? If there’s no normal, there’s no edge cases – just diverse people changing from one moment to the next.” Kat Holmes, 
 Director of Inclusive Design, Microso
12. @radibit Web a11y should be an integral part of an ethical and empathetic development process
13. @radibit A11y Tooling ⚒
14. @radibit Color and Contrast
15. @radibit Color Oracle h p://colororacle.org/ Open source, cross-platform application which simulates common color vision impairments.
16. @radibit
17. @radibit
18. @radibit
19. @radibit Colorable h p://jxnblk.com/colorable/ Find a safe color combination with predefined colors according to the WCAG standards.
20. @radibit Color Safe h p://colorsafe.co/ Create an accessible color pale es based on WCAG guidelines of text and background contrast ratios.
21. @radibit
22. @radibit Color Contrast Sketch Plugin h ps://github.com/getflourish/Sketch-Color- Contrast-Analyser Calculates the color contrast of two layers and evaluates it against the WCAG.
23. @radibit Readability
24. @radibit Readability Analyzer h ps://datayze.com/readability-analyzer.php Calculate the readability of a passage of text.
25. @radibit Readability Analyzer h ps://datayze.com/readability-analyzer.php Aim for a Flesch Reading Ease level between 50 – 60.
26. @radibit Use simple word and phrases h ps://plainlanguage.gov/guidelines/words/use- simple-words-phrases/ Plainlanguage.gov's list of simpler words.
27. @radibit Plain English words and phrases h ps://www.wikiwand.com/en/ List_of_plain_English_words_and_phrases
28. @radibit h p://www.handcoding.com/presentations/be eraccessibility/
29. @radibit Screen Readers
30. @radibit JAWS h ps://www.freedomscientific.com/Products/ Blindness/JAWS Jaws (Job Access With Speech) is a proprietary screen reader for Windows from Freedom Scientific.
31. @radibit NVDA h ps://www.nvaccess.org/ NVDA (NonVisual Desktop Access) is a free (open source) screen reader for Windows from NVAccess.
32. @radibit Screen Reader Basics: NVDA -- A11ycasts #09
33. @radibit VoiceOver h ps://www.apple.com/accessibility/mac/vision/ Integrated screen reader available in macOS and all Apple devices.
34. @radibit
35. @radibit h ps://developer.paciellogroup.com/blog/2015/01/basic-screen-reader-commands-for-accessibility-testing/
36. @radibit A11y Audit
37. @radibit aXe h ps://www.axe-core.org/ Comprehensive accessibility checker for detecting issues on your website or web app.
38. @radibit
39. @radibit Sonarwhal h ps://sonarwhal.com/ A linting tool that will help you with your site's accessibility, speed, and security.
40. @radibit
41. @radibit Lighthouse h ps://developers.google.com/web/tools/lighthouse/ Lighthouse is an open-source, automated tool integrated into the Chrome DevTools for improving the quality of web pages.
42. @radibit
43. @radibit Automated Testing
44. @radibit PA11Y h ps://github.com/pa11y/pa11y Your automated accessibility testing pal. It runs HTML CodeSniffer from the command line for programmatic accessibility reporting.
45. @radibit
46. @radibit h ps://open-indy.github.io/Koa11y/
47. @radibit AATT h ps://github.com/paypal/AATT Automated Accessibility Testing Tool (AATT) according to the WCAG standards.
48. @radibit AATT + NemoJS h p://nemo.js.org/ AATT can be integrated into NemoJS testing framework to run accessibility analysis during automated unit testing.
49. @radibit AccessibilityJS h ps://github.com/github/accessibilityjs Client side accessibility error scanner.
50. @radibit More resources
51. @radibit Funkify h p://www.funkify.org/ Funkify is a Chrome extension that helps you experience the web and interfaces through the eyes of people with different abilities and disabilities.
52. @radibit
53. @radibit a11y.css h ps://ffoodd.github.io/a11y.css/ CSS file which indicates potential accessibility related issues in the HTML files. It can be used as a bookmarklet.
54. @radibit a11y.css h ps://ffoodd.github.io/a11y.css/ CSS file which indicates potential accessibility related issues in the HTML files. It can be used as a bookmarklet.
55. @radibit revenge.css h p://heydonworks.com/revenge_css_bookmarklet/ CSS bookmarklet that notifies developers for problems in their HTML code.
56. @radibit revenge.css h p://heydonworks.com/revenge_css_bookmarklet/ CSS bookmarklet that notifies developers for problems in their HTML code.
57. @radibit Cupper h ps://thepaciellogroup.github.io/cupper/ Documentation builder created with web accessibility in mind for organizing inclusive components.
58. @radibit WebAIM h ps://webaim.org/ Amazing collection of resources, trainings, evaluation tools (WAVE, Colour Checker etc.) on web accessibility.
59. @radibit Inclusive Components h ps://inclusive-components.design/ Pa ern library of common interface components with focus on inclusive design.
60. @radibit “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.” Tim Berners-Lee, 
 Engineer & Computer Scientist
61. @radibit Resources • h ps://abookapart.com/products/accessibility-for-everyone • h ps://www.microso .com/en-us/Design/inclusive • h p://colororacle.org/ • h p://jxnblk.com/colorable/ • h ps://github.com/getflourish/Sketch-Color-Contrast-Analyser • h ps://datayze.com/readability-analyzer.php • h ps://plainlanguage.gov/guidelines/words/use-simple-words-phrases/ • h p://www.handcoding.com/presentations/be eraccessibility/ • h ps://www.axe-core.org/ • h ps://sonarwhal.com/ • h ps://developers.google.com/web/tools/lighthouse/
62. @radibit Resources • h ps://github.com/pa11y/pa11y • h ps://open-indy.github.io/Koa11y/ • h ps://github.com/paypal/AATT • h p://nemo.js.org/ • h ps://github.com/github/accessibilityjs • h p://www.funkify.org/ • h ps://ffoodd.github.io/a11y.css/ • h p://heydonworks.com/revenge_css_bookmarklet/ • h ps://thepaciellogroup.github.io/cupper/ • h ps://webaim.org/ • h ps://inclusive-components.design/
63. @radibit Thank you @radibit Slides: h p://bit.ly/web-a11y-tooling