あなたの価値を高める
Webアクセシビリティ

2019.06.01
Rikiya Ihara / freee K.K.

伊原 力也@magi1125
freee プロダクトマネジャー, UXデザイナー
ウェブアクセシビリティ基盤委員会 WG1委員
HCD‑Net 評議委員、認定人間中心設計専門家

本日の流れアクセシビリティとはWebアクセシビリティの解剖
Webアクセシビリティの誤解
どこからはじめるかアクセシビリティとは

Q

アクセシビリティに何かしら取り組んでいる？

A

この場にいる全員が実は取り組んでいる

Webに載るだけで圧倒的にアクセシブル

お店 → Web
新聞 → Web学校 → Web
業務 → Web改変: 加工できる、再利用できる
共有: 誰かに渡せる、共有できる
使用: 知覚・理解・操作、目的達成
携帯: 持ち運べる、呼び出せる
発見: 特定できる、探し出せる
頑健: 存在が維持される

hackability
shareability
usability
portability
ﬁndability
robustness

価値製品・サービスWeb

http://www.ric.co.jp/book/contents/pdfs/893_6_1.pdf

アクセシビリティ＝使えるかどうか？
使えるかAccessible

使いやすいかUsableremote control pig pilehttps://www.ﬂickr.com/photos/redjar/136216456/

1

２

３

４

ISO 9241‑11 のユーザビリティ定義
特定の目的を達成するために、特定の利用者が、特定の利用状況で、有効性、効率性、そして満足とともにある製品を利用することができる度合い。

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

ユーザビリティ

アクセシビリティ
Use

Use

ある状況での使える度

使える度合いの幅広さ

アクセシビリティ＝障害者・高齢者対応？

腱鞘炎でマウスが持てないBluetoothイヤホンが電池切れ子どもにメガネを壊された

Web Content Accessibility Guidelines (WCAG) 2.0
イントロダクション：

しばしば利用者全般のユーザビリティを向上させる。

アクセシビリティ＝ユーザビリティの幅広さ

Webアクセシビリティの解剖素人とは違う、Webプロフェッショナルの仕事としてのWebコンテンツ開発を考えてみた
http://web‑tan.forum.impressrd.jp/e/2012/05/17/12727

ヒューマンリーダブル人の目で見やすいか、わかりやすいかひとつの表現で幅広く使えるようにする
物理的な製品のユニバーサルデザインに近い1. 知覚可能1.4 判別可能

コンテンツを、利用者にとって見やすく、聞きやすいものにすること。
これには、前景と背景を区別することも含む。

2: 操作可能

2.2 十分な時間

利用者がコンテンツを読み、使用するために十分な時間を提供すること。

2.3 発作の防止

発作を引き起こすようなコンテンツを設計しないこと。

2.4 ナビゲーション可能

利用者がナビゲートしたり、コンテンツを探し出したり、現在位置を確認したりすることを手助けする手段を提供すること。

3: 理解可能
3.1 読みやすさ

テキストのコンテンツを読みやすく理解可能にすること。

3.2 予測可能

ウェブページの表示や挙動を予測可能にすること。

3.3 入力支援

利用者の間違いを防ぎ、修正を支援すること。

モバイルの利用状況から来るデザインヒント
必要十分な表現にとどめる
チラ見しやすいようにデザインする
階層を深くしない
自然な形で接点を見せる
途中で操作を止めても同じことができる
時間軸を使って情報を整理する

サイボウズの組織的な取り組みとビジュアルデザイン

小林 大輔 ＆ 樋田 勇也

特定状況でのユーザビリティ＝いわゆるユーザビリティ

UI
幅広い状況でのヒューマンリーダビリティ≒アクセシビリティ

マシンリーダブル
プログラムが解釈できるか様々な形に変換して幅広く使えるようにする
Webならではのアプローチ

マシンリーダブル
WCAG 2.0 レベルA
必ず満たすべきもの

ヒューマンリーダブル
ひとつのものでは対応範囲に限界がある辻ちゃん・ウエちゃんのアクセシブル GO GO!!
「スクリーンリーダーで『Backlog』を使ってみる」の巻

辻 勝利 ＆ 植木 真

Webアクセシビリティの重要なポイント
ブラウザや支援技術で状況に適した表現に変えられること

これがWebアクセシビリティの根幹
最も多くの人に伝わる表現方法は「テキスト」
それをマークアップすると機械が解釈できるようになる
使い方に応じ、プログラムを通して変換可能になる

狙い撃つ
ユーザビリティ

可能性を保つマシン
リーダビリティ

Web

網を張る
ヒューマン
リーダビリティWebアクセシビリティの誤解アクセシビリティ＝売りにつながらない？

分母へのアプローチ
デザイン側での唯一のアプローチ手段
65歳以上の利用が16.4％（1,653万人）
障害者の利用率は高い（82.7～93.4%）
流入を増やす？アクセシブルにする？

流入
利用開始
遷移・回遊
理解
申込
コンバージョン

各段階へのアプローチ
WCAG2.0 に含まれる内容：
ナビゲーションのガイドライン
ライティングのガイドライン
フォーム最適化のガイドライン

流入
利用開始
遷移・回遊
理解
申込
コンバージョン

例：ナビゲーション

流入例：テキストライティング

流入例：フォーム最適化

流入アクセシビリティ＝売りにつながるアクセシビリティ＝守りのイメージ？

https://calil.jp/誰もが隣にいる人と一緒に楽しむために
松森 果林

アクセシビリティ＝攻めの一手アクセシビリティ＝コストが増える？

http://www.slideshare.net/waic_jp/201310‑waic‑seminarsawada

個別対応が減る → コスト削減＆品質の安定コンポーネント
テンプレート
一貫性、再利用性

アクセシビリティ
幅広い環境に全体最適化

アクセシビリティ＝利益につながるアクセシビリティ＝いまは必要ない？

各国で進む法整備
AODA

Section 508,ADA, ACAA

EN 301 549

障害者差別禁止法

インクルーシブネスを超えて木達 一仁アクセシビリティ＝はじめるなら今！

どこからはじめるかマシンとヒューマンの架け橋は「テキスト」

伝わる可能性が一番高いUI「テキスト」
Webコンテンツのほとんどは「テキスト」
検索に使うのも「テキスト」
書き込むのも「テキスト」

http://www.uxbooth.com/articles/complete‑beginners‑guide‑to‑information‑architecture/https://blogs.msdn.microsoft.com/jensenh/2005/11/01/the‑importance‑of‑labels/
https://blogs.msdn.microsoft.com/jensenh/2005/09/15/enter‑the‑ribbon/

設計・デザインの段階でテキストを意識「ヒューマンリーダブル」な形でわかりやすく、構造を持ったテキストを出す

マシンリーダブルはテキストがあればこそテキストが無ければマークアップはできない（！）
構造を持つテキストあれば、マークアップは難しくない

『代替テキスト決定ツリー』の使い方
澤田 望

狙い撃つ
ユーザビリティ

可能性を保つマシン
リーダビリティ

Web

網を張る
ヒューマンリーダビリティ

一人でなくチームで取り組もう

方針があれば、はじめからチームで取り組めるおわりにWebの本質はアクセシビリティ
The power of the Web is in its universality.
Access by everyone regardless of disability is an essential aspect.
Webのパワーは、その普遍性にある。
障害の有無に関係なく、誰もが使えることが、その本質である。

Tim Berners‑Lee,W3C Director and inventor of the World Wide Web

Q

アクセシビリティに何かしら取り組んでいる？

A

この場にいる全員が実は取り組んでいるさあ、次の一歩を踏み出そう！

ありがとうございました@magi1125
facebook.com/rikiya.ihara