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

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

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

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

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

6.
個人では

7.
本題

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

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

10.
あれ？

11.
そうなんだっけ？？

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

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

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

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

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

17.
弱視者の見え方の例（イメージ・個人差あり）
晴眼者 視野狭窄 白濁または霧視
低い視力 暗順応障害 羞明
[参考文献] 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）

18.
割合はどれくらい？

19.
視覚障害者の割合・補足
•視覚障害者は日本全国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 )

20.
ネットの利用方法

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

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

23.
VoiceOverに注目

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

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

26.
視覚なしで
得られる情報

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

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

29.
今見たのはこのサイト

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

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

32.
<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>

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

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

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

36.
構造化後のコード

37.
<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>

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

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

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

41.
しかし

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

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

44.
[Fork元] Close dropdowns by clicking outside of them (http://codepen.io/CesarGabriel/pen/nLhAa)
jsで実装されている
サブメニューのことを
読み上げてくれない

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

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

47.
そこで

48.
WAI-ARIA

49.
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 )

50.
[Fork元] Close dropdowns by clicking outside of them (http://codepen.io/CesarGabriel/pen/nLhAa)
<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>

51.
[Fork元] Close dropdowns by clicking outside of them (http://codepen.io/CesarGabriel/pen/nLhAa)
<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>

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

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

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

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

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

57.
所感

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

59.
まとめ

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

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

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

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