目が見えない状態を想定したUI設計

川本圭太 / GMO PEPABO inc.
2016.09.20 Design Casual Talks #1
目が見えない状態を
想定したUI設計

デザイナー
川本圭太 @keita_kawamoto
GMOペパボホスティング事業部
@keita_kawamoto

GMOペパボ
“もっとおもしろくできる” 
“インターネットで可能性
をつなげる、ひろげる”
• ひとりひとりが持つ力や可能性をひろ
げる
• インターネットと表現の可能性を追求
• いろんな人たちがインターネットで可
能性を開花し、活躍できるための環境
を創造

ほかには
ラップとか社内イベントとか
Rubyとかデスメタルとか

詳しくは
“ペパボ”で検索!!!!

ある疑問が生まれたのは
今から少し前…

「画像文字をやめたから、
視覚障害者にも優しい設計に
なったと言えます」

答えがわからないぞ？？？

「知らない」問題
•「見える」インターフェイスにばかり注力
• 視覚障害者への対応に向き合ったことがない
• img要素のalt設定もルールに従っているだけ
• むしろaltは画像読み込み失敗時用という認識
• 視覚障害者について、具体的なことを何も知らない

視覚障害者とは？ 
調べてみた

視覚障害者の概要
• 視覚が弱いもしくは全く無い人たちのこと
• 残存視覚がある人を弱視者（ロービジョン）と呼ぶ
• 視覚をもたない人を盲/全盲（ブラインドネス）と呼ぶ
• 正常な視覚をもつ人を晴眼者と呼ぶ
• 行動の傾向：近代のアクセシビリティ向上によって健常者
と変わらない活動が可能になりつつある
[出典] 2016年9月時点 https://ja.wikipedia.org/wiki/視覚障害者

視覚障害者の概要
• 視覚以外に聴覚・触覚等の重複障害も多い
• 全盲よりも弱視の割合のほうが多い（７割）
• 弱視者の見え方は一通りではない
• 時間帯や光の加減などの条件変化に視覚も左右される
• WHOの弱視の定義は、「両眼に眼鏡をかけた矯正視力が
0.05以上0.3未満」
[出典] 2016年9月時点視覚障害とは - 公益財団法人関西盲導犬協会（http://www.kansai-guidedog.jp/knowledge/disease/）

弱視者の見え方の例（イメージ・個人差あり）
晴眼者視野狭窄白濁または霧視
低い視力暗順応障害羞明
[参考文献] 2016年9月時点視覚障害とは - 高知県立盲学校（http://www.kochinet.ed.jp/mo-s/mt/post-28.html） 
[参考文献] 2016年9月時点２－１　視覚障害とは - 秋田県立視覚支援学校（http://kagayaki.akita-pref.ed.jp/shikaku-s/detail.html?id=361&category_id=61）

視覚障害者の割合・補足
•視覚障害者は日本全国1億2000万人中約30万人
•点字使用率は1割（！）しかない
•正確な統計はわからない？
• 上記の数字は障害者手帳の統計から出した推定値
• 厚生労働省が行ったのは実数調査ではない
• 障害者手帳を持っていない弱視者は100万人とする説あり
[出典] 厚生労働省統計情報・白書平成18年身体障害児・者実態調査結果 (http://www.mhlw.go.jp/toukei/list/108-1b.html) 
[出典] 2016年9月時点　視覚障害者全盲者と弱視者の割合統計みたいなものが欲しい... - Yahoo!知恵袋 ( http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1049785990 )

見え方も違えば、ニーズも違う
• 視野狭窄、白濁などケースの多さに対しニーズも多い
• グレースケール・カラー反転させることでまぶしさを軽減
• コントラストをはっきりさせ視認性向上
• 拡大鏡で任意の場所を拡大
• 設定の組み合わせで様々なケースに対応
• 画面を最適化してブラウジング
[出典] 2016年9月時点視覚障害とは - 高知県立盲学校（http://www.kochinet.ed.jp/mo-s/mt/post-28.html）より参考箇所あり

今回はApple製
Mac用スクリーンリーダー

スクリーンリーダー？
• コンピュータの画面読み上げソフトウェア
• Windowsでは以下のソフトがメジャー
• NVDA
• JAWS
• PC-Talker
• MacではVoiceOver

まずは用意したものを
スクリーンリーダーで見てみる

視覚なしで
得られる情報

「リンク keita's Favorite Movie お気に入りリンク鑑賞済み映画リンク未鑑賞映画お気に入り
シビル・ウォー／キャプテン・アメリカ - アンソニー・ルッソ/ジョー・ルッソアイアンマン3 - シェー
ン・ブラックバック・トゥ・ザ・フューチャー - ロバート・ゼメキスインディペンデンス・デイ - ロー
ランド・エメリッヒスター・ウォーズエピソード2/クローンの攻撃 - ジョージ・ルーカス」
音声読み上げ

「リンク keita's Favorite Movie お気に入りリンク鑑賞済み映画リンク未鑑賞映画お気に入り
シビル・ウォー／キャプテン・アメリカ - アンソニー・ルッソ/ジョー・ルッソアイアンマン3 - シェー
ン・ブラックバック・トゥ・ザ・フューチャー - ロバート・ゼメキスインディペンデンス・デイ - ロー
ランド・エメリッヒスター・ウォーズエピソード2/クローンの攻撃 - ジョージ・ルーカス」
音声読み上げ
イミフ

今見たのはこのサイト

CSSで見た目が整えられ
晴眼者には構造が理解できる

コンピュータには理解できない

<div class="h1"><a href="index.html">keita's Favorite Movie</a></div>
<div class="nav">
<span class="here">お気に入り</span>
<a href=“done.html”>鑑賞済み映画</a>
<a href=“schedule.html">未鑑賞映画</a>
</div>
<div class="contents">
<div class="title">お気に入り</div>
<div class="list">シビル・ウォー／キャプテン・アメリカ - アンソニー・ルッソ/ジョー・ルッソ</div>
<div class="list">アイアンマン3 - シェーン・ブラック</div>
<div class="list">バック・トゥ・ザ・フューチャー - ロバート・ゼメキス</div>
<div class="list">インディペンデンス・デイ - ローランド・エメリッヒ</div>
<div class="list-last">スター・ウォーズエピソード2/クローンの攻撃 - ジョージ・ルーカス</div>
</div>

リンク：keita's Favorite Movie お気に入りリンク：鑑賞済み映画リンク：未鑑賞映画お気に
入りシビル・ウォー／キャプテン・アメリカ - アンソニー・ルッソ/ジョー・ルッソアイアンマン3 -
シェーン・ブラックバック・トゥ・ザ・フューチャー - ロバート・ゼメキスインディペンデンス・デイ
- ローランド・エメリッヒスター・ウォーズエピソード2/クローンの攻撃 - ジョージ・ルーカス
コンピュータにはこう見える

表だけ整えられたハリボテ

文字列を構造化する
•さっきのサイトはただ文字列が並んでいるだけ
•音声で読み上げるためには、裏側も構造化されHTML
文書として成り立っていなければならない
•サイトが持つ意味をコンピュータが理解できるように
なる、これをセマンティックWebと呼ぶ

<h1><a href="index.html">Keita's Favorite Movie</a></h1>
<nav>
<ul class="nav">
<li><span class="here">お気に入り</span></li>
<li><a href="done.html">鑑賞済み映画</a></li>
<li><a href="schedule.html">未鑑賞映画</a></li>
</ul>
</nav>
<section>
<div class="contents">
<h2>お気に入り</h2>
<ul>
<li>シビル・ウォー／キャプテン・アメリカ - アンソニー・ルッソ/ジョー・ルッソ</li>
<li>アイアンマン3 - シェーン・ブラック</li>
　　　　～省略～
</ul>
</div>
</section>

[題名/リンク：keita’s Favorite Movie]
• ナビゲーション
• お気に入り
• リンク：鑑賞済み映画
• リンク：未鑑賞映画
[お気に入りの章]
• シビル・ウォー／キャプテン・アメリカ - アンソニー・ルッソ/ジョー・ルッソ
• アイアンマン3 - シェーン・ブラック
• 以下省略
コンピュータにはこう見える

「見出しレベル１、アクセスされました、リンク、Keita's Favorite Movie」 
「リスト３項目」
「お気に入り、グループ」
「お気に入り」
「鑑賞済み映画、リンク、グループ」
「リンク、鑑賞済み映画」
「未鑑賞映画、リンク、グループ」
「リンク、未鑑賞映画」
「見出しレベル２、お気に入り」
「リスト３項目」
「シビル・ウォー／キャプテン・アメリカ - アンソニー（以下省略）」
音声読み上げ

構造化されると
構造が伝わるように読み上げられる

[Fork元] Close dropdowns by clicking outside of them (http://codepen.io/CesarGabriel/pen/nLhAa)

jsで実装されている
サブメニューのことを
読み上げてくれない

見た目と読み上げが一致しない

リッチなコンテンツを含むと、
HTMLを正しく記述するだけでは
対応しきれない

WAI-ARIA（ウェイ・アリア）
• 各要素の「Roles (役割)」「States (状態)」
「Properties (特性)」を伝達できる
• 動的なサイトなどリッチコンテンツの場合も見た目だけで
なく構造的に意味を持てるようになる
• コンピュータがページをより正確に認識できる
•aria-haspopup属性など、HTMLに属性を追加し利用する
[出典] 2014年4月15日 (2014年10月13日更新) WAI-ARIA の基礎知識 ̶ Website Usability Info ( http://website-usability.info/2014/04/entry_140415.html )

<div class="dropdown">
<a href="#" class="btn -default js-dropdown">Button</a>
<div class="dropdown-content">
<ul class="menu">
<li><a href="#">Option One</a></li>
<li><a href="#">Option Two</a></li>
<li><a href="#">Option Three</a></li>
</li>
</ul>
</div>
</div>

<div class="dropdown">
<a href="#" class="btn -default js-dropdown”
aria-haspopup="true" aria-expanded="false">Button</a>
<div class="dropdown-content">
<ul class="menu">
<li><a href="#">Option One</a></li>
<li><a href="#">Option Two</a></li>
<li><a href="#">Option Three</a></li>
</li>
</ul>
</div>
</div>

この二つの属性はなに？
• aria-haspopup属性
• ポップアップメニューが存在するかどうかを示す
• true指定でポップアップが存在することを示す
• aria-expanded属性
• 要素の開閉の状態を示す
• true(開いている状態)、false(閉じている状態)を示す
[出典] 2016年9月時点 WAI-ARIA | HTMLリファレンス（http://www.webcreativepark.net/html/wai-aria/）

WAI-ARIAの属性を指定し
サブメニューの存在を
教えてもらえるようになった

知らなすぎる
• 日常的にスクリーンリーダーを使う人たちの傾向を
知らない
• Win含むメジャーどころの確認環境を整える必要
• リーダーとブラウザによる差が掌握できていない
• 今後情報を集めていきたい

画像文字をやめただけでは
対応できたとは言えない

目が見えない状態を想定したUI設計
• サイトのHTMLの文法を正しく。意味とタグの一致
• Webの標準規格（Web標準）に従う
• WAI-ARIAの導入
• スクリーンリーダーによる読み上げテスト

君もペパボで働かないか？
福岡支社勤務のデザイナーを急募中！
https://pepabo.com/recruit/career/#jobs

目が見えない状態を想定したUI設計

More Related Content

What's hot

Viewers also liked

目が見えない状態を想定したUI設計