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
42
必見!Web アクセシビリティの重要性とは?知らないと恥ずかしい!?その理由と対策法まとめ
株式会社出前館
June 28, 2023
Tweet
Share
More Decks by 株式会社出前館
See All by 株式会社出前館
プロダクト本部紹介資料
demaecan
0
1k
処理性能向上とコスト最適化を実現! ハイブリッド/マルチクラウド構成へ移行しサービス需要の急拡大に対応する強力なシステム基盤を実現
demaecan
0
26
出前館におけるFlutterの現在とこれから
demaecan
0
600
出前館Webフロントエンドリプレイスプロジェクトの取り組みと反省について
demaecan
1
920
ITエンジニアの市場価値を高め続ける3つの方法
demaecan
0
600
出前館×ZHDのクイックコマースにおける協業事例〜リアルタイム在庫連携の裏側〜
demaecan
0
180
会社説明資料_最新版
demaecan
0
5.7k
20年続いているサービスの複雑な注文画面を GraphQL を使って改善した話
demaecan
0
270
ライフインフラとなるために進めている出前館の Web アクセシビリティ改善への取り組み
demaecan
0
210
Other Decks in Technology
See All in Technology
データベース02: データベースの概念
trycycle
0
180
アクセシビリティを考慮したUI/CSSフレームワーク・ライブラリ選定
yajihum
2
1.1k
プロンプトエンジニアリングでがんばらない-Agentic Workflow へ-近藤憲児
kenjikondobai
6
1.1k
Google Cloud Next '24 Recap(Cloud Run/k8s)
mokocm
0
310
いつか使うかも貯金してたらめちゃめちゃ機能が増えてた話
riyaamemiya
0
600
開発パフォーマンスを最大化するための開発体制
ham0215
7
1k
EM完全に理解した と思ったけど、 やっぱり何も分からなかった話 / EM Night Fukuoka #1
hirutas
0
270
今日からできる!簡単 .NET 高速化 Tips -2024 edition-
xin9le
7
3.5k
Building Dashboards as a Hobby
egmc
0
350
Azure犬駆動開発の記録/GlobalAzureFukuoka2024_20240420
nina01
1
230
[新卒向け研修資料] テスト文字列に「うんこ」と入れるな(2024年版)
infiniteloop_inc
4
17k
コードファーストの考え方。 Amplify Gen2から学ぶAWS次世代のWeb開発体験
yoshiitaka
1
270
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
11
1k
Documentation Writing (for coders)
carmenintech
61
4k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
20
1.7k
Building Effective Engineering Teams - LeadDev
addyosmani
31
1.9k
Raft: Consensus for Rubyists
vanstee
133
6.3k
Code Review Best Practice
trishagee
56
15k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
79
43k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
Fashionably flexible responsive web design (full day workshop)
malarkey
398
65k
The Pragmatic Product Professional
lauravandoore
26
5.8k
Building an army of robots
kneath
300
41k
Producing Creativity
orderedlist
PRO
338
39k
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 で