テストから始めるWebアクセシビリティ

こちらで発表した内容は、以下の記事にまとめているのでぜひご覧ください。
https://zenn.dev/yumemi_inc/articles/2df0e3ae5ae9aa

Transcript

1. テストから始めるWebアクセシビリティ すずきゆーだい
2. すずきゆーだい @szkyudi 株式会社ゆめみ所属 主にWebフロントエンドエンジニア 秋になると柿を200個ほど食べます 今秋は9月から今日まで54個（ペース遅め）
3. アクセシビリティは誰のためにあるか アクセシビリティは特定の人だけではなく、 あらゆる人のためにあるものです。 というようなことをよく耳にすると思いますが、 いまいちピンときていない方も多いのではないでしょうか？
4. エンジニア自身も恩恵を受ける当事者 少しでもアクセシビリティに興味を持ってもらうために 「テストから始めるWebアクセシビリティという」テーマで お話しさせていただきます。
5. Webフロントエンドにおけるテスト テストにはさまざまな種類があると思います。 今回はその中でもUIコンポーネントのテストにおける アクセシビリティについて紹介します。
6. React Testing Library を用いて、 Pulldownコンポーネントをテストするときの サンプルコードを紹介したいと思います。 他の技術でもおおむね同じように応用できるはずなので、 適宜読み替えていただけると幸いです。 例として用いる技術とコンポーネント
8. アクセシビリティを考慮していない例
9. role=”button” role=”button” role=”button” role=”button” role=”button”
10. テストコード
11. role=”button” role=”button” role=”button” role=”button” role=”button” 1つだけ 2つ
12. アクセシビリティを考慮した例（不完全）
13. role=”listbox” role=”listbox” role=”option” role=”option” role=”option”
14. role=”listbox” role=”listbox” role=”option” role=”option” role=”option” 1つだけ 1つずつ
15. テストコード
16. aria-expanded=”false” aria-expanded=”true” aria-selected=”false” aria-selected=”false” aria-selected=”true” 開閉状態を伝える 選択状態を伝える
17. このPulldownはまだまだ不完全 わかりやすい説明をするために、対応するべき実装を 大幅に削って紹介させていただきました。 より詳しい解説やこの発表で紹介したコードは Zennにも公開予定（19:30）なので、ぜひご覧ください。 テストから始めるWebアクセシビリティ
18. テスタビリティ !== アクセシビリティ 不適切なWAI-ARIAの利用や HTMLの仕様をハックした使い方は、 かえってアクセシビリティを下げる場合もあります。 仕様についてよく調べてから活用するか、 不安なときは `data-testid` を利用するようにしましょう。
19. 他の要素やライブラリの利用を検討してみる 複雑なUIになればなるほど、 アクセシビリティを考慮すべきポイントが増えてきて 実装やテストも難しくなります。 <select> や <option> などのネイティブな HTML 要素や よく利用されているUIコンポーネントライブラリは アクセシビリティを考慮してくれている
20. これからも みんなでより良いプロダクトを！ （SNSや対面でのご意見、ご感想もお待ちしています）