フロントエンドのテストからアクセシビリティをしれっと広めていく

Transcript

1. フロントエンドのテストから アクセシビリティを"しれっと"広めていく 各社の事例から学ぶウェブアクセシビリティ 〜フロントエンドの最前線〜 2024/08/23 @nano72mkn
2. 自己紹介 スターフェスティバル株式会社 フロントエンドエンジニア ポメラニアンを撫でながら仕事をしています！ ゲーム好きです Apex VALORANT しょうた 🍊なつみかん @nano72mkn
3. 01 アクセシビリティを広めるの難しい問題
4. アクセシビリティの重要性を伝えるのは 比較的簡単！
5. 実際の対応となると話は別 技術的な複雑さ、専門的な知識、リソースの制約 など 様々な障壁が立ちはだかる
6. 結果として、 「大切なことは分かっているけれど、なかなか手をつけられない」 という状況に陥る
7. そこで "しれっと"アプローチできないか を考えました。
8. "しれっと"アプローチ三箇条 心理的ハードルを最低限に 1. 学習コストを最低限に 2. 気づいたら貢献出来ている 3.
9. フロントエンドのテスト ならいけそう感
10. 02 フロントエンドのテスト と アクセシビリティ
11. なぜ フロントエンドのテスト なのか
12. フロントエンドのテストツールには getByRoleという関数が存在している
13. 役割 意味 <button type=”button”>ボタン</button> role属性について role属性はタグに や を示す
14. 役割 意味 <button type=”button”>ボタン</button> <button type=”button” role=”button”>ボタン</button> role属性について role属性はタグに や を示す
15. 他にもあるよ！暗黙的なrole <a href=”~~~”>リンク</a> <h1>タイトル</h1> <input type=”text” /> link heading textbox
16. role属性を持っているタグを セマンティック要素 と呼ぶ
17. role属性を使って要素を取得するのが getByRole
18. それで、アクセシビリティとの関係性は？
19. getByRole とアクセシビリティとの関係性 スクリーンリーダーなどの支援技術はrole属性から どんな要素なのかをアナウンスしてくれます。 <button id=”lensSearchButton” class=”lensSearchButton” title=”画像で検索”/>
20. まとめると
21. role属性が付与されていれば getByRoleで要素を取得できる
22. role属性が付与されていれば 支援技術で要素を認識できる アクセシブルなUI
23. getByRoleで取得できる = アクセシブルなUIである
24. 03 getByRoleを使った "しれっと"した アクセシビリティ改善
25. getByRoleの使い方
26. マイページ
27. role属性 accessible name マイページ
28. 簡単ですよね！
29. 送信
30. 送信 role属性 accessible name
31. 送信
32. 送信
33. 送信
34. getByRoleを使うことで、 自然とアクセシビリティを考慮した セマンティックなHTMLを使用するようになる
35. 04 まとめ
36. getByRoleを使えば“しれっと”アプローチができる 心理的ハードルを最低限に getByRoleを使うだけ 学習コストを最低限に getByRoleの使い方を覚える role属性は使うやつだけ覚える 気づいたら貢献出来ている セマンティックなHTMLを書くことが促されて自然とアクセシブ ルなUIになっていく
37. 注意点！ アクセシビリティに疎くても貢献できる入門レベル アクセシビリティの項目を網羅することはできません
38. getByRoleをきっかけに アクセシビリティを “しれっと”広めていきましょう！
39. Thank You!