ユーザのためだけじゃない！エンジニアも嬉しいアクセシビリティ改善のための自動テスト

by Tomoya Kashifuku

Slide 1

Slide 1 text

ユーザのためだけじゃない！エンジニアも嬉しいアクセシビリティ改善のための自動テスト 2024年9月12日 Design Dontaku vol 4 株式会社マネーフォワード樫福智哉

Slide 2

Slide 2 text

自己紹介カシフクトモヤ樫福智哉 𝕏: @cashfooooou 株式会社マネーフォワード “マネーフォワードクラウド経費”を作ってます最近、ウクレレの練習を始めました自撮り

Slide 3

Slide 3 text

デザイン面、実装面のアクセシビリティアクセシビリティはデザインと実装の両輪で向上するデザイン実装 ● コントラスト ● フォント ● 配置 ● キーボード操作 ● 支援技術 ● ユーザ設定の反映（フォントサイズ、ダークテーマ）

Slide 4

Slide 4 text

アクセシビリティ改善は二の次？実装が終わったあとにアクセシビリティの改善をしようとすると難しいすでに機能が完成している（ように感じる）ので、リリースされてしまう Tabキーでフォーカスできないから直してほしいんだけどリリースが迫ってるので無理ですマウスでなら問題なく使えますよ！ div を使って実装されたボタン

Slide 5

Slide 5 text

アクセシビリティ改善は工程の後ろに回したくない開発プロセスの終わりに予定を組むと、その通りには実施されないリリースデザイン実装アクセシビリティ改善 QAプロセス予定リリース現実

Slide 6

Slide 6 text

アクセシビリティ改善は開発プロセスのもっと前に組み込める改善は「しなきゃいけないもの」から「した方がやりやすい」になるアクセシビリティ改善をもっと前へ！リリースデザイン実装アクセシビリティ改善 QAプロセスこれまでリリースデザインアクセシビリティの高い実装これから QAプロセス

Slide 7

Slide 7 text

アクセシビリティを使った自動テストフロントエンドのテストツールはアクセシビリティを活用するものが多い ● Testing Library ● Playwright 導入が楽な Playwright の活用方法を中心に紹介

Slide 8

Slide 8 text

Playwright の紹介 ● End to End (E2E) テストのツール ● ユーザの動作を再現しページが正しく動作していることをテストする

Slide 9

Slide 9 text

Playwright の紹介 ● End to End (E2E) テストのツール ● ユーザの動作を再現しページが正しく動作していることをテストする該当のページにアクセスして

Slide 10

Slide 10 text

Playwright の紹介 ● End to End (E2E) テストのツール ● ユーザの動作を再現しページが正しく動作していることをテストする「送信」という名前のボタンを見つけてクリックし

Slide 11

Slide 11 text

Playwright の紹介 ● End to End (E2E) テストのツール ● ユーザの動作を再現しページが正しく動作していることをテストする「送信しました」と表示されることを確認する

Slide 12

Slide 12 text

テストがアクセシビリティ改善につながる理由 “いい実装” をしないとテストが通らない（例）buttonタグを使うとテストで要素にアクセスできる ❌ ✅

Slide 13

Slide 13 text

“いい実装” をするとアクセシビリティが高くなるブラウザは “いい実装” をするといい機能を提供するように作られてるテストがアクセシビリティ改善につながる理由 ● Tabキーでフォーカスできる ● Enter/Space キーで実行できる ● disabled 属性だけで非活性にできる ● 支援技術が「ボタンである」と解釈できる ● どれもできない

Slide 14

Slide 14 text

テストがアクセシビリティ改善につながる理由 div タグを使って実装できなくはないが... (React での実装) ● 自前実装をテストするのが大変 ● 全てのブラウザで動作するか　　確認するのは不可能 ● 想定してない使い方があるかも

Slide 15

Slide 15 text

テストがアクセシビリティ改善につながる理由 ● “いい実装” をしないとテストが通らない ● “いい実装” をするとアクセシビリティが高くなる　　テストを実装することで “いい実装” を強制させられる　　その結果、アクセシビリティが高くなる

Slide 16

Slide 16 text

正しいマークアップはコンピュータが正しく解釈できる（マシンリーダブル）いい実装はマシンリーダブル ✅ いい実装いい解釈アクセシブルないい機能人が理解しやすいいいテスト

Slide 17

Slide 17 text

正しいマークアップを使うには ● Markuplint や eslint-plugin-jsx-a11y に機械的に解決できることは任せる ● MDN を参照する

Slide 18

Slide 18 text

やりすぎには注意テストを通すためにユーザが価値を感じづらい実装は本末転倒 ● role属性を付与してロールを書き換える ○ type属性の活用や他のタグで代替できないか確認 ● aria-disabled属性で非活性にする ○ disabled属性で代替できないか確認ブラウザで実際の動作を確認してみるよくわからない場合は “短い実装” を目指すといいかも

Slide 19

Slide 19 text

まとめ ● テストを導入すると正しいマークアップをしたくなる ● マシンリーダブルな実装はアクセシビリティも高い傾向にある ● 無理にがんばりすぎず、簡潔でわかりやすい実装を心がける