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
94
必見!Web アクセシビリティの重要性とは?知らないと恥ずかしい!?その理由と対策法まとめ
株式会社出前館
June 28, 2023
Tweet
Share
More Decks by 株式会社出前館
See All by 株式会社出前館
出前館アプリにおけるFlutterアプリ設計とそれを支えるCICD環境の進化
demaecan
0
550
出前館のマルチプロダクト戦略を支えるアーキテクチャ 〜技術的負債を解消しながら事業を多角化する〜
demaecan
1
120
新卒1年目の自分に伝えたかったエンジニアの成長に役に立つ話
demaecan
0
1.7k
新卒エンジニアが0からNon-BlockingなgPRCサーバーを作った話
demaecan
1
450
出前館におけるFlutter活用事例
demaecan
0
460
出前館アプリにおける Flutterアプリ設計
demaecan
2
860
プロダクト本部紹介資料
demaecan
0
9.4k
処理性能向上とコスト最適化を実現! ハイブリッド/マルチクラウド構成へ移行しサービス需要の急拡大に対応する強力なシステム基盤を実現
demaecan
0
110
出前館におけるFlutterの現在とこれから
demaecan
0
1.2k
Other Decks in Technology
See All in Technology
手を動かしてレベルアップしよう!
maruto
0
250
生成AI×財務経理:PoCで挑むSlack AI Bot開発と現場巻き込みのリアル
pohdccoe
1
800
どちらかだけじゃもったいないかも? ECSとEKSを適材適所で併用するメリット、運用課題とそれらの対応について
tk3fftk
2
260
Exadata Database Service on Cloud@Customer セキュリティ、ネットワーク、および管理について
oracle4engineer
PRO
2
1.6k
Oracle Database Technology Night #87-1 : Exadata Database Service on Exascale Infrastructure(ExaDB-XS)サービス詳細
oracle4engineer
PRO
1
210
データエンジニアリング領域におけるDuckDBのユースケース
chanyou0311
9
2.5k
OPENLOGI Company Profile for engineer
hr01
1
20k
Qiita Organizationを導入したら、アウトプッターが爆増して会社がちょっと有名になった件
minorun365
PRO
1
300
EMConf JP 2025 懇親会LT / EMConf JP 2025 social gathering
sugamasao
2
210
Охота на косуль у древних
ashapiro
0
120
日経のデータベース事業とElasticsearch
hinatades
PRO
0
260
AWSアカウントのセキュリティ自動化、どこまで進める? 最適な設計と実践ポイント
yuobayashi
7
1.2k
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
Large-scale JavaScript Application Architecture
addyosmani
511
110k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
134
33k
Typedesign – Prime Four
hannesfritz
41
2.5k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.2k
Mobile First: as difficult as doing things right
swwweet
223
9.5k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Rails Girls Zürich Keynote
gr2m
94
13k
Facilitating Awesome Meetings
lara
53
6.3k
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 で