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

by wadeen

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

自己紹介 @wadeen_net わでぃん  ‐ chot Inc. 所属（1月〜）  ‐ Webフロントエンドエンジニア  ‐ フルスタックにやりたい  ‐ 鹿児島出身🌋 → 東京都在住🗼 

Slide 3

Slide 3 text

今日話すことフロントエンドエンジニア向けの内容

Slide 4

Slide 4 text

今日話すこと ✓対応できなかった場合の問題点が分かる ✓自分の理解度を確認することができる ✓コードの改善例を見てイメージができる ✓ウェブアクセシビリティを取り組む為のステップが分かる

Slide 5

Slide 5 text

今日話すこと _会社やチームで取り組むぞ！！_

Slide 6

Slide 6 text

今日話すこと chot社でもこれからやっていこうという段階

Slide 7

Slide 7 text

フロントエンドエンジニアの責務

Slide 8

Slide 8 text

フロントエンドエンジニアの責務「どこまでやるのか？」は別問題  として切り分けて考える必要がある  フロントエンドエンジニアの責務であるウェブアクセシビリティは

Slide 9

Slide 9 text

フロントエンドエンジニアの責務 - 出来ていること/出来ていないことが曖昧  - 無意識にやっていることも多い  - そもそも何をやればいいのか分からない/気付かない  - その先にどういう問題があるのかが分からない 

Slide 10

Slide 10 text

ウェブアクセシビリティ向上のために何をしていますか？

Slide 11

Slide 11 text

ウェブアクセシビリティ向上のために何をしていますか？日常的にやってそうなこと ✓セマンティクスなHTMLタグの使用 ✓画像に代替テキスト（altタグ）を入れる ✓エラーメッセージの表示 ✓レスポンシブ対応（画像切替えやフォントサイズ調整）

Slide 12

Slide 12 text

ウェブアクセシビリティ向上のために何をしていますか？あまり出来ていなそうなこと ✓キーボード操作への配慮 ✓WAI-ARIAの使用 ✓動画や音声コンテンツの対応 ✓スクリーンリーダー/タブ操作での確認作業

Slide 13

Slide 13 text

ウェブアクセシビリティ向上のために何をしていますか？本当にその対応であっていますか？さらに・・・

Slide 14

Slide 14 text

ウェブアクセシビリティ向上のために何をしていますか？ほとんどの原因は「知識不足」知っていれば工数をかけずにできることがたくさんある!! 

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

ウェブアクセシビリティ向上のために何をしていますか？ ✓タブ操作ができずアクセスができない ✓画像の代替テキストが不適切なので内容が分からない ✓複雑なナビゲーションがあり使用が難しい ✓モバイルデバイスでの表示や操作が困難

Slide 18

Slide 18 text

事例紹介

Slide 19

Slide 19 text

事例紹介 Case01: 官公庁案件  Case02: コーポレートサイト 

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

事例紹介ロール (Role): 要素の役割プロパティ (Property): 要素の特性ステート (State): 要素の現在の状態そもそもWAI-ARIA(ウェイアリア)とは・・・？ _HTMLのセマンティクスを最大限活用し不足時のみ使用_ 一言で言うと、Webのアクセシビリティ向上のための技術のこと

Slide 22

Slide 22 text

事例紹介今回の要件は、 - WCAG基準のレベルAAに準拠する - 一部、レベルAAAも対応可能な範囲で対応する _Case01: 官公庁案件_  ❶ WAI-ARIAを適切に使う  A：最低限　AA：推奨　AAA：最高レベル

Slide 23

Slide 23 text

事例紹介 2.1.3 キーボード（例外なし）の達成基準 2.4.8 現在位置の達成基準 3.2.5 要求による状況の変化の達成基準レベルAAAの達成目標

Slide 24

Slide 24 text

事例紹介 _Case01: 官公庁案件_  `isMenuOpen`の状態を通知する ❶ WAI-ARIAを適切に使う 

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

事例紹介 _Case02: コーポレートサイト_  ❶ 代替テキストの使用方法  説明が不十分適切な代替テキストに変更

Slide 31

Slide 31 text

事例紹介 _Case02: コーポレートサイト_  ❶ 代替テキストの使用方法  view moreが何か分からない詳しい遷移先を読み上げる

Slide 32

Slide 32 text

事例紹介 _Case02: コーポレートサイト_  ❷ タブ操作の問題を解消  ⚠タブ操作で開かない

Slide 33

Slide 33 text

事例紹介 _Case02: コーポレートサイト_  - 最初と最後の要素 - Tab key - Shift key ❷ タブ操作の問題を解消 

Slide 34

Slide 34 text

事例紹介 _Case02: コーポレートサイト_  Escapeで閉じる ❷ タブ操作の問題を解消  https://chot-inc.com/

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

小さく取り組んでみよう！

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

- 問題を知る - 知識をつける - 声をあげてやってみるまとめ

Slide 45

Slide 45 text

ご静聴ありがとうございました！ 