Upgrade to Pro — share decks privately, control downloads, hide ads and more …

アクセシビリティーとは? / 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 アクセシビリティタスクフォース

    View Slide

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

    View Slide

  3. アクセシビリティ?

    View Slide

  4. アクセシビリティ?
    ● accessibility = access + ability
    ○ 「アクセス + 〜できる」
    ○ accessibility → a11y

    View Slide

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

    View Slide

  6. 誰もが

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  10. ほぼ同じコストで同じ量の情報を得られる

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  15. 同じ量の情報を得られる例
    ハンバーガー
    材料
    ● パン
    ● ハンバーグ
    ● チーズ
    ● ベーコン
    ● オニオン
    ● ケチャップ
    引用元: https://flic.kr/p/oT3Th5

    View Slide

  16. ほぼ同じ目標を達成できる

    View Slide

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

    View Slide

  18. まとめ

    View Slide

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

    View Slide

  20. PR

    View Slide

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

    View Slide