Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Automation Strategies for Baseline Accessibility - Merpay Tech Talk 2021

Automation Strategies for Baseline Accessibility - Merpay Tech Talk 2021

Merpay Frontend Team strategy to improve product accessibility using automation to establish a measurable and DX-friendly baseline.

Marco Solazzi

August 04, 2021
Tweet

More Decks by Marco Solazzi

Other Decks in Programming

Transcript

  1. 1
    Automation Strategies
    for Baseline Accessibility
    Marco Solazzi @dwj

    View Slide

  2. 2
    Frontend Engineer, Merpay


    - From Italy 

    - Passionate about UI development and
    accessibility

    Marco Solazzi


    View Slide

  3. 3
    A11y @ Merpay
    At Merpay Frontend Team, we aim to ensure that our services can be
    used any time, by anyone, anywhere.
    Our long-term goal is to achieve and keep WCAG AA Level for all of
    our services using automation to define a baseline.

    View Slide

  4. 4
    Accessibility and WCAG
    WCAG (Web Content Accessibility Guidelines) is a single shared
    standard for web content accessibility developed by W3C.
    It defines 3 Levels of Conformance:
    ● A (lowest). Example: color is not used as the only visual means of
    conveying information
    ● AA (mid range). Example: contents contrast ratio of at least 4.5:1
    ● AAA (highest). Example: contents contrast ratio of at least 7:1

    View Slide

  5. 5
    Accessibility and automation
    The goal is to check the accessibility of your rendered code using a
    tool. One of the most popular solution for automated accessibility
    audit is axe-core.
    Merits:
    ● Highly configurable (ex: you can choose the WCAG level)
    ● Great documentation on how to fix errors
    ● Can be easily integrated with other tools

    View Slide

  6. 6
    “Automated accessibility checking is great,
    but it needs to be clearly understood that
    you can only auto-check about 30% of #a11y
    issues”
    https://twitter.com/stevefaulkner/status/863157742005047296
    Warning!

    View Slide

  7. 7
    So… is it worth the effort?
    1. Results can be measured and tracked over time
    2. Can be used for basic quality validation on CI
    3. Can prevent basic accessibility regressions
    Reasons to use automation accessibility tools:

    View Slide

  8. 8
    We already have a lot of processes, tools,
    bundlers… Should we really add a11y
    automation?
    ...yet more fatigue

    View Slide

  9. 9
    Reduce the developer’s stress
    1. Familiar tools, less new concepts to learn
    2. Reuse environments, fixtures, artifacts
    3. Write less while creating more (accessibility) value
    Reuse existing tools and processes

    View Slide

  10. 10
    Authoring tools
    Use ESLint + eslint-plugin-vuejs-accessibility / eslint-plugin-jsx-a11y
    to receive warnings in the editor

    View Slide

  11. 11
    Documentation tools
    Get accessibility violations in Storybook with Storybook addon-a11y

    View Slide

  12. 12
    Component testing tools
    Storybook + Jest + jest-axe
    1. Load existing stories
    2. Mount
    3. Check!

    View Slide

  13. 13
    Integration testing tools
    Cypress + cypress-axe
    ● Per-audit configuration
    ● Statistics for the most occurring
    violations
    ● And re-use same test scenarios

    View Slide

  14. 14
    Why both Jest and Cypress?
    見出し
    Cypress
    + Fast
    + Integrates nicely with Storybook
    + Fail-fast (if component fails
    Cypress will fail too)
    - Less complete
    + Audit component integration
    + Closer to the user experience
    + Reliable audit for visual issues
    (ie: contrast)
    - Slow
    Jest

    View Slide

  15. 15
    Results so far
    ● We are already recording accessibility improvements
    ○ Component audit success rate ~80%
    ○ Some projects already achieved 0 accessibility violations
    ● Because finding and understanding accessibility issues is more
    developer-friendly, awareness of accessibility topics has
    increased in the team
    We are still in a WIP status, but the future looks bright:

    View Slide

  16. 16
    Thanks!

    View Slide