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
   

   View Slide

2. @radibit
   
   

   View Slide

3. @radibit
   Radimir
   Bitsov
   Front-end engineer who ❤
   web performance, accessibility,
   and interface animation.
   

   View Slide

4. @radibit
   @radibit
   GitHub · Twi er · CodePen
   

   View Slide

5. @radibit
   What is Web Accessibility?
   

   View Slide

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
   

   View Slide

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!
   

   View Slide

8. @radibit
   # $
   

   View Slide

9. @radibit
   % &
   

   View Slide

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.
    

    View Slide

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
    

    View Slide

12. @radibit
    Web a11y should be an
    integral part of an ethical
    and empathetic
    development process
    

    View Slide

13. @radibit
    A11y Tooling ⚒
    

    View Slide

14. @radibit
    Color and Contrast
    

    View Slide

15. @radibit
    Color Oracle
    h p://colororacle.org/
    Open source, cross-platform
    application which simulates
    common color vision impairments.
    

    View Slide

16. @radibit
    

    View Slide

17. @radibit
    

    View Slide

18. @radibit
    

    View Slide

19. @radibit
    Colorable
    h p://jxnblk.com/colorable/
    Find a safe color
    combination with
    predefined colors according
    to the WCAG standards.
    

    View Slide

20. @radibit
    Color Safe
    h p://colorsafe.co/
    Create an accessible color
    pale es based on WCAG
    guidelines of text and
    background contrast ratios.
    

    View Slide

21. @radibit
    

    View Slide

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.
    

    View Slide

23. @radibit
    Readability
    

    View Slide

24. @radibit
    Readability
    Analyzer
    h ps://datayze.com/readability-analyzer.php
    Calculate the readability of a
    passage of text.
    

    View Slide

25. @radibit
    Readability
    Analyzer
    h ps://datayze.com/readability-analyzer.php
    Aim for a Flesch Reading Ease
    level between 50 – 60.
    

    View Slide

26. @radibit
    Use simple word
    and phrases
    h ps://plainlanguage.gov/guidelines/words/use-
    simple-words-phrases/
    Plainlanguage.gov's list of
    simpler words.
    

    View Slide

27. @radibit
    Plain English
    words and
    phrases
    h ps://www.wikiwand.com/en/
    List_of_plain_English_words_and_phrases
    

    View Slide

28. @radibit
    h p://www.handcoding.com/presentations/be eraccessibility/
    

    View Slide

29. @radibit
    Screen Readers
    

    View Slide

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.
    

    View Slide

31. @radibit
    NVDA
    h ps://www.nvaccess.org/
    NVDA (NonVisual Desktop Access)
    is a free (open source) screen reader
    for Windows from NVAccess.
    

    View Slide

32. @radibit
    Screen Reader Basics: NVDA -- A11ycasts #09
    

    View Slide

33. @radibit
    VoiceOver
    h ps://www.apple.com/accessibility/mac/vision/
    Integrated screen reader available
    in macOS and all Apple devices.
    

    View Slide

34. @radibit
    

    View Slide

35. @radibit
    h ps://developer.paciellogroup.com/blog/2015/01/basic-screen-reader-commands-for-accessibility-testing/
    

    View Slide

36. @radibit
    A11y Audit
    

    View Slide

37. @radibit
    aXe
    h ps://www.axe-core.org/
    Comprehensive accessibility
    checker for detecting issues on your
    website or web app.
    

    View Slide

38. @radibit
    

    View Slide

39. @radibit
    Sonarwhal
    h ps://sonarwhal.com/
    A linting tool that will help you
    with your site's accessibility,
    speed, and security.
    

    View Slide

40. @radibit
    

    View Slide

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.
    

    View Slide

42. @radibit
    

    View Slide

43. @radibit
    Automated Testing
    

    View Slide

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.
    

    View Slide

45. @radibit
    

    View Slide

46. @radibit
    h ps://open-indy.github.io/Koa11y/
    

    View Slide

47. @radibit
    AATT
    h ps://github.com/paypal/AATT
    Automated Accessibility Testing
    Tool (AATT) according to the
    WCAG standards.
    

    View Slide

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.
    

    View Slide

49. @radibit
    AccessibilityJS
    h ps://github.com/github/accessibilityjs
    Client side accessibility error
    scanner.
    

    View Slide

50. @radibit
    More resources
    

    View Slide

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.
    

    View Slide

52. @radibit
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

55. @radibit
    revenge.css
    h p://heydonworks.com/revenge_css_bookmarklet/
    CSS bookmarklet that notifies
    developers for problems in their
    HTML code.
    

    View Slide

56. @radibit
    revenge.css
    h p://heydonworks.com/revenge_css_bookmarklet/
    CSS bookmarklet that notifies
    developers for problems in their
    HTML code.
    

    View Slide

57. @radibit
    Cupper
    h ps://thepaciellogroup.github.io/cupper/
    Documentation builder created
    with web accessibility in mind
    for organizing inclusive
    components.
    

    View Slide

58. @radibit
    WebAIM
    h ps://webaim.org/
    Amazing collection of resources,
    trainings, evaluation tools
    (WAVE, Colour Checker etc.) on
    web accessibility.
    

    View Slide

59. @radibit
    Inclusive
    Components
    h ps://inclusive-components.design/
    Pa ern library of common
    interface components with focus
    on inclusive design.
    

    View Slide

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
    

    View Slide

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/
    

    View Slide

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/
    

    View Slide

63. @radibit
    Thank you
    @radibit
    Slides: h p://bit.ly/web-a11y-tooling
    

    View Slide