必見！ Web アクセシビリティの重要性とは？ 知らないと恥ずかしい！？ その理由と対策法まとめ

自己紹介 白石 泰己 (Taiki Shiraishi) 🏢: 株式会社出前館 : フロントエンドグループマネージャーおよび コンシューマー向けWebフロントエンド開発 ❤: UI に関わるのが好きです

今日の目的 Web アクセシビリティって何？ 🤔 Web アクセシビリティちょっとわかる💡

アジェンダ • Web アクセシビリティとは • なぜ Web アクセシビリティが重要なのか • 具体的にいつ使われているのか • Web アクセシビリティって何からすれば？ • 休憩 • 実践 前半 後半

Web アクセシビリティとは web サイトの情報への到達しやすさを表します。 年齢や障害者を問わず、また利用環境に関わらず、 全ての人が Web サイトのコンテンツを利用可能なように設計・開発することです。 Web アクセシビリティを向上することで、みんなが Web サイトが使いやすくなります！ accessibility＝access（到達、入手）＋～ibility（ability）（～できる性質） 出典：総務省｜東海総合通信局｜ウェブアクセシビリティとは？

なぜ Web アクセシビリティが重要なのか 1.Web 利用者の増加 2.端末の多様性 3.法整備

なぜ Web アクセシビリティが重要なのか 1. Web 利用者の増加

なぜ Web アクセシビリティが重要なのか 身体的障害を抱えている方は 日本に 437 万人、人口の約 3.4 ％ 世界では 10 億人、人口の約 15 ％ 1. Web 利用者の増加 多くの人がアクセス可能であるメリットがある Web で これだけ多くの人たちへ背を向けて Web 開発はできな い！

なぜ Web アクセシビリティが重要なのか 2. 端末の多様性 パソコン スマートフォン VR・AR・MR ゲーム機 カーナビ

なぜ Web アクセシビリティが重要なのか 障害者差別解消法 3. 法整備 障害のある人もない人も、互いにその人らしさを認め合いながら共に生きる社会（共生社会）を実現 出典：リーフレット「令和６年４月１日から合理的配慮の提供が義務化されます！」 - 内閣府 この法律が令和 6 年 (2024 年) 4 月 1 日から努力義務から法的義務へ変わります！ これを機に Web アクセシビリティへの取り組みをはじめませんか？

具体的にいつ使われているの？ 画面が見えづらい場合（音声読み上げ、点字ディスプレイ、画面の拡大） • 太陽光の強い屋外（現場でのタブレット操作） • 画面が見えない時の読み上げ（amazon audible、kindle の音声読み上げ）

具体的にいつ使われているの？ 耳が聞こえない場合 • 音が出せない環境での動画閲覧（YouTube 字幕）

具体的にいつ使われているの？ 運動機能の問題でマウスが使えない場合（キーボード操作、補助機器、音声入力・操作） • 利き腕を怪我をしてしまった • 片手が塞がった状況での操作 • キーボードショートカット

具体的にいつ使われているの？ Web だけじゃなくてゲーム業界もアクセシビリティに取り組んでます！

アクセシビリティというのは身近なものなのです 皆様も自分事として自分や家族が Web を⾧く快適に 使っていけるんだろうかということを考えてみてほしいです。

Web アクセシビリティって何からすれば？ 1.ガイドラインの知識 2.ツールの知識 3.実装の知識

ガイドラインの知識 W3C（World Wide Web Consortium）から ウェブコンテンツ・アクセシビリティ・ガイドライン（WCAG） という指針が出されています。

ガイドラインの知識 知覚可能 ユーザーは、1 つ以上の感覚を使って何らかの方法でそれを知覚できなければなりません。 操作可能 ユーザーは、UI 要素を制御できなければなりません（例えば、ボタンは、マウス、キーボー ド、音声コマンドなど、何らかの方法でクリック可能でなければならない）。 理解可能 コンテンツはそのユーザーにとって理解可能でなければなりません。 堅牢 コンテンツは、現在および将来にわたって、さまざまなブラウザで機能する、広く採用され ているウェブ標準を使用して開発する必要があります。

ツールの知識 Google Chrome • devtools のアクセシビリティパネル • Lighthouse フリーのスクリーンリーダー • NVDA (Windows) • Voice Over（Mac, iOS） • talkback（Android）

ツールの知識 フルページアクセシビリティツリーが確認できる機能 Google Chrome name: このものをどのように参照することができるか description: 名前に何かを追加したいとすれば、この要素をどのように説明するか role: どのような種類のものなのか state: 状態があるかどうか

ツールの知識 Lighthouse。Web ページのパフォーマンス、アクセシビリティ、SEO などを計測できるツール Google Chrome

ツールの知識 Voice Over - Mac (command[⌘] + F5) スクリーンリーダー

休憩

実践 https://stackblitz.com/edit/stackblitz-starters-kfffqm?file=pages%2Findex.js 続きは stackblirz で