$30 off During Our Annual Pro Sale. View Details »

アクセシビリティーとは? / What the accessibility ?

アクセシビリティーとは? / What the accessibility ?

社内の LT 会で話をしたときに使った資料です。

Shota Kubota

October 26, 2021
Tweet

More Decks by Shota Kubota

Other Decks in Technology

Transcript

  1. アクセシビリティとは? @kubosho ABEMA アクセシビリティタスクフォース

  2. 話すこと アクセシビリティタスクフォースでは ABEMA に アクセシビリティ向上を波及させようとしています。 ここでは「そもそもアクセシビリティとはなんぞや?」 という疑問に答えます。

  3. アクセシビリティ?

  4. アクセシビリティ? • accessibility = access + ability ◦ 「アクセス +

    〜できる」 ◦ accessibility → a11y
  5. アクセシビリティ? • 誰もがありとあらゆる状況・環境で、 ほぼ同じコストで同じ量の情報を得られる。 そして、ほぼ同じ目標を達成できる。

  6. 誰もが

  7. 「誰もが」はすべての人が対象 高齢者や障害者だけではなく、すべての人が対象。 すべての人には自分も含む。

  8. ありとあらゆる状況・環境

  9. ありとあらゆる状況・環境 誰もが、状況や環境によって不自由になる。 • スマホの画面が割れて操作しづらい • Bluetooth イヤホンが電池切れ • 腱鞘炎でマウスが持ちづらい •

    メガネが壊れた
  10. ほぼ同じコストで同じ量の情報を得られる

  11. ほぼ同じコストで同じ量の情報を得られる あらゆる条件でほぼ同じように使えることを目指す。 • 目が見えづらい人向けに文字サ イズを大きくしすぎたら 晴眼者にとっては一覧性が下が る

  12. ほぼ同じコストで同じ量の情報を得られる あらゆる条件でほぼ同じように使えることを目指す。 • 目が見えづらい人向けに文字サイズを大きくしすぎたら 晴眼者にとっては一覧性が下がる • 画像の代替テキストにページ内にない文章を書いたら 晴眼者が知らない情報が出てくる

  13. 代替テキスト内にない文章を書いた例 この画像の代替テキストが 「ハンバーグ・チーズ・ ベーコン・オニオンが、 パンに挟まった ハンバーガー」 だとした場合 引用元: https://flic.kr/p/oT3Th5

  14. 代替テキスト内にない文章を書いた例 ページ内に材料の情報が無く、 画像だけ表示されていた場合、 先ほどの代替テキストは スクリーンリーダーユーザー しか認識できない。 → 晴眼者はハンバーガーの 材料を画像から読み取る しかない。

    引用元: https://flic.kr/p/oT3Th5
  15. 同じ量の情報を得られる例 ハンバーガー 材料 • パン • ハンバーグ • チーズ •

    ベーコン • オニオン • ケチャップ 引用元: https://flic.kr/p/oT3Th5
  16. ほぼ同じ目標を達成できる

  17. ほぼ同じ目標を達成できる 同じものを使って、目標を達成できるようにする。 • 専用のものを作るとメンテナンスコストが増える • 誰もが使いやすいものを追求することで、 利用者の誰もが恩恵を得られる • より使いやすくするカスタマイズは利用者に委ねる •

    カスタマイズがしやすいように作る
  18. まとめ

  19. アクセシビリティ • accessibility = access + ability ◦ 「アクセス +

    〜できる」 ◦ accessibility → a11y • 誰もがありとあらゆる状況・環境で、 ほぼ同じコストで同じ量の情報を得られる。 そして、ほぼ同じ目標を達成できる。
  20. PR

  21. https://cyberagent.connpass.com/event/227974/ Muddy Web #2 を 2021/11/12 にやります 「ABEMA のアクセシビリティタスクフォースは、 これまで何をやって、これから何をやるか」