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
58
必見!Web アクセシビリティの重要性とは?知らないと恥ずかしい!?その理由と対策法まとめ
株式会社出前館
June 28, 2023
Tweet
Share
More Decks by 株式会社出前館
See All by 株式会社出前館
新卒1年目の自分に伝えたかったエンジニアの成長に役に立つ話
demaecan
0
1.1k
新卒エンジニアが0からNon-BlockingなgPRCサーバーを作った話
demaecan
0
180
出前館におけるFlutter活用事例
demaecan
0
87
出前館アプリにおける Flutterアプリ設計
demaecan
1
370
プロダクト本部紹介資料
demaecan
0
4.5k
処理性能向上とコスト最適化を実現! ハイブリッド/マルチクラウド構成へ移行しサービス需要の急拡大に対応する強力なシステム基盤を実現
demaecan
0
48
出前館におけるFlutterの現在とこれから
demaecan
0
900
出前館Webフロントエンドリプレイスプロジェクトの取り組みと反省について
demaecan
1
1.2k
ITエンジニアの市場価値を高め続ける3つの方法
demaecan
0
720
Other Decks in Technology
See All in Technology
中規模・ミドルTier開発組織におけるDevRelの戦略と実行と成果 - DevRel Guild Conference Mini -
leveragestech
2
270
歴史と背景から改めて振り返るVPC
shotashiratori
2
220
標準最高!標準はださくないぞ! at fukuoka.ts #1
yoiwamoto
0
150
#Zenoh 完全に理解した 〜組込み純情篇〜
takasehideki
1
450
Chunk computing
matyo91
0
270
開発者体験を意識した開発チームの生産性向上の取り組み
ham0215
3
660
EitherT_with_Future
aoiroaoino
1
630
標準ライブラリの奥深アップデートを掘り下げよう!
logica0419
2
410
「名前解決」から振り返るAmazon VPC
yuki_ink
0
320
Autonomous Database Cloud 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
15
39k
Javaにおける関数型プログラミンへの取り組み
skrb
6
220
LLM を現場で評価する
asei
4
680
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
179
21k
How to name files
jennybc
75
97k
Bash Introduction
62gerente
608
210k
Agile that works and the tools we love
rasmusluckow
327
20k
Producing Creativity
orderedlist
PRO
340
39k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
354
29k
How to Think Like a Performance Engineer
csswizardry
15
920
The Cult of Friendly URLs
andyhume
76
5.9k
How GitHub Uses GitHub to Build GitHub
holman
472
290k
Visualization
eitanlees
142
15k
How STYLIGHT went responsive
nonsquared
93
5.1k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
122
18k
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 で