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

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

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