Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

red-blind green-blind

Slide 11

Slide 11 text

color-blind blue-blind full-blind

Slide 12

Slide 12 text

色　色　色　色　色

Slide 13

Slide 13 text

out-of-door without glass

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

Accessibility on iOS

Slide 22

Slide 22 text

Material Design

Slide 23

Slide 23 text

WCAG 2.1

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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