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
52
必見!Web アクセシビリティの重要性とは?知らないと恥ずかしい!?その理由と対策法まとめ
株式会社出前館
June 28, 2023
Tweet
Share
More Decks by 株式会社出前館
See All by 株式会社出前館
新卒1年目の自分に伝えたかったエンジニアの成長に役に立つ話
demaecan
0
76
新卒エンジニアが0からNon-BlockingなgPRCサーバーを作った話
demaecan
0
100
出前館におけるFlutter活用事例
demaecan
0
49
出前館アプリにおける Flutterアプリ設計
demaecan
1
290
プロダクト本部紹介資料
demaecan
0
3.4k
処理性能向上とコスト最適化を実現! ハイブリッド/マルチクラウド構成へ移行しサービス需要の急拡大に対応する強力なシステム基盤を実現
demaecan
0
42
出前館におけるFlutterの現在とこれから
demaecan
0
830
出前館Webフロントエンドリプレイスプロジェクトの取り組みと反省について
demaecan
1
1.1k
ITエンジニアの市場価値を高め続ける3つの方法
demaecan
0
690
Other Decks in Technology
See All in Technology
LINE WORKSへ簡単通知!Incoming Webhookアプリの紹介
mmclsntr
0
110
データベース研修 分析向けSQL入門【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
110
20240717_イケコパ代表Copilot_in_Teams会社でこう使ってます
ponponmikankan
2
430
簡単に始めるSnowflakeの機械学習
nayuts
1
190
VPoEの視点から見た、ヘンリーがサーバーサイドKotlinを使う理由 / Why Server-side Kotlin 2024
cho0o0
1
420
ここがすごいよ! AWS Systems Manager!
saichan11
0
1.8k
ACRiルーム最新情報とAMD GPUサーバーのご紹介
anjn
0
150
エンジニアリングマネージャーはどう学んでいくのか #devsumi / How Do Engineering Managers Continue to Learn and Grow?
expajp
4
1.3k
初中級者用如何使用backlog -VALE TUDOEDITION-
in0u
0
140
RAGのサービスをリリースして1年3ヶ月が経ちました
segavvy
4
910
コンテナ・K8s研修 - 前半 コンテナ基礎・ハンズオン【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
170
地理情報とAPIのトレンド
nagix
0
160
Featured
See All Featured
WebSockets: Embracing the real-time Web
robhawkes
59
7.2k
Art, The Web, and Tiny UX
lynnandtonic
291
20k
[RailsConf 2023] Rails as a piece of cake
palkan
35
4.4k
Designing the Hi-DPI Web
ddemaree
276
34k
Web development in the modern age
philhawksworth
203
10k
Design by the Numbers
sachag
277
18k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
Building Adaptive Systems
keathley
34
2k
How to Ace a Technical Interview
jacobian
274
23k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
For a Future-Friendly Web
brad_frost
173
9.2k
A Philosophy of Restraint
colly
200
16k
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 で