Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

3,374 views

Published on

Design Casual Talks #1 http://dct.connpass.com/event/36278/ で発表したスライドです。
このスライドについて書いた記事は http://blog.orangebomb.org/blog/2016/11/29/web-accessibility/ こちら。

Published in: Design
  • Be the first to comment

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

  1. 1. 川本 圭太 / GMO PEPABO inc. 2016.09.20 Design Casual Talks #1 目が見えない状態を 想定したUI設計
  2. 2. デザイナー 川本 圭太 @keita_kawamoto GMOペパボ ホスティング事業部 @keita_kawamoto
  3. 3. GMOペパボ “もっとおもしろくできる”
 “インターネットで可能性 をつなげる、ひろげる” • ひとりひとりが持つ力や可能性をひろ げる • インターネットと表現の可能性を追求 • いろんな人たちがインターネットで可 能性を開花し、活躍できるための環境 を創造
  4. 4. ほかには ラップとか社内イベントとか Rubyとかデスメタルとか
  5. 5. 詳しくは “ペパボ”で検索!!!!
  6. 6. 個人では
  7. 7. 本題
  8. 8. ある疑問が生まれたのは 今から少し前…
  9. 9. 「画像文字をやめたから、 視覚障害者にも優しい設計に なったと言えます」
  10. 10. あれ?
  11. 11. そうなんだっけ??
  12. 12. 答えがわからないぞ???
  13. 13. 「知らない」問題 •「見える」インターフェイスにばかり注力 • 視覚障害者への対応に向き合ったことがない • img要素のalt設定もルールに従っているだけ • むしろaltは画像読み込み失敗時用という認識 • 視覚障害者について、具体的なことを何も知らない
  14. 14. 視覚障害者とは?
 調べてみた
  15. 15. 視覚障害者の概要 • 視覚が 弱い もしくは 全く無い 人たちのこと • 残存視覚がある人を弱視者(ロービジョン)と呼ぶ • 視覚をもたない人を盲/全盲(ブラインドネス)と呼ぶ • 正常な視覚をもつ人を晴眼者と呼ぶ • 行動の傾向:近代のアクセシビリティ向上によって健常者 と変わらない活動が可能になりつつある [出典] 2016年9月時点 https://ja.wikipedia.org/wiki/視覚障害者
  16. 16. 視覚障害者の概要 • 視覚以外に聴覚・触覚等の重複障害も多い • 全盲よりも弱視の割合のほうが多い(7割) • 弱視者の見え方は一通りではない • 時間帯や光の加減などの条件変化に視覚も左右される • WHOの弱視の定義は、「両眼に眼鏡をかけた矯正視力が 0.05以上0.3未満」 [出典] 2016年9月時点 視覚障害とは - 公益財団法人 関西盲導犬協会(http://www.kansai-guidedog.jp/knowledge/disease/)
  17. 17. 弱視者の見え方の例(イメージ・個人差あり) 晴眼者 視野狭窄 白濁または霧視 低い視力 暗順応障害 羞明 [参考文献] 2016年9月時点 視覚障害とは - 高知県立盲学校(http://www.kochinet.ed.jp/mo-s/mt/post-28.html)
 [参考文献] 2016年9月時点 2-1 視覚障害とは - 秋田県立視覚支援学校(http://kagayaki.akita-pref.ed.jp/shikaku-s/detail.html?id=361&category_id=61)
  18. 18. 割合はどれくらい?
  19. 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. 20. ネットの利用方法
  21. 21. 見え方も違えば、ニーズも違う • 視野狭窄、白濁などケースの多さに対しニーズも多い • グレースケール・カラー反転させることでまぶしさを軽減 • コントラストをはっきりさせ視認性向上 • 拡大鏡で任意の場所を拡大 • 設定の組み合わせで様々なケースに対応 • 画面を最適化してブラウジング [出典] 2016年9月時点 視覚障害とは - 高知県立盲学校(http://www.kochinet.ed.jp/mo-s/mt/post-28.html)より参考箇所あり
  22. 22. 今回はApple製 Mac用スクリーンリーダー
  23. 23. VoiceOverに注目
  24. 24. スクリーンリーダー? • コンピュータの画面読み上げソフトウェア • Windowsでは以下のソフトがメジャー • NVDA • JAWS • PC-Talker • MacではVoiceOver
  25. 25. まずは用意したものを スクリーンリーダーで見てみる
  26. 26. 視覚なしで 得られる情報
  27. 27. 「リンク keita's Favorite Movie お気に入り リンク 鑑賞済み映画 リンク 未鑑賞映画 お気に入り シビル・ウォー/キャプテン・アメリカ - アンソニー・ルッソ/ジョー・ルッソ アイアンマン3 - シェー ン・ブラック バック・トゥ・ザ・フューチャー - ロバート・ゼメキス インディペンデンス・デイ - ロー ランド・エメリッヒ スター・ウォーズ エピソード2/クローンの攻撃 - ジョージ・ルーカス」 音声読み上げ
  28. 28. 「リンク keita's Favorite Movie お気に入り リンク 鑑賞済み映画 リンク 未鑑賞映画 お気に入り シビル・ウォー/キャプテン・アメリカ - アンソニー・ルッソ/ジョー・ルッソ アイアンマン3 - シェー ン・ブラック バック・トゥ・ザ・フューチャー - ロバート・ゼメキス インディペンデンス・デイ - ロー ランド・エメリッヒ スター・ウォーズ エピソード2/クローンの攻撃 - ジョージ・ルーカス」 音声読み上げ イミフ
  29. 29. 今見たのはこのサイト
  30. 30. CSSで見た目が整えられ 晴眼者には構造が理解できる
  31. 31. コンピュータには理解できない
  32. 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. 33. リンク:keita's Favorite Movie お気に入り リンク:鑑賞済み映画 リンク:未鑑賞映画 お気に 入りシビル・ウォー/キャプテン・アメリカ - アンソニー・ルッソ/ジョー・ルッソアイアンマン3 - シェーン・ブラックバック・トゥ・ザ・フューチャー - ロバート・ゼメキスインディペンデンス・デイ - ローランド・エメリッヒスター・ウォーズ エピソード2/クローンの攻撃 - ジョージ・ルーカス コンピュータにはこう見える
  34. 34. 表だけ整えられたハリボテ
  35. 35. 文字列を構造化する •さっきのサイトはただ文字列が並んでいるだけ •音声で読み上げるためには、裏側も構造化されHTML 文書として成り立っていなければならない •サイトが持つ意味をコンピュータが理解できるように なる、これをセマンティックWebと呼ぶ
  36. 36. 構造化後のコード
  37. 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. 38. [題名/リンク:keita’s Favorite Movie] • ナビゲーション • お気に入り • リンク:鑑賞済み映画 • リンク:未鑑賞映画 [お気に入りの章] • シビル・ウォー/キャプテン・アメリカ - アンソニー・ルッソ/ジョー・ルッソ • アイアンマン3 - シェーン・ブラック • 以下省略 コンピュータにはこう見える
  39. 39. 「見出しレベル1、アクセスされました、リンク、Keita's Favorite Movie」
 「リスト3項目」 「お気に入り、グループ」 「お気に入り」 「鑑賞済み映画、リンク、グループ」 「リンク、鑑賞済み映画」 「未鑑賞映画、リンク、グループ」 「リンク、未鑑賞映画」 「見出しレベル2、お気に入り」 「リスト3項目」 「シビル・ウォー/キャプテン・アメリカ - アンソニー(以下省略)」 音声読み上げ
  40. 40. 構造化されると 構造が伝わるように読み上げられる
  41. 41. しかし
  42. 42. [Fork元] Close dropdowns by clicking outside of them (http://codepen.io/CesarGabriel/pen/nLhAa)
  43. 43. [Fork元] Close dropdowns by clicking outside of them (http://codepen.io/CesarGabriel/pen/nLhAa)
  44. 44. [Fork元] Close dropdowns by clicking outside of them (http://codepen.io/CesarGabriel/pen/nLhAa) jsで実装されている サブメニューのことを 読み上げてくれない
  45. 45. 見た目と読み上げが一致しない
  46. 46. リッチなコンテンツを含むと、 HTMLを正しく記述するだけでは 対応しきれない
  47. 47. そこで
  48. 48. WAI-ARIA
  49. 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. 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. 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. 52. この二つの属性はなに? • aria-haspopup属性 • ポップアップメニューが存在するかどうかを示す • true指定でポップアップが存在することを示す • aria-expanded属性 • 要素の開閉の状態を示す • true(開いている状態)、false(閉じている状態)を示す [出典] 2016年9月時点 WAI-ARIA | HTMLリファレンス(http://www.webcreativepark.net/html/wai-aria/)
  53. 53. [Fork元] Close dropdowns by clicking outside of them (http://codepen.io/CesarGabriel/pen/nLhAa)
  54. 54. [Fork元] Close dropdowns by clicking outside of them (http://codepen.io/CesarGabriel/pen/nLhAa)
  55. 55. [Fork元] Close dropdowns by clicking outside of them (http://codepen.io/CesarGabriel/pen/nLhAa)
  56. 56. WAI-ARIAの属性を指定し サブメニューの存在を 教えてもらえるようになった
  57. 57. 所感
  58. 58. 知らなすぎる • 日常的にスクリーンリーダーを使う人たちの傾向を 知らない • Win含むメジャーどころの確認環境を整える必要 • リーダーとブラウザによる差が掌握できていない • 今後情報を集めていきたい
  59. 59. まとめ
  60. 60. 「画像文字をやめたから、 視覚障害者にも優しい設計に なったと言えます」
  61. 61. 画像文字をやめただけでは 対応できたとは言えない
  62. 62. 目が見えない状態を想定したUI設計 • サイトのHTMLの文法を正しく。意味とタグの一致 • Webの標準規格(Web標準)に従う • WAI-ARIAの導入 • スクリーンリーダーによる読み上げテスト
  63. 63. 君もペパボで働かないか? 福岡支社勤務のデザイナーを急募中! https://pepabo.com/recruit/career/#jobs

×