ウェブアクセシビリティ対応への課題と実践的な取り組み方 #ジャムスタックチョットデキル
ウェブアクセシビリティ対応への 課題と実践的な取り組み方
View Slide
自己紹介@wadeen_netわでぃん ‐ chot Inc. 所属（1月〜） ‐ Webフロントエンドエンジニア ‐ フルスタックにやりたい ‐ 鹿児島出身🌋 → 東京都在住🗼
今日話すことフロントエンドエンジニア向けの内容
今日話すこと✓対応できなかった場合の問題点が分かる✓自分の理解度を確認することができる✓コードの改善例を見てイメージができる✓ウェブアクセシビリティを取り組む為のステップが分かる
今日話すこと_会社やチームで取り組むぞ！！_
今日話すことchot社でもこれからやっていこうという段階
フロントエンドエンジニアの責務
フロントエンドエンジニアの責務「どこまでやるのか？」は別問題 として切り分けて考える必要がある フロントエンドエンジニアの責務であるウェブアクセシビリティは
フロントエンドエンジニアの責務- 出来ていること/出来ていないことが曖昧 - 無意識にやっていることも多い - そもそも何をやればいいのか分からない/気付かない - その先にどういう問題があるのかが分からない
ウェブアクセシビリティ向上のために何をしていますか？
ウェブアクセシビリティ向上のために何をしていますか？日常的にやってそうなこと✓セマンティクスなHTMLタグの使用✓画像に代替テキスト（altタグ）を入れる✓エラーメッセージの表示✓レスポンシブ対応（画像切替えやフォントサイズ調整）
ウェブアクセシビリティ向上のために何をしていますか？あまり出来ていなそうなこと✓キーボード操作への配慮✓WAI-ARIAの使用✓動画や音声コンテンツの対応✓スクリーンリーダー/タブ操作での確認作業
ウェブアクセシビリティ向上のために何をしていますか？本当にその対応であっていますか？さらに・・・
ウェブアクセシビリティ向上のために何をしていますか？ほとんどの原因は「知識不足」知っていれば工数をかけずにできることがたくさんある!!
ウェブアクセシビリティ向上のために何をしていますか？1⃣ 情報感度を高くしてキャッチアップ 2⃣ 実際に起こる問題を知る
ウェブアクセシビリティ向上のために何をしていますか？✓タブ操作ができずアクセスができない✓画像の代替テキストが不適切なので内容が分からない✓複雑なナビゲーションがあり使用が難しい✓モバイル デバイスでの表示や操作が困難
事例紹介
事例紹介Case01: 官公庁案件 Case02: コーポレートサイト
事例紹介1⃣ WAI-ARIAを適切に使う2⃣ スクリーンリーダー用のテキストを工夫する _Case01: 官公庁案件_
事例紹介ロール (Role): 要素の役割プロパティ (Property): 要素の特性ステート (State): 要素の現在の状態そもそもWAI-ARIA(ウェイアリア)とは・・・？_HTMLのセマンティクスを最大限活用し不足時のみ使用_一言で言うと、Webのアクセシビリティ向上のための技術のこと
事例紹介今回の要件は、- WCAG基準のレベルAAに準拠する- 一部、レベルAAAも対応可能な範囲で対応する_Case01: 官公庁案件_ ❶ WAI-ARIAを適切に使う A：最低限 AA：推奨 AAA：最高レベル
事例紹介2.1.3 キーボード（例外なし）の達成基準2.4.8 現在位置の達成基準3.2.5 要求による状況の変化の達成基準レベルAAAの達成目標
事例紹介_Case01: 官公庁案件_ `isMenuOpen`の状態を通知する❶ WAI-ARIAを適切に使う
事例紹介_Case01: 官公庁案件_ 現在のページをマシンに伝える❶ WAI-ARIAを適切に使う
事例紹介スクリーンリーダー用のテキストは、 WAI-ARIAだけじゃない_Case01: 官公庁案件_ ❷スクリーンリーダー用のテキスト ▶ 実際にスクリーンリーダーで聞いて確認する
事例紹介_Case01: 官公庁案件_ すぐに本文に移動できるようにリンク追加❷スクリーンリーダー用のテキスト
事例紹介_Case01: 官公庁案件_ アイコンの意味を読み上げる(case by case)❷スクリーンリーダー用のテキスト
事例紹介1⃣ 画像の代替テキストを適切に使う2⃣ タブ操作できない場合に起こる問題を解消する _Case02: コーポレートサイト_
事例紹介_Case02: コーポレートサイト_ ❶ 代替テキストの使用方法 説明が不十分適切な代替テキストに変更
事例紹介_Case02: コーポレートサイト_ ❶ 代替テキストの使用方法 view moreが何か分からない詳しい遷移先を読み上げる
事例紹介_Case02: コーポレートサイト_ ❷ タブ操作の問題を解消 ⚠タブ操作で開かない
事例紹介_Case02: コーポレートサイト_ - 最初と最後の要素- Tab key- Shift key❷ タブ操作の問題を解消
事例紹介_Case02: コーポレートサイト_ Escapeで閉じる❷ タブ操作の問題を解消 https://chot-inc.com/
事例紹介_Case02: コーポレートサイト_ ❷ タブ操作の問題を解消 スクリーンリーダー/タブ操作を実際に行う▶ チェックツールでは判別できないこともたくさんある
法律関係障害者差別解消法 が改正- 令和６年４月１日から施行 - 今までは国や地方自治体は「義務」/ 民間は「努力義務」 - 民間事業者も合理的配慮の提供が義務化 ＊Webアクセシビリティ対応が義務化されたわけではない
小さく取り組んでみよう！
小さく取り組んでみよう！実際にチーム・会社でどう取り組んでいくかを考える
小さく取り組んでみよう！- アクセシビリティとは？ユーザビリティとは？- WAI-ARIAの説明と使い方- スクリーンリーダーの使い方 / 過去案件を確認してもらう- NotionにTipsや、aria属性のリスト化・テンプレート集を作成- (e.g. タブパネルやアコーディオン、ハンバーガーメニュー) 社内で勉強会を開いた
小さく取り組んでみよう！- axeやMarkuplintの活用- VSCodeやChromeの拡張機能- ヘッドレスUIの導入- 企業が公開しているチェックシート・ガイドラインの活用- 社内のチェックシートの作成・社内基準を明確にする🛠 仕組みを活用する
小さく取り組んでみよう！- チーム開発だと1人詳しくても成り立たない- 「ウェブアクセシビリティ」の解釈が違うことが多い🤝 人を巻き込もう
小さく取り組んでみよう！- チーム開発だと1人詳しくても成り立たない- 「ウェブアクセシビリティ」の解釈が違うことが多い🤝 人を巻き込もう 前提や温度感を近づけたい
小さく取り組んでみよう！- チーム開発だと1人詳しくても成り立たない- 「ウェブアクセシビリティ」の解釈が違うことが多い- 自分も分からないで全然OK！声をあげて取り組んでみる！- 基礎の基礎からでいいのでみんなで話す場を作る- 徐々に会社やチームで取り組む（Slackのチャンネルなど）- 継続が難しいので広げていく人を増やす🤝 人を巻き込もう
- 問題を知る- 知識をつける- 声をあげてやってみるまとめ
ご静聴ありがとうございました！
gonkun
egmc
konifar
senkin13
linedevth
hamadakoji
finengine
yayoi_dd
autifyhq
ytaisei
no24oka
whywaita
samanthasiow
reverentgeek
ufuk
dougneiner
marktimemedia
kastner
brianwarren
sferik
kevinliebholz
malarkey
paigeccino
nonsquared