Comments
Description
Transcript
Web - Yimg.jp
やはりお前らの
Webアクセシビリティは
間違っている
福本 翔
ヤフー株式会社
マーケティングソリューションカンパニー
エクスペリエンスデザイン部
!
マークアップエンジニア/フロントエンジニア
!
広告周りのツール
広告周りのプロモーションサイト
!
HTML/CSS/JavaScript/PHP/CMS
Webアクセシビリティ
聞いたことあります？
•
聞いたことない
•
ちょっと知ってる/聞いたことがある
•
よく知ってる
むしろ喋らせろ
•
こうなるといいな
今後の仕事をする上で
アクセシビリティについて
考えるきっかけになった
よく知らなかった方
勘違いしていた方
全力でdisるよ！
まずいいたいのは
Webアクセシビリティは
障がい者や高齢者の
ためだけの対応
ではない
ということ
Webアクセシビリティは
•
•
•
•
障がい者や高齢者も含めた
誰もが、どんな環境でも
どれだけ利用できるか
の度合いのこと
そこをはき違えるから
お前らはすぐに
「一部のユーザーのためだけに力を入れても……」
「高齢者はターゲットじゃないから……」
「スクリーンリーダー対応をやってもなぁ……」
というような話になる
ヽ(･ω･)/ ｽﾞｺｰ
＼(.＼ ノ
､ﾊ,,､ ￣
￣
誰もが、どんな環境でも
利用者も様々
•
•
健常者
こども
高齢者
障がい者
機械、ロボット
•
etc… etc…
•
•
•
使用するデバイスも様々
•
•
タッチスクリーン
音声入出力
ウェアラブルデバイス
キーボードがないデバイス
マウスがないデバイス
多様なディスプレイサイズ
•
etc… etc…
•
•
•
•
コンテキストも様々
•
屋外でまぶしい
電車内で音が出せない
周りがうるさくて音声入出力ができない
運転中で画面に注目できない
ディスプレイが壊れた
怪我をして上手く操作できない
料理中で手が汚れているのでマウスが使えない
•
etc… etc…
•
•
•
•
•
•
つまり
利用者
×
使用するデバイス
×
コンテキスト
こういった利用環境下で
どれだけ利用できる
度合いが高いか
なのです！
利用環境は
たくさんあるのに
障がい者、高齢者とか
スクリーンリーダーという
言葉に
お前ら釣られ過ぎ
m9(^д^)
そもそも
視覚から情報を
得るのに支障がある人
視覚から情報を
得るのに支障がある人
＝視覚障がい者
だけではない
視覚から情報を得るのに
支障がある人
•
•
視覚障がい者
ディスプレイが壊れた
ディスプレイが存在しないデバイス
回線が遅くて接続が切れて画像が読めない
運転中でよそ見ができない
•
英語が書いてある画像でしかもalt属性が無い
•
•
•
なのにお前らは懲りずに
「障がい者はターゲットじゃないから……」
「スクリーンリーダー対応をやってもなぁ……」
という話をする
ヽ(･ω･)/ ｽﾞｺｰ
＼(.＼ ノ
､ﾊ,,､ ￣
￣
視覚障がい者のための対応
ではなく
視覚以外でも
支障なく情報を得られる
ようにする対応
という風に
考える必要がある
特に最近は
ウェアラブルデバイスの
登場もあり
Webサイトは
目で見て情報を得るモノ
という神話は崩れてきた
今後、利用環境は
より一層多様化！
だから
誰もが、どんな環境でも
どれだけ利用できるか
の度合いを高める
必要がある
次に
Webアクセシビリティの
対応とは
未来のデバイス ウェアラブルデバイス 全盲 スクリーンリーダーの使用 点字
リーダーの使用 ロービジョン 色弱 聴覚障
害 中途失聴 ろう 音声・言語・そしゃく機
能障害 知的障害 四肢不自由 怪我をした
キーボードの破損 マウスの破損 ディスプ
レイの破損 ディスプレイのサイズ
未来のデバイス ウェアラブルデバイス 全盲 スクリーンリーダーの使用 点字
リーダーの使用
ロービジョン 色弱 聴覚障
多様化される
害 中途失聴
ろう
音声・言語・そしゃく機
利用環境すべてに
能障害 知的障害 四肢不自由 怪我をした
使えるように
キーボードの破損 マウスの破損 ディスプ
レイの破損 ディスプレイのサイズ
未来のデバイス ウェアラブルデバイス 全盲 スクリーンリーダーの使用 点字
リーダーの使用 ロービジョン 色弱 聴覚障
•
•
•
•
•
害 中途失聴 ろう 音声・言語・そしゃく機
特別な対応を施すこと
能障害 知的障害 四肢不自由 怪我をした
キーボードの破損 マウスの破損 ディスプ
レイの破損 ディスプレイのサイズ
ではない
ということ
Webアクセシビリティの
対応とは
３つの要点を
押さえればおk
Webアクセシビリティ対応の
３つのポイント
•
人間自身が理解しやすいこと
（ヒューマンリーダブル）
•
人間が使う機械自身が理解しやすいこと
（マシンリーダブル）
•
利用、操作可能な代替手段が存在すること
特に今日言いたいのは
マシンリーダブル
であること
なぜこれが大事かというと
Webを利用する
構成要素は
Web
コンテンツ
入出力
機器
ソフト
ウェア
感覚
情報
支援技術
ハードウェア
ユーザーエージェント
利用者
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Yahoo! JAPAN</
HTML
API
RSS
Web
コンテンツ
入出力
機器
ソフト
ウェア
感覚
情報
支援技術
ハードウェア
ユーザーエージェント
利用者
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Yahoo! JAPAN</
HTML
API
RSS
Web
コンテンツ
ブラウザ
アプリ
入出力
機器
ソフト
ウェア
感覚
情報
支援技術
ハードウェア
ユーザーエージェント
利用者
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Yahoo! JAPAN</
HTML
API
RSS
Web
コンテンツ
ディスプレイ、
スピーカー
マウス、キーボード
ブラウザ
アプリ
入出力
機器
ソフト
ウェア
感覚
情報
支援技術
ハードウェア
ユーザーエージェント
利用者
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Yahoo! JAPAN</
HTML
API
RSS
Web
コンテンツ
ディスプレイ、
スピーカー
マウス、キーボード
ブラウザ
アプリ
入出力
機器
ソフト
ウェア
視覚情報
感覚
情報
支援技術
ハードウェア
ユーザーエージェント
利用者
支援技術を
利用する場合だと
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Yahoo! JAPAN</
HTML
API
RSS
Web
コンテンツ
ブラウザ
アプリ
入出力
機器
ソフト
ウェア
感覚
情報
支援技術
ハードウェア
ユーザーエージェント
利用者
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Yahoo! JAPAN</
HTML
API
RSS
Web
コンテンツ
ブラウザ
アプリ
スクリーン
リーダーなど
入出力
機器
ソフト
ウェア
感覚
情報
支援技術
ハードウェア
ユーザーエージェント
利用者
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Yahoo! JAPAN</
HTML
API
RSS
Web
コンテンツ
ブラウザ
アプリ
スクリーン
リーダーなど
ディスプレイ、
スピーカー
マウス、キーボード
入出力
機器
ソフト
ウェア
感覚
情報
支援技術
ハードウェア
ユーザーエージェント
利用者
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Yahoo! JAPAN</
HTML
API
RSS
Web
コンテンツ
ブラウザ
アプリ
スクリーン
リーダーなど
ディスプレイ、
スピーカー
マウス、キーボード
入出力
機器
ソフト
ウェア
聴覚情報
感覚
情報
支援技術
ハードウェア
ユーザーエージェント
利用者
機械が理解しやすければ
これ
Web
コンテンツ
入出力
機器
ソフト
ウェア
感覚
情報
支援技術
ハードウェア
ユーザーエージェント
利用者
適切な形で情報を
利用者に伝えやすくなる
簡単にまとめると
マシンリーダビリティが
高い状態にしておく
利用者
Webコンテンツ
ソフトウェア・
支援技術
入出力機器
機械が理解しやすい
利用者
Webコンテンツ
ソフトウェア・
支援技術
入出力機器
状況、環境に応じて
いい感じに入出力しやすくなる
利用者
Webコンテンツ
ソフトウェア・
支援技術
入出力機器
誰もが、どんな環境でも
利用しやすい状態になりやすくなる
利用者
Webコンテンツ
ソフトウェア・
支援技術
入出力機器
って状態になりやすい
そしてこれは
SFにでてくるような
素敵な未来に繋がる！
攻殻機動隊とか
電脳コイルとか
なぜなら
ああいった未来を
実現するためには
扱う情報が
そもそも
機械に理解しやすい状態
が非常に重要！
ようするに
アクセシビリティが
高い状態にしておく
未来デバイスA
利用者
扱う情報
未来デバイスB
機械が理解しやすい
未来デバイスA
利用者
扱う情報
未来デバイスB
いい感じに入出力
未来デバイスA
利用者
扱う情報
未来デバイスB
しかも
どの未来デバイスでも使える
未来デバイスA
利用者
扱う情報
未来デバイスB
がしやすくなる
むしろ
これをしとかないと
情報自体が独自フォーマットで扱いにくかったり…
!
情報ごとに解析用のプログラム
（ウェブスクレイピングとか）を
作る必要があったり…
扱いづらいレスポンスのAPIが
蔓延してるような感じ
が起きちゃう
具体的に
何をしたらいいのか
Webコンテンツ(HTML)を
機械が理解しやすい形へ
•
アウトラインなどの構造、関係性をよりよくする
•
ページ自体やコンテンツなどが
何を意味するのかメタ的な情報を持たせる
•
幅広く利用可能にするためWeb標準に準拠する
早い話が
ちゃんと
マークアップしようず
よりよく
マークアップしようず
アウトラインは本当に正しい？
h1. まぐろの種類
h2. 本マグロ
AD
h2. インドマグロ
h3. ランキング
要素、属性を正しく適切に使う
この辺りの要素ってちゃんと使ってます？
•
fieldset要素
•
del要素
•
legend要素
•
ins要素
•
caption要素
•
s要素
•
dfn要素
•
abbr要素
•
em要素
要素、属性を正しく適切に使う
この辺りの属性ってちゃんと使ってます？
•
rel属性
•
lang属性
•
hreflang属性
•
for属性
要素、属性を正しく適切に使う
関連するリソースを定義できてます？
!
•
link要素
•
次のページ、前のページ、ヘルプページ
•
Operaだとナビゲーションに出してくれ
る
•
代替リソース（RSS、他言語ページとか）
WAI-ARIAを使う
•
role属性
•
•
要素が「どのような役割を持っているか」
を表す
aria-*属性
•
要素が「どのような状態、特性を持ってい
るか」を表す
WAI-ARIAを使う（role属性）
•
role=“alert”
• 警告メッセージの役割を持たせる
•
role=“button”
• ボタンの役割を持たせる
•
role=“tooltip”
• ツールチップの役割を持たせる
•
http://www.hitachi.co.jp/universaldesign/ria/
ajax/wai-aria/wd_20090224/index.html#roles
WAI-ARIAを使う（aria-*属性）
•
aria-haspopup=“true/false”
• ポップアップのメニューなどを持っていることを示す
•
aria-expanded=“true/false”
• 展開可能な要素が、展開しているかどうかを示す
•
aria-sort=“{value}”
• テーブルなどの項目が昇順、降順のどちらでソートさ
れているかを示す
•
http://www.hitachi.co.jp/universaldesign/ria/ajax/waiaria/wd_20090224/index.html#state_prop_def
構造化データを使う
•
HTMLの構造の中にメタ情報を組み込む
•
イベント、人物、レシピなどであることを
伝えることができる
•
microdata, microformats, RDFaなど
•
リッチスニペットなどにも用いられる
こういったのを
やっておけば
将来的に
機械が理解しやすい
扱う情報
未来デバイス
利用者
いい感じに入出力
扱う情報
未来デバイス
利用者
になって
未来に近づく
基盤になる
そういえば
Apple Watch
発表されたね
mobile safariのリーダー機能
みたいな感じになる？
!
アウトラインを見せる？
Webページ
Apple Watch
利用者
アクセシビリティを
高くしておけばひとまず安心
Webページ
Apple Watch
利用者
最後に
Webという
メディア媒体の本質は
The power of the Web is
in its universality. Access
by everyone regardless
of disability is an
essential aspect.
Tim Berners-Lee
Webの持つパワーは、
そのユニバーサル性にある。
つまり、障害の有無に関係なく、
誰もが利用できることこそが
Webの本質なのである。
ティム・バーナーズ＝リー
Webって誰でも
利用できるところが
まじすげーって思うし、
そうあるべきだと思うのよ
意訳
なのです
つまり
Webアクセシビリティ
を高める事は
Webの本質
……
やはり
障がい者、高齢者のためだけに
対応すること
スクリーンリーダーのためだけに
対応すること
というような認識の
お前らの
Webアクセシビリティは
間違っている
ご清聴
ありがとうございました
Appendix
Appendix
•
WAI-ARIA（最新版）
http://www.w3.org/TR/wai-aria/
WAI-ARIA（日立が公開している日本語
•
•
版）
•
http://www.hitachi.co.jp/
universaldesign/ria/ajax/wai-aria/
wd_20090224/index.html
Appendix
•
ウェブアクセシビリティは未来像から伝え
始めましょうぜ
http://note.openvista.jp/2014/learnaccessibility-from-future
グーグルの盲目プログラマーが未来を語る
•
•
--アクセシビリティで生活を便利に
•
http://japan.cnet.com/news/business/
35033380/