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

アクセシビリティとメルカリの話 / A11y and Mercari

アクセシビリティとメルカリの話 / A11y and Mercari

All Hands で使用したアクセシビリティに関するプレゼンテーションの資料から confidential なデータを取り除いたものです。Google Slides 版は アクセシビリティとメルカリの話で、スライド最後の動画は【感動】66年の長い生涯で初めて、色鮮やかな世界を目にしたおじいちゃんです。

Shogo Sensui

March 16, 2018
Tweet

More Decks by Shogo Sensui

Other Decks in Technology

Transcript

  1. アクセシビリティと
    メルカリの話
    Shogo Sensui (@1000ch)

    View full-size slide

  2. アクセシビリティとは…?
    ユニバーサルデザイン?バリアフリー?
    ユーザビリティ?障碍者対応?

    View full-size slide

  3. UX ハニカム
    ユーザー体験において最も重要な「価値
    がある」ことを構成する要素を、性質ごと
    に分解したもの。

    View full-size slide

  4. UX ピラミッド
    ユーザー体験の構成要素を、遭遇する順
    番を元に構造化したもの。

    View full-size slide

  5. 特定の利用状況において、特定のユーザによっ
    て、ある製品が、指定された目標を達成するため
    に用いられる際の、有効さ、効率、ユーザの満足
    度の度合い。
    ISO 9241-11 ユーザビリティの定義より

    View full-size slide

  6. 様々な能力を持つ幅広い人々に対する、
    製品、サービス、環境または施設の
    ユーザビリティ
    ISO 9241-20 アクセシビリティの定義より

    View full-size slide

  7. アクセシビリティは
    「ユーザー体験の基本」
    GitHub にアクセスできなければ戦力激減…
    インターネットがない環境ではただのおじさん…

    View full-size slide

  8. 何の数字でしょうか?
    男性の5% 20人に1人
    女性の0.2% 500人に1人

    View full-size slide

  9. メルカリ DAU のうち色覚異常を抱える人の割合は…
    約 ????? 人

    View full-size slide

  10. red-blind green-blind

    View full-size slide

  11. color-blind
    blue-blind full-blind

    View full-size slide

  12. 色 色 色 色 色

    View full-size slide

  13. out-of-door without glass

    View full-size slide

  14. 様々なアクセシビリティの形

    View full-size slide

  15. ログミー[o_O]
    “スピーチや対談、テレビ・ラジオ、セミ
    ナーなどの内容を全文書き起こし、テキ
    スト化(ログ)することで、価値あるコンテ
    ンツをより多くの人にシェアするメディアで
    す。”
    書き起こしがあると…
    - リアルタイムを逃した人でも、コン
    テンツを楽しめる
    - 聴覚障害がある人でもコンテンツ
    を楽しめる

    View full-size slide

  16. YouTube
    アップロードした動画に、自作の字幕を付
    与できる。各国語対応の自動字幕起こし
    機能もある。
    字幕があると…
    - 聴覚障害がある人でもコンテンツ
    を楽しめる
    - 音声を再生できない場面・場所で
    も、動画を楽しめる

    View full-size slide

  17. 港区ホームページ
    JIS X 8341-3:2016 (= WCAG 2.0) の AA
    レベルに準拠している。WCAG は項目に
    応じて A から AAA までの難易度があり、
    AA 準拠(A を含めた項目全て達成)は結
    構大変。
    官公庁や公共団体などは、当然ながら高
    い準拠レベルを強いられている。国連の
    障害者権利条約を受けてアメリカ、オー
    ストラリア、韓国などでは法律による義務
    化を進めている。アメリカでは訴訟された
    事例もある。

    View full-size slide

  18. もちろんメルカリやメルペイも
    ● メルカリが実現しているアクセシビリティ: 購入者にとって価値
    のある(出品者にとって不要な)モノへのアクセス
    ● メルペイが実現しようとしているアクセシビリティ: ATM でおろ
    さずとも、お金へアクセスできる(= なめらかさ)

    View full-size slide

  19. アメリカをはじめとした
    a11y 先進国では訴訟事例も
    Web アクセシビリティ
    海外の気になる動きと日本国内の最新動向

    View full-size slide

  20. 各プラットフォームの
    ガイドラインを読んでみよう
    IA の基礎、色使いのレギュレーションなど
    アクセシビリティに関わる様々なことが書いてある

    View full-size slide

  21. Accessibility on iOS

    View full-size slide

  22. Material Design

    View full-size slide

  23. WCAG 2.1 を構成する4つの原則
    ● 知覚できる: 情報やインターフェースは、利用者が知覚できなく
    てはならない
    ● 操作できる: インターフェースやナビゲーションは、操作可能で
    なくてはならない
    ● 理解できる: 情報やインターフェースの操作は、理解可能でな
    くてはならない
    ● 堅牢である: コンテンツは、支援技術を含む様々なユーザー
    エージェントで解釈できなくてはならない

    View full-size slide

  24. 1.4.1 色の使用: 色が、情報を伝える、動作を示
    す、反応を促す、又は視覚的な要素を判別する
    ための唯一の視覚的手段になっていない。 (レベ
    ル A)
    「赤文字になっているフォームは必須です」とか...

    View full-size slide

  25. 2.4.7 フォーカスの可視化: キーボード操作が可
    能なあらゆるユーザインタフェースには、フォーカ
    スインジケータが見える操作モードがある。 (レベ
    ル AA)
    フォーカスを無効化するとスクリーンリーダーが無力になり、非表
    示にすると現在地がわからなくなる

    View full-size slide

  26. プロダクトに関わる
    全員の理解と協力が必要
    アクセシビリティを担保していくためには…

    View full-size slide

  27. Develop Test Release
    Design
    Plan
    コントラストは充分か
    色に依存した UI ではないか
    キーボードで操作できるか
    支援技術で操作できるか
    あらゆる環境・いかなる状況で
    機能を利用できるか
    UI に一貫性があるか
    デバイスを問わず操作できるか
    いつ誰がどのようにチェックするか

    View full-size slide

  28. ゼロイチではなく
    できることからやる
    いきなり完璧にやるのは無理
    まずは、自分に出来ることをひとつずつやっていく

    View full-size slide

  29. 66年の長い生涯で初めて、色鮮やかな世界を目にしたおじいちゃん - YouTube

    View full-size slide