Pro Yearly is on sale from $80 to $50! »

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. 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