Save 37% off PRO during our Black Friday Sale! »

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

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

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

0d605a3350dd7e91b8136aecffd5ceeb?s=128

Shogo Sensui

March 16, 2018
Tweet

Transcript

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

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

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

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

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

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

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

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

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

  10. red-blind green-blind

  11. color-blind blue-blind full-blind

  12. 色 色 色 色 色

  13. out-of-door without glass

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

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

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

    も、動画を楽しめる
  17. 港区ホームページ JIS X 8341-3:2016 (= WCAG 2.0) の AA レベルに準拠している。WCAG

    は項目に 応じて A から AAA までの難易度があり、 AA 準拠(A を含めた項目全て達成)は結 構大変。 官公庁や公共団体などは、当然ながら高 い準拠レベルを強いられている。国連の 障害者権利条約を受けてアメリカ、オー ストラリア、韓国などでは法律による義務 化を進めている。アメリカでは訴訟された 事例もある。
  18. もちろんメルカリやメルペイも • メルカリが実現しているアクセシビリティ: 購入者にとって価値 のある(出品者にとって不要な)モノへのアクセス • メルペイが実現しようとしているアクセシビリティ: ATM でおろ さずとも、お金へアクセスできる(=

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

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

  21. Accessibility on iOS

  22. Material Design

  23. WCAG 2.1

  24. WCAG 2.1 を構成する4つの原則 • 知覚できる: 情報やインターフェースは、利用者が知覚できなく てはならない • 操作できる: インターフェースやナビゲーションは、操作可能で

    なくてはならない • 理解できる: 情報やインターフェースの操作は、理解可能でな くてはならない • 堅牢である: コンテンツは、支援技術を含む様々なユーザー エージェントで解釈できなくてはならない
  25. 1.4.1 色の使用: 色が、情報を伝える、動作を示 す、反応を促す、又は視覚的な要素を判別する ための唯一の視覚的手段になっていない。 (レベ ル A) 「赤文字になっているフォームは必須です」とか...

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

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

  28. Develop Test Release Design Plan コントラストは充分か 色に依存した UI ではないか キーボードで操作できるか

    支援技術で操作できるか あらゆる環境・いかなる状況で 機能を利用できるか UI に一貫性があるか デバイスを問わず操作できるか いつ誰がどのようにチェックするか
  29. ゼロイチではなく できることからやる いきなり完璧にやるのは無理 まずは、自分に出来ることをひとつずつやっていく

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