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
400
1
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
アクセシビリティーとは? / What the accessibility ?
社内の LT 会で話をしたときに使った資料です。
Shota Kubota
October 26, 2021
More Decks by Shota Kubota
See All by Shota Kubota
私の困りごとと解決案 / My issues and proposed solutions
kubosho
1
440
個人からチームに広げるアクセシビリティ向上の輪 / Accessibility improvement expanding from individual to team
kubosho
1
2.4k
ABEMA のアクセシビリティータスクフォースは何をしてきて何をやるか / What ABEMA accessibility task force has done and will do
kubosho
1
3.2k
CSS のルールセットを高速に出力する VS Code 拡張を作った / Made a VS Code extension to output CSS rulesets
kubosho
1
5.7k
AbemaTVにおけるCSS is too fragile問題に対する解 / Solution of "CSS is too fragile" by AbemaTV
kubosho
12
5.8k
CSS設計を破綻させない
kubosho
10
2.9k
Prottフロントエンドのいまとこれから
kubosho
1
2.9k
ブラウザ上で弾ける「あの楽器」を作ってみた
kubosho
0
1.1k
Other Decks in Technology
See All in Technology
Claude Code並行開発環境の ムダ‧ムラ‧ムリを見直した話
muranakaaa
0
380
ウォーターフォール開発案件のPMとしてAI活用を模索している話
hatahata021
2
240
エンタープライズデータへ安全につなぐ Production-ready なエージェント設計 ― AI × MCP リファレンスアーキテクチャ ― #AIDevDay
cdataj
1
430
セキュリティ研修【MIXI 26新卒技術研修】
mixi_engineers
PRO
32
27k
ガバメントクラウドでのランサムウェア対策
techniczna
1
470
「待ち時間」の消滅と「自我消耗」の加速:生成AI時代のエンジニアを救うメンタル・リソース管理
poropinai1966
0
390
CloudWatchから始めるAWS監視
butadora
0
300
ここは地獄!つらい朝会を体験することで、チームとしてのより良い振る舞いに気づくワークショップ / The stand-up meeting from hell in the game industry
scrummasudar
0
510
QAと開発の両側から進める AI活用 -QAプロセスAI支援ツールキットと Inner Loop / Outer Loopの取り組み-
legalontechnologies
PRO
2
400
Pavlokで始める電撃駆動開発
sgrsn
0
140
VPCセキュリティ対応の最新事情
nagisa53
2
350
BigQuery を検索ソースとした AI Agent の作り方って 〇〇 通りあんねん
satohjohn
0
150
Featured
See All Featured
The Impact of AI in SEO - AI Overviews June 2024 Edition
aleyda
5
1.1k
First, design no harm
axbom
PRO
2
1.2k
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
aleyda
1
2.1k
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
chikuwait
0
670
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
inesmontani
PRO
0
590
We Have a Design System, Now What?
morganepeng
55
8.2k
Designing Experiences People Love
moore
143
24k
Paper Plane (Part 1)
katiecoart
PRO
1
9.9k
How To Speak Unicorn (iThemes Webinar)
marktimemedia
1
520
Designing Powerful Visuals for Engaging Learning
tmiket
1
470
Heart Work Chapter 1 - Part 1
lfama
PRO
8
36k
For a Future-Friendly Web
brad_frost
183
10k
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 のアクセシビリティタスクフォースは、 これまで何をやって、これから何をやるか」