Save 37% off PRO during our Black Friday Sale! »

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.

D16df72790a8532b8e6999eb5ac0e3f7?s=128

Marco Solazzi

August 04, 2021
Tweet

Transcript

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

  2. 2 Frontend Engineer, Merpay
 
 - From Italy 
 -

    Passionate about UI development and accessibility
 Marco Solazzi

  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.
  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
  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
  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!
  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:
  8. 8 We already have a lot of processes, tools, bundlers…

    Should we really add a11y automation? ...yet more fatigue
  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
  10. 10 Authoring tools Use ESLint + eslint-plugin-vuejs-accessibility / eslint-plugin-jsx-a11y to

    receive warnings in the editor
  11. 11 Documentation tools Get accessibility violations in Storybook with Storybook

    addon-a11y
  12. 12 Component testing tools Storybook + Jest + jest-axe 1.

    Load existing stories 2. Mount 3. Check!
  13. 13 Integration testing tools Cypress + cypress-axe • Per-audit configuration

    • Statistics for the most occurring violations • And re-use same test scenarios
  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
  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:
  16. 16 Thanks!

  17. 17 ここにタイトルをいれる 見出し ダミーのテキスト
 ダミーのテキスト
 • ダミーのテキスト
 • ダミーのテキスト
 •

    ダミーのテキスト
 • ダミーのテキスト
 • ダミーのテキスト
 • ダミーのテキスト
 • ダミーのテキスト
 • ダミーのテキスト
 • ダミーのテキスト
 • ダミーのテキスト
 
 • ダミーのテキスト
 • ダミーのテキスト
 • ダミーのテキスト
 • ダミーのテキスト
 • ダミーのテキスト
 
 ダミーのテキスト

  18. 18 今日のトピック ここにキーメッセージ 今日のトピック 今日のトピック 今日のトピック 02 03 04 01

  19. 19 ここにタイトルをいれる ダミータイトル ダミータイトル ダミータイトル ダミータイトル ダミータイトル ダミータイトル

  20. 20 ここにタイトルをいれる 見出し 見出し ダミーのテキスト ダミーのテキスト

  21. 21 画像
 画像をはめた説明のときに使用してください。 ここにタイトルをいれる

  22. 22 テキスト ここにタイトルをいれる 強調したいタイトル

  23. 23 画像
 ここにタイトルをいれる 右側に画像をはめた説明のとき に使用してください。

  24. 24 グラフイメージ 30,000 0 60,000 90,000 120,000 150,000 300 0

    600 900 1,200 1,500 2018 2017 2016 2015 2014 累計ダウンロード数(千) 日本登録MAU(万) 億DL超 1.3 万 14,267 登録MAU
  25. 25 グラフイメージ2 説明はここでおこなう

  26. 26 男性 40% 女性 60% 10-20代 46% 30代 24% 40代

    21% 50代~ 9% グラフイメージ3
  27. 27

  28. 28 ここにタイトルをいれる ダミーテキスト ダミーテキスト ダミーテキスト