ウェブアクセシビリティ対応への課題と実践的な取り組み方

ウェブアクセシビリティ対応への課題と実践的な取り組み方
#ジャムスタックチョットデキル

Transcript

1. ウェブアクセシビリティ対応への
 課題と実践的な取り組み方
2. 自己紹介 @wadeen_net わでぃん
 ‐ chot Inc. 所属（1月〜）
 ‐ Webフロントエンドエンジニア
 ‐ フルスタックにやりたい
 ‐ 鹿児島出身🌋 → 東京都在住🗼

3. 今日話すこと フロントエンドエンジニア向けの内容
4. 今日話すこと ✓対応できなかった場合の問題点が分かる ✓自分の理解度を確認することができる ✓コードの改善例を見てイメージができる ✓ウェブアクセシビリティを取り組む為のステップが分かる
5. 今日話すこと _会社やチームで取り組むぞ！！_
6. 今日話すこと chot社でもこれからやっていこうという段階
7. フロントエンドエンジニアの責務
8. フロントエンドエンジニアの責務 「どこまでやるのか？」は別問題
 として切り分けて考える必要がある
 フロントエンドエンジニアの責務である ウェブアクセシビリティは
9. フロントエンドエンジニアの責務 - 出来ていること/出来ていないことが曖昧
 - 無意識にやっていることも多い
 - そもそも何をやればいいのか分からない/気付かない
 - その先にどういう問題があるのかが分からない

10. ウェブアクセシビリティ向上のために 何をしていますか？
11. ウェブアクセシビリティ向上のために何をしていますか？ 日常的にやってそうなこと ✓セマンティクスなHTMLタグの使用 ✓画像に代替テキスト（altタグ）を入れる ✓エラーメッセージの表示 ✓レスポンシブ対応（画像切替えやフォントサイズ調整）
12. ウェブアクセシビリティ向上のために何をしていますか？ あまり出来ていなそうなこと ✓キーボード操作への配慮 ✓WAI-ARIAの使用 ✓動画や音声コンテンツの対応 ✓スクリーンリーダー/タブ操作での確認作業
13. ウェブアクセシビリティ向上のために何をしていますか？ 本当にその対応であっていますか？ さらに・・・
14. ウェブアクセシビリティ向上のために何をしていますか？ ほとんどの原因は「知識不足」 知っていれば工数をかけずにできることがたくさんある!!

15. ウェブアクセシビリティ向上のために何をしていますか？ 1⃣ 情報感度を高くしてキャッチアップ
 2⃣ 実際に起こる問題を知る

16. ウェブアクセシビリティ向上のために何をしていますか？ 1⃣ 情報感度を高くしてキャッチアップ
 2⃣ 実際に起こる問題を知る

17. ウェブアクセシビリティ向上のために何をしていますか？ ✓タブ操作ができずアクセスができない ✓画像の代替テキストが不適切なので内容が分からない ✓複雑なナビゲーションがあり使用が難しい ✓モバイル デバイスでの表示や操作が困難
18. 事例紹介
19. 事例紹介 Case01: 官公庁案件
 Case02: コーポレートサイト

20. 事例紹介 1⃣ WAI-ARIAを適切に使う 2⃣ スクリーンリーダー用のテキストを工夫する
 _Case01: 官公庁案件_

21. 事例紹介 ロール (Role): 要素の役割 プロパティ (Property): 要素の特性 ステート (State): 要素の現在の状態 そもそもWAI-ARIA(ウェイアリア)とは・・・？ _HTMLのセマンティクスを最大限活用し不足時のみ使用_ 一言で言うと、Webのアクセシビリティ向上のための技術のこと
22. 事例紹介 今回の要件は、 - WCAG基準のレベルAAに準拠する - 一部、レベルAAAも対応可能な範囲で対応する _Case01: 官公庁案件_
 ❶ WAI-ARIAを適切に使う
 A：最低限　AA：推奨　AAA：最高レベル
23. 事例紹介 2.1.3 キーボード（例外なし）の達成基準 2.4.8 現在位置の達成基準 3.2.5 要求による状況の変化の達成基準 レベルAAAの達成目標
24. 事例紹介 _Case01: 官公庁案件_
 `isMenuOpen`の状態を通知する ❶ WAI-ARIAを適切に使う

25. 事例紹介 _Case01: 官公庁案件_
 現在のページをマシンに伝える ❶ WAI-ARIAを適切に使う

26. 事例紹介 スクリーンリーダー用のテキストは、
 WAI-ARIAだけじゃない _Case01: 官公庁案件_
 ❷スクリーンリーダー用のテキスト
 ▶ 実際にスクリーンリーダーで聞いて確認する

27. 事例紹介 _Case01: 官公庁案件_
 すぐに本文に移動できるようにリンク追加 ❷スクリーンリーダー用のテキスト

28. 事例紹介 _Case01: 官公庁案件_
 アイコンの意味を読み上げる(case by case) ❷スクリーンリーダー用のテキスト

29. 事例紹介 1⃣ 画像の代替テキストを適切に使う 2⃣ タブ操作できない場合に起こる問題を解消する
 _Case02: コーポレートサイト_

30. 事例紹介 _Case02: コーポレートサイト_
 ❶ 代替テキストの使用方法
 説明が不十分 適切な代替テキストに変更
31. 事例紹介 _Case02: コーポレートサイト_
 ❶ 代替テキストの使用方法
 view moreが何か分からない 詳しい遷移先を読み上げる
32. 事例紹介 _Case02: コーポレートサイト_
 ❷ タブ操作の問題を解消
 ⚠タブ操作で開かない
33. 事例紹介 _Case02: コーポレートサイト_
 - 最初と最後の要素 - Tab key - Shift key ❷ タブ操作の問題を解消

34. 事例紹介 _Case02: コーポレートサイト_
 Escapeで閉じる ❷ タブ操作の問題を解消
 https://chot-inc.com/
35. 事例紹介 _Case02: コーポレートサイト_
 ❷ タブ操作の問題を解消
 スクリーンリーダー/タブ操作を実際に行う ▶ チェックツールでは判別できないこともたくさんある

36. 法律関係 障害者差別解消法 が改正 - 令和６年４月１日から施行
 - 今までは国や地方自治体は「義務」/ 民間は「努力義務」
 - 民間事業者も合理的配慮の提供が義務化
 ＊Webアクセシビリティ対応が義務化されたわけではない

37. 小さく取り組んでみよう！
38. 小さく取り組んでみよう！ 実際にチーム・会社でどう取り組んでいくかを考える

39. 小さく取り組んでみよう！ - アクセシビリティとは？ユーザビリティとは？ - WAI-ARIAの説明と使い方 - スクリーンリーダーの使い方 / 過去案件を確認してもらう - NotionにTipsや、aria属性のリスト化・テンプレート集を作成 - (e.g. タブパネルやアコーディオン、ハンバーガーメニュー) 󰳕 社内で勉強会を開いた

40. 小さく取り組んでみよう！ - axeやMarkuplintの活用 - VSCodeやChromeの拡張機能 - ヘッドレスUIの導入 - 企業が公開しているチェックシート・ガイドラインの活用 - 社内のチェックシートの作成・社内基準を明確にする 🛠 仕組みを活用する

41. 小さく取り組んでみよう！ - チーム開発だと1人詳しくても成り立たない - 「ウェブアクセシビリティ」の解釈が違うことが多い 🤝 人を巻き込もう

42. 小さく取り組んでみよう！ - チーム開発だと1人詳しくても成り立たない - 「ウェブアクセシビリティ」の解釈が違うことが多い 🤝 人を巻き込もう
 前提や温度感を近づけたい

43. 小さく取り組んでみよう！ - チーム開発だと1人詳しくても成り立たない - 「ウェブアクセシビリティ」の解釈が違うことが多い - 自分も分からないで全然OK！声をあげて取り組んでみる！ - 基礎の基礎からでいいのでみんなで話す場を作る - 徐々に会社やチームで取り組む（Slackのチャンネルなど） - 継続が難しいので広げていく人を増やす 🤝 人を巻き込もう

44. - 問題を知る - 知識をつける - 声をあげてやってみる まとめ
45. ご静聴ありがとうございました！