Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
必見!Web アクセシビリティの重要性とは?知らないと恥ずかしい!?その理由と対策法まとめ
Search
株式会社出前館
June 28, 2023
Technology
0
100
必見!Web アクセシビリティの重要性とは?知らないと恥ずかしい!?その理由と対策法まとめ
株式会社出前館
June 28, 2023
Tweet
Share
More Decks by 株式会社出前館
See All by 株式会社出前館
出前館を支えるJavaとKotlin
demaecan
0
190
滑らかなユーザー体験も目指す注文管理のマイクロサービス化〜注文情報CSVダウンロード機能の事例〜
demaecan
0
170
Yahoo!クイックマート管理画面でNext.js + static exportsを選んだ理由
demaecan
0
30
出前館アプリにおけるFlutterアプリ設計とそれを支えるCICD環境の進化
demaecan
0
700
出前館のマルチプロダクト戦略を支えるアーキテクチャ 〜技術的負債を解消しながら事業を多角化する〜
demaecan
1
190
新卒1年目の自分に伝えたかったエンジニアの成長に役に立つ話
demaecan
0
1.8k
新卒エンジニアが0からNon-BlockingなgPRCサーバーを作った話
demaecan
1
510
出前館におけるFlutter活用事例
demaecan
0
530
出前館アプリにおける Flutterアプリ設計
demaecan
2
930
Other Decks in Technology
See All in Technology
AIでめっちゃ便利になったけど、結局みんなで学ぶよねっていう話
kakehashi
PRO
0
180
Notion x ポストモーテムで広げる組織の学び / Notion x Postmortem
isaoshimizu
1
120
Would you THINK such a demonstration interesting ?
shumpei3
1
220
AWS全冠芸人が見た世界 ~資格取得より大切なこと~
masakiokuda
5
6.2k
勝手に!深堀り!Cloud Run worker pools / Deep dive Cloud Run worker pools
iselegant
2
420
QA/SDETの現在と、これからの挑戦
imtnd
0
140
彩の国で始めよう。おっさんエンジニアから共有したい、当たり前のことを当たり前にする技術
otsuki
0
150
ElixirがHW化され、最新CPU/GPU/NWを過去のものとする数万倍、高速+超省電力化されたWeb/動画配信/AIが動く日
piacerex
0
150
Amazon CloudWatch を使って NW 監視を行うには
o11yfes2023
0
170
DETR手法の変遷と最新動向(CVPR2025)
tenten0727
2
1.4k
Automatically generating types by running tests
sinsoku
2
3.3k
今日からはじめるプラットフォームエンジニアリング
jacopen
3
210
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
Java REST API Framework Comparison - PWX 2021
mraible
30
8.5k
Making the Leap to Tech Lead
cromwellryan
133
9.2k
A designer walks into a library…
pauljervisheath
205
24k
Scaling GitHub
holman
459
140k
Producing Creativity
orderedlist
PRO
344
40k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
670
Music & Morning Musume
bryan
47
6.5k
4 Signs Your Business is Dying
shpigford
183
22k
GitHub's CSS Performance
jonrohan
1030
460k
Designing for humans not robots
tammielis
252
25k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Transcript
必見! 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年4月1日から合理的配慮の提供が義務化されます!」 - 内閣府
この法律が令和 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 で