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

必見！ 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 で

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

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

株式会社出前館

More Decks by 株式会社出前館

Other Decks in Technology

Featured

Transcript