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
アクセシビリティーとは? / What the accessibility ?
Search
Shota Kubota
October 26, 2021
Technology
1
310
アクセシビリティーとは? / What the accessibility ?
社内の LT 会で話をしたときに使った資料です。
Shota Kubota
October 26, 2021
Tweet
Share
More Decks by Shota Kubota
See All by Shota Kubota
私の困りごとと解決案 / My issues and proposed solutions
kubosho
1
240
個人からチームに広げるアクセシビリティ向上の輪 / Accessibility improvement expanding from individual to team
kubosho
1
1.9k
ABEMA のアクセシビリティータスクフォースは何をしてきて何をやるか / What ABEMA accessibility task force has done and will do
kubosho
1
2.6k
CSS のルールセットを高速に出力する VS Code 拡張を作った / Made a VS Code extension to output CSS rulesets
kubosho
1
5k
AbemaTVにおけるCSS is too fragile問題に対する解 / Solution of "CSS is too fragile" by AbemaTV
kubosho
12
5.3k
CSS設計を破綻させない
kubosho
10
2.7k
Prottフロントエンドのいまとこれから
kubosho
1
2.7k
ブラウザ上で弾ける「あの楽器」を作ってみた
kubosho
0
940
Other Decks in Technology
See All in Technology
言葉は感情の近似値である。その感情と言葉の誤差を最小化しよう ~コミュニケーションにおけるアナログ/デジタル変換の課題に立ち向かう~
nktamago
0
190
どこよりも遅めなWinActor Ver.7.5.0 新機能紹介
tamai_63
0
200
フロントエンド・オブザーバビリティを支える要素技術を学ぼう
sadnessojisan
2
180
Autonomous Database Serverless 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
15
40k
事前準備が肝!AI活用のための業務改革
layerx
PRO
1
370
watsonx.ai Dojo 環境準備について
oniak3ibm
PRO
0
220
Mocking in Rust Applications
taiki45
1
410
Envoy External AuthZとgRPC Extensionを利用した「頑張らない」Microservices認証認可基盤
andoshin11
0
240
「自動テストのプラクティスを効果的に学ぶためのカードゲーム」 ( #sqip2024 )
teyamagu
PRO
2
180
Developer Experienceを向上させる基盤づくりの取り組み事例集
coconala_engineer
0
140
Agile in Automotive Industry, puzzles and lights.
hiranabe
3
1.3k
テスト”ケース”駆動開発 で手戻りをなくそう
ryohma0510
0
280
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Fashionably flexible responsive web design (full day workshop)
malarkey
401
65k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
VelocityConf: Rendering Performance Case Studies
addyosmani
322
23k
Web development in the modern age
philhawksworth
204
10k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
43
2k
The Mythical Team-Month
searls
218
43k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.1k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Documentation Writing (for coders)
carmenintech
65
4.3k
Become a Pro
speakerdeck
PRO
22
4.9k
GitHub's CSS Performance
jonrohan
1029
450k
Transcript
アクセシビリティとは? @kubosho ABEMA アクセシビリティタスクフォース
話すこと アクセシビリティタスクフォースでは ABEMA に アクセシビリティ向上を波及させようとしています。 ここでは「そもそもアクセシビリティとはなんぞや?」 という疑問に答えます。
アクセシビリティ?
アクセシビリティ? • accessibility = access + ability ◦ 「アクセス +
〜できる」 ◦ accessibility → a11y
アクセシビリティ? • 誰もがありとあらゆる状況・環境で、 ほぼ同じコストで同じ量の情報を得られる。 そして、ほぼ同じ目標を達成できる。
誰もが
「誰もが」はすべての人が対象 高齢者や障害者だけではなく、すべての人が対象。 すべての人には自分も含む。
ありとあらゆる状況・環境
ありとあらゆる状況・環境 誰もが、状況や環境によって不自由になる。 • スマホの画面が割れて操作しづらい • Bluetooth イヤホンが電池切れ • 腱鞘炎でマウスが持ちづらい •
メガネが壊れた
ほぼ同じコストで同じ量の情報を得られる
ほぼ同じコストで同じ量の情報を得られる あらゆる条件でほぼ同じように使えることを目指す。 • 目が見えづらい人向けに文字サ イズを大きくしすぎたら 晴眼者にとっては一覧性が下が る
ほぼ同じコストで同じ量の情報を得られる あらゆる条件でほぼ同じように使えることを目指す。 • 目が見えづらい人向けに文字サイズを大きくしすぎたら 晴眼者にとっては一覧性が下がる • 画像の代替テキストにページ内にない文章を書いたら 晴眼者が知らない情報が出てくる
代替テキスト内にない文章を書いた例 この画像の代替テキストが 「ハンバーグ・チーズ・ ベーコン・オニオンが、 パンに挟まった ハンバーガー」 だとした場合 引用元: https://flic.kr/p/oT3Th5
代替テキスト内にない文章を書いた例 ページ内に材料の情報が無く、 画像だけ表示されていた場合、 先ほどの代替テキストは スクリーンリーダーユーザー しか認識できない。 → 晴眼者はハンバーガーの 材料を画像から読み取る しかない。
引用元: https://flic.kr/p/oT3Th5
同じ量の情報を得られる例 ハンバーガー 材料 • パン • ハンバーグ • チーズ •
ベーコン • オニオン • ケチャップ 引用元: https://flic.kr/p/oT3Th5
ほぼ同じ目標を達成できる
ほぼ同じ目標を達成できる 同じものを使って、目標を達成できるようにする。 • 専用のものを作るとメンテナンスコストが増える • 誰もが使いやすいものを追求することで、 利用者の誰もが恩恵を得られる • より使いやすくするカスタマイズは利用者に委ねる •
カスタマイズがしやすいように作る
まとめ
アクセシビリティ • accessibility = access + ability ◦ 「アクセス +
〜できる」 ◦ accessibility → a11y • 誰もがありとあらゆる状況・環境で、 ほぼ同じコストで同じ量の情報を得られる。 そして、ほぼ同じ目標を達成できる。
PR
https://cyberagent.connpass.com/event/227974/ Muddy Web #2 を 2021/11/12 にやります 「ABEMA のアクセシビリティタスクフォースは、 これまで何をやって、これから何をやるか」