$30 off During Our Annual Pro Sale. View Details »

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.

Radimir Bitsov

March 20, 2018
Tweet

More Decks by Radimir Bitsov

Other Decks in Technology

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