社内の LT 会で話をしたときに使った資料です。
アクセシビリティとは？@kuboshoABEMA アクセシビリティタスクフォース
View Slide
話すことアクセシビリティタスクフォースでは 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 のアクセシビリティタスクフォースは、これまで何をやって、これから何をやるか」
kubosho
daikisuyama
nagauta
iwamot
takaking22
_takahash
ojun9
bcantrill
devops_vtj
salaboy
kawaguti
line_developers
takagimeow
phodgson
reverentgeek
addyosmani
marcelosomers
colly
rocio
3n
shlominoach
zenorocha
ufuk
trishagee