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

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.

2ac0603f272f18d3eef87e65f5ecdc90?s=128

Radimir Bitsov

March 20, 2018
Tweet

Transcript

  1. 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
  2. 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!
  3. 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.
  4. 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
  5. 12.

    @radibit Web a11y should be an integral part of an

    ethical and empathetic development process
  6. 16.
  7. 17.
  8. 18.
  9. 19.

    @radibit Colorable h p://jxnblk.com/colorable/ Find a safe color combination with

    predefined colors according to the WCAG standards.
  10. 20.

    @radibit Color Safe h p://colorsafe.co/ Create an accessible color pale

    es based on WCAG guidelines of text and background contrast ratios.
  11. 21.
  12. 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.
  13. 31.

    @radibit NVDA h ps://www.nvaccess.org/ NVDA (NonVisual Desktop Access) is a

    free (open source) screen reader for Windows from NVAccess.
  14. 34.
  15. 38.
  16. 39.

    @radibit Sonarwhal h ps://sonarwhal.com/ A linting tool that will help

    you with your site's accessibility, speed, and security.
  17. 40.
  18. 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.
  19. 42.
  20. 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.
  21. 45.
  22. 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.
  23. 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.
  24. 52.
  25. 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.
  26. 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.
  27. 58.
  28. 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
  29. 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/
  30. 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/