Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
アクセシビリティーとは? / What the accessibility ?
Search
Shota Kubota
October 26, 2021
Technology
410
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
460
個人からチームに広げるアクセシビリティ向上の輪 / Accessibility improvement expanding from individual to team
kubosho
1
2.5k
ABEMA のアクセシビリティータスクフォースは何をしてきて何をやるか / What ABEMA accessibility task force has done and will do
kubosho
1
3.3k
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.9k
CSS設計を破綻させない
kubosho
10
2.9k
Prottフロントエンドのいまとこれから
kubosho
1
2.9k
ブラウザ上で弾ける「あの楽器」を作ってみた
kubosho
0
1.1k
Other Decks in Technology
See All in Technology
[JAWS Festa 2026]一番いい仕事は、請求書に現れない / jawsfesta2026
sh_fk2
2
440
Agent Harnessはどう作る?事例から学ぶAI Agentの設計思想
sergicalsix
0
250
公共システムAdventCalendar2026
toru_kubota
0
300
セキュリティ専任チームなしで攻撃を先回りするSREが実践したSIEM on Amazon OpenSearch Service
cscengineer
PRO
1
750
ゼロから作るWebアプリの新定番!?Amplify Gen 2 × AWS Blocksで実現する「開発速度とRDBの柔軟性のいいとこ取り」
amixedcolor
1
230
LLM 基盤と kagent v0 を全部 k8s に入れてみた / Deploy both LLM and kagent v0 in k8s
kota2and3kan
0
120
SREのためのFinOps入門
muziyoshiz
2
1.3k
会社説明資料_最新版
demaecan
0
32k
サボる子はいねぇがー!AgentCoreハーネスの脆弱性に学ぶ、エージェントの入力バリデーション
iwamot
PRO
5
320
プロダクションコードにおける encoding/json から encoding/json/v2 へのスムーズな移行
sansantech
PRO
1
320
AIエージェントの監視、思考を見るか行動を見るか / Monitoring AI Agents: Thoughts or Actions
yusukeshimizu
2
180
JAWSコミュニティに 参加して1年経った結果
ssakita
0
120
Featured
See All Featured
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
63
48k
Ruling the World: When Life Gets Gamed
codingconduct
0
440
Skip the Path - Find Your Career Trail
mkilby
1
290
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
10k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
Building Flexible Design Systems
yeseniaperezcruz
330
41k
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
68
60k
A designer walks into a library…
pauljervisheath
211
25k
Context Engineering - Making Every Token Count
addyosmani
9
1.3k
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
uxyall
2
3.8k
Between Models and Reality
mayunak
4
570
Game over? The fight for quality and originality in the time of robots
wayneb77
1
330
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 のアクセシビリティタスクフォースは、 これまで何をやって、これから何をやるか」