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.

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