Upgrade to Pro — share decks privately, control downloads, hide ads and more …

アクセシビリティとこれからのWebデザイン

Rikiya Ihara
April 19, 2016
25

 アクセシビリティとこれからのWebデザイン

Rikiya Ihara

April 19, 2016
Tweet

More Decks by Rikiya Ihara

Transcript

  1. アクセシビリティと
    これからのWebデザイン
    我々はどこに向かうのか

    View full-size slide

  2. 自己紹介
    2

    View full-size slide

  3. 5年ぶりにやってきました
    3
    http://sinap.jp/blog/2010/06/wireframecomwg02-rep1.html

    View full-size slide

  4. 伊原力也
    BA
     シニア・インフォメーションアーキテクト
     デザインリサーチ、IA、Ix / UIデザイン
    その他
     HCD-Net 認定人間中心設計専門家
     ウェブアクセシビリティ基盤委員会 WG1 委員
    4

    View full-size slide

  5. ご購読ありがとうございます
    5
    http://www.amazon.co.jp/dp/4862462650 http://www.amazon.co.jp/dp/4862462669

    View full-size slide

  6. 本日の流れ
    6

    View full-size slide

  7. 本日の流れ
    前編:アクセシビリティとは
    後編:Webアクセシビリティ概論
    質疑応答タイム
    7

    View full-size slide

  8. 前編:アクセシビリティとは
    8

    View full-size slide

  9. アクセシビリティという言葉
    9

    View full-size slide

  10. アクセシビリティって
    なんですか?
    突然の質問!
    10

    View full-size slide

  11. Googleで「accessibility」を検索
    11

    View full-size slide

  12. Twitterで「アクセシビリティ」を検索
    12

    View full-size slide

  13. あるツイート
    13
    https://twitter.com/ori_io/status/659891177353666560

    View full-size slide

  14. ソニーいわく
    14
    http://www.sony.co.jp/SonyInfo/accessibility/

    View full-size slide

  15. fladdict深津さんいわく
    15
    http://staffblog.news.yahoo.co.jp/newshack/realnewshack_0917_part2.html

    View full-size slide

  16. アクセシビリティの定義(辞書)
     access
     接近,入場,通路、入口、入手,利用
     accessible
     近づきやすい,行きやすい
    入手しやすい,利用できる,理解しやすい
     accessibility
     近づきやすさ,行きやすさ
    入手しやすさ,利用しやすさ,理解しやすさ
    16

    View full-size slide

  17. アクセシビリティの定義(ISO 9241-20)
    様々な能力を持つ幅広い層の人々に対する、
    製品、サービス、環境または施設の
    ユーザビリティ。
    the usability of a product, service, environment or facility by
    people with the widest range of capabilities.
    17

    View full-size slide

  18. ユーザビリティの定義(辞書)
    use
     使う,用いる,使用する,利用する
    usable
     用いることができる,使用に適した,便利な
    usability
     使用性,使い勝手,利用可能性,使い易さ
    18

    View full-size slide

  19. ユーザビリティの定義(ISO 9241-11)
    特定の目的を達成するために、
    特定の利用者が、特定の利用状況で、
    有効性、効率性、そして満足とともに
    ある製品を利用することができる度合い。
    Extent to which a product can be used by specified users to
    achieve specified goals with effectiveness, efficiency and
    satisfaction in a specified context of use.
    19

    View full-size slide

  20. ユーザビリティとアクセシビリティ
    20
    ユーザビリティ アクセシビリティ
    Use
    Use
    Goal
    特定ケースでの「使える度」 「使える度」を束ねた「幅広さ」

    View full-size slide

  21. アクセシビリティは尺度
    特定ケースの「使える度」
    それを束ねた「幅広さ」
    他の意味は文脈によって付与されている
     探しやすさ、見つけやすさ、買いやすさ、
    持ち運びやすさ、再利用しやすさ……
     高齢者・障害者向け、福祉、ボランティア……
     情報、デジタル、Web、iOS ……
    21

    View full-size slide

  22. 間違いではなく、文脈の違い
    アクセシビリティの指す範囲は広大
    それぞれの分野やレイヤーの
    「アクセシビリティ」がある
    文脈を知ることが重要
    22

    View full-size slide

  23. 身近にあるアクセシビリティ
    23

    View full-size slide

  24. 事例:視覚に関わるもの
    24
    https://www.jisc.go.jp/policy/KIDS-HP/kuizu/kaitou-1.html
    http://www.hatabe-cs.com/archives/269/ http://www.kao.com/jp/corp_news/2015/20150310_002.html
    http://homepage2.nifty.com/okonomigaki/2007-06/p5.html

    View full-size slide

  25. 事例:聴覚に関わるもの
    25
    http://haya.moo.jp/nancho/chaim.html
    https://obun.jp/original/nuboard/ http://www.jiritsu.com/products/detail.php?id=66
    http://design.art.nihon-u.ac.jp/archives/2011/11/11/183

    View full-size slide

  26. 事例:上半身に関わるもの
    26
    http://www.itmedia.co.jp/lifestyle/articles/1301/15/news129.html
    http://m.aumall.jp/item/224739946 http://www.suntory.co.jp/news/2006/9343.html
    http://www.qunetto.co.jp/examples/

    View full-size slide

  27. 事例:子どもや医療に関わるもの
    27
    http://lohaco.jp/product/1257018/
    http://www.cotta.jp/products/detail.php?product_id=009414 http://www.oxojapan.com/p-504-angled-measuring-cup-1-cup.aspx
    http://www.thegoldenconcepts.com/products/sabi-holster

    View full-size slide

  28. 事例:男坂と女坂
    28
    http://mttakaomagazine.com/archives/338

    View full-size slide

  29. 事例:車椅子用スロープ
    29
    http://yosf.cocolog-nifty.com/blog/2009/09/post-26d3.html

    View full-size slide

  30. 事例:エレベーターの鏡
    30
    http://annakachiro.gunmablog.net/e177526.html

    View full-size slide

  31. 事例:さまざまな自転車
    31
    http://trike-shop.jp/

    View full-size slide

  32. アクセシビリティが向上すると?
    誰かの便利は、ほかの人も便利でもある
     狙ってる場合もあれば、偶然の場合もある
    使える人が多くなれば、チャンスが増える
     アクセスできると、全体のパイが広がる
    利用機会が増えると、定番化しやすくなる
     あって当たり前、前提のものになっていく
    32

    View full-size slide

  33. なぜそうなるのか?
    人間は変化するから
     一時的障害
     自身の変化
     周囲の変化
    広い範囲で使えるものは、
    人生のどこかのステージでフィットする
    33

    View full-size slide

  34. 一時的障害
    誰もが状況によって能力が変化する
     視覚障害:眼鏡の破損、周りが暗い、サングラス
     四肢障害:腱鞘炎、骨折、けが
     聴覚障害:オフィス、電車内、街中
     認知障害:酔っ払い、徹夜、海外旅行
    その瞬間は、継続する障害と変わらない
    34

    View full-size slide

  35. 自身の変化
    誰もが成長し、また加齢する
    能力のバランスが年を追うごとに変化
     視力、聴力、運動能力、反射神経、
    記憶力、認知力、経験……
    その時々で使えるものが変わる
    35

    View full-size slide

  36. 周囲の変化
    家族構成や関わり方が変わる
     出産、育児、ペット、独立、病気、介護……
    住む場所が変わる
     国、地域、気温、移動手段……
    36

    View full-size slide

  37. アクセシビリティをデザインする
    偶然を待たず因数分解→ 設計思想へ
    代表的な3つの考え方
     バリアフリーデザイン
     ユニバーサルデザイン
     インクルーシブデザイン
    37

    View full-size slide

  38. バリアフリーデザイン
    Barrier : 障害 free : 取り除く
    古来からある考え方
    特徴
     別の補助を付け足す、または何かをはずすと
    使える状況が増える
     小回りが効きにくく、整合性が低くなりやすい
     日本ではこれをユニバーサルデザインと呼びがち
    38

    View full-size slide

  39. すごくバリアフリー=ユニバーサル?
    39
    http://www.tef.or.jp/renewal/album.html

    View full-size slide

  40. ユニバーサルデザイン
    universal : 万人の,全員の,普遍的な
    米国発(1985年~)
    特徴
     1つのもので最大公約数を狙う
     UD7原則をデザイン指針としてチェック
     有効度・効率・満足さも上がりやすい
     上手くやらないと中途半端なものができる
    40

    View full-size slide

  41. ロナルド・メイスのUD7原則
    1. 誰でも公平に使えること
    2. 使う上での自由度が高いこと
    3. 使いかたが簡単で、直感的に理解できること
    4. 必要な情報がすぐに見つかること
    5. うっかりミスや危険につながらないこと
    6. 身体への負担が軽く、楽に使えること
    7. 接近や利用のための十分な大きさと広さがあること
    41

    View full-size slide

  42. インクルーシブデザイン
    inclusive : すべてを含んだ,包括した.
    英国発(1991年~)
    特徴
     極端ユーザーの潜在ニーズに着目
     ユーザーと共に発想、プロトタイピング
     その手があったか的なアウトプット
     アウトプットを事前に予想しにくい
    42

    View full-size slide

  43. 極端ユーザーの潜在ニーズから発想
    43
    http://www.projectdesign.jp/201409/tool/001603.php

    View full-size slide

  44. 極端ユーザーとの共創
    44
    http://i-d-sol.com/ http://i-d-sol.com/inclusivedesign/ http://yukianzai.com/blog/2012/02/11/163/

    View full-size slide

  45. 情報アクセシビリティとWeb
    45

    View full-size slide

  46. プロダクト=ハードの価値
    プロダクトの価値は「モノの形」に依存する
     モノの価値は、機能面や、感性面での品質
     それはハードと不可分(モノの形そのもの)
    プロダクトのアクセシビリティも
    「モノの形」に依存する
    46

    View full-size slide

  47. 情報≒ ソフトの価値
    情報の価値は「モノの形」に依存しにくい
     情報と入れ物を分離できる
     入れ物を変えることで多態性を獲得できる
    情報のアクセシビリティは
    「入れ物」を変えることでチェンジできる
    47

    View full-size slide

  48. 例: 小説、エッセイ、ノンフィクション
    48

    View full-size slide

  49. 入れ物によって変化するアクセシビリティ
    入れ物によって変わるもの
     探しやすさ、見つけやすさ、買いやすさ、
    持ち運びやすさ、再利用しやすさ……
    つまり、アクセシビリティは重層構造
    これらもアクセシビリティの構成要素
    49

    View full-size slide

  50. 情報アクセシビリティのレイヤー
    50
    robustness
    findability
    portability
    usability
    shareability
    hackability
    頑健: 存在が維持される
    発見: 特定できる、探し出せる
    携帯: 持ち運べる、呼び出せる
    使用: 知覚・理解・操作、目的達成
    共有: 誰かに渡せる、共有できる
    改変: 加工できる、再利用できる

    View full-size slide

  51. アクセシビリティは総力戦
    いわゆる障害者高齢者対応は
    「使用」レイヤーのうち、さらに一部の話
    前後のレイヤーも含めて考えると?
     すべての本を大活字本にはできない
     出版しても探せなければ意味がない
     買えなければ手元に置けない
     持ち歩けなければ読めない
    51

    View full-size slide

  52. 根本からユニバーサルな対応を行うには?
    情報と入れ物が分離できても、
    やはり「モノの形」の制約を受ける
    もっと根本的に、情報の利用機会を
    増やす方法はないのだろうか?
    そのような発想で作られた
    プラットフォームこそが……Web!
    52

    View full-size slide

  53. Webの本質
    Webの力はその普遍性にあります。
    障害の有無にかかわらず誰もがアクセスできる
    というのがWebの本質的な側面なのです。
    The power of the Web is in its universality. Access by
    everyone regardless of disability is an essential aspect.
    http://www.w3.org/standards/webdesign/accessibility
    53

    View full-size slide

  54. よくある「Webのしくみ」
    54
    http://www.soumu.go.jp/main_sosiki/joho_tsusin/security/basic/service/03.html

    View full-size slide

  55. 実はここまでプラットフォームが保障している
    55
    robustness
    findability
    portability
    頑健: 存在が維持される
    発見: 特定できる、探し出せる
    携帯: 持ち運べる、呼び出せる

    View full-size slide

  56. この時点ですでに圧倒的なアクセシビリティ
    時間・空間・デバイスを超えてアクセス可能
     インターネット:途中の経路が死んでも迂回できる
     URL:コンテンツの場所が一意に特定できる
     HTTP:仕様に沿えば誰でもプログラムが作れる
     リンク:情報同士が結びついており探し出しやすい
    ※さらにGoogle検索が穴を埋めている
    Webに情報があるだけで圧倒的アクセシブル
    56

    View full-size slide

  57. 正しくコンテンツを作ればここも保障される
    57
    usability
    shareability
    hackability
    使用: 知覚・理解・操作、目的達成
    共有: 誰かに渡せる、共有できる
    改変: 加工できる、再利用できる

    View full-size slide

  58. 後編:Webアクセシビリティ概論
    58

    View full-size slide

  59. Webアクセシビリティの根幹
    59

    View full-size slide

  60. Webアクセシビリティって
    なんですか?
    突然の質問!
    60

    View full-size slide

  61. マシンリーダブルとヒューマンリーダブル
    61
    http://web-tan.forum.impressrd.jp/e/2012/05/17/12727

    View full-size slide

  62. プレーンテキスト
     ■デザイニングWebアクセシビリティ
    ●訴求ポイント(この本が既存の本と異なる点)
    ・「ガイドライン対策」ではなく、実際にコンテンツをアクセシブルにするための実
    践的な内容
    ・解決アプローチの例として、実際に公開されているサイトの実例を多数紹介
    ・上流から下流まで、制作プロセスの全てをカバー
    ・デザイン、実装だけではなく、戦略や設計のプロセスにおける取り組みを重視
    ●取り組みの背景
    ウェブコンテンツは本来、ユニバーサルなものです。PCのブラウザで閲覧するだけで
    なく、スマートフォンでアクセスしたり、合成音声で読み上げたり、点字で出力した
    りと、ユーザーの状況に併せてさまざまな形に変えながらアクセスすることができま
    す。
    62

    View full-size slide

  63. HTMLでマークアップ



    デザイニングWebアクセシビリティ


    デザイニングWebアクセシビリティ
    訴求ポイント(この本が既存の本と異なる点)

    「ガイドライン対策」ではなく、実際にコンテンツをアクセシブルにするための実践的な内容
    解決アプローチの例として、実際に公開されているサイトの実例を多数紹介
    上流から下流まで、制作プロセスの全てをカバー
    デザイン、実装だけではなく、戦略や設計のプロセスにおける取り組みを重視

    取り組みの背景
    ウェブコンテンツは本来、ユニバーサルなものです。PCのブラウザで閲覧するだけでなく、スマートフォンでアクセスした
    り、合成音声で読み上げたり、点字で出力したりと、ユーザーの状況に併せてさまざまな形に変えながらアクセスすることがで
    きます。


    63

    View full-size slide

  64. これがWebアクセシビリティの根幹
    Webアクセシビリティの根幹は
    マシンリーダブルなテキスト
     誰にでも伝わる最強の表現方法は「テキスト」
     テキストをマークアップすると
    意味が明確になり、機械が解釈可能になる
     ユーザーエージェントや支援技術といった
    プログラムを通して利用可能な形に変換できる
    64

    View full-size slide

  65. ユーザーエージェントとは
    ユーザーの代理
     ユーザーに成り代わってWebにアクセスする
    ブラウザはユーザーエージェントの一種
     ブラウザ以外にもいろいろある
    65

    View full-size slide

  66. ビジュアルブラウザ(Firefox)
    66

    View full-size slide

  67. テキストブラウザ(w3m)
    67

    View full-size slide

  68. ダウンローダー(SiteSucker)
    68

    View full-size slide

  69. クローラー(Googlebot)
    69

    View full-size slide

  70. もっと自分に合った姿に変える
    OSの設定を変えたり、
    「支援技術」を用いると、
    さらに自分に合った姿に変えられる!
    70

    View full-size slide

  71. ハイコントラストモード
    71

    View full-size slide

  72. 拡大ツール(Windows拡大鏡)
    72

    View full-size slide

  73. スクリーンリーダー(NVDA)
    73

    View full-size slide

  74. スクリーンリーダー(VoiceOver)
    74

    View full-size slide

  75. 代替マウス
    75

    View full-size slide

  76. 点字ディスプレイ
    76

    View full-size slide

  77. 視線入力装置
    77

    View full-size slide

  78. 分かれているから選択肢が増やせる
    78
    プロダクト
    情報 入れ物
    情報 デバイス
    Web
    情報
    ユーザー
    エージェント
    Web デバイス
    情報
    ユーザー
    エージェント
    Web デバイス
    支援技術

    View full-size slide

  79. Webアクセシビリティガイドライン
    79

    View full-size slide

  80. Webアクセシビリティって
    なんですか?
    突然の質問!
    80

    View full-size slide

  81. Web Content Accessibility Guidelines (WCAG)
    81
    https://www.w3.org/TR/WCAG20/

    View full-size slide

  82. JIS-X 8341-3:2016
    82

    View full-size slide

  83. WCAG 2.0
    Webコンテンツのアクセシビリティ規格
     W3Cが勧告している標準規格
     JIS規格(JIS-X 8341-3:2016)と一致
    対象はWebサイトだけじゃない
     Web技術に関わるコンテンツは全て該当
     アプリのWebView、HTMLヘルプ、
    キオスク端末のHTML、 Web上のPDF 、EPUB……
    83

    View full-size slide

  84. レベルA
    どんなサイトも満たすべき、最低限の基準
     この基準を満たせないと、支援技術を駆使しても
    全くアクセスできなくなる場合がある
     25項目の基準
     非テキストコンテンツにテキストを用意する、
    キーボードでも操作できるようにする、など
    84

    View full-size slide

  85. レベルA≒ テキスト提供、機械可読、キーボード
    85
    http://web-tan.forum.impressrd.jp/e/2012/05/17/12727

    View full-size slide

  86. レベルAA
    望ましい基準
     この基準を満たすと、支援技術を駆使しなくても
    多くの環境でアクセスできるようになる
     13項目の基準
     最低限のカラーコントラスト、文字サイズなど
    86

    View full-size slide

  87. レベルAAA
    発展的な基準
     この基準を満たすと、
    よりアクセスしやすくなることがある
     23項目の基準
     レベルA~AAの基準を厳しくしたものに加え、
    わかりやすい言葉を使う、など
    87

    View full-size slide

  88. レベルAA~:見やすさ、読みやすさ、分かり易さ
    88
    http://web-tan.forum.impressrd.jp/e/2012/05/17/12727

    View full-size slide

  89. 意外とこんな話が含まれている
    89
    http://www.amazon.co.jp/dp/4062574438

    View full-size slide

  90. 意外とこんな話が含まれている
    90
    http://www.amazon.co.jp/dp/4873114101

    View full-size slide

  91. 意外とこんな話が含まれている
    91
    http://www.amazon.co.jp/dp/4839928401

    View full-size slide

  92. 意外とこんな話が含まれている
    92
    http://rosenfeldmedia.com/books/web-form-design/

    View full-size slide

  93. 意外とこんな話が含まれている
    93
    http://sinap.jp/blog/2015/04/efo01.html

    View full-size slide

  94. IA/UXにつながるW3C公式テキストという考え方
    94
    https://twitter.com/storywriter/status/625297980212445185

    View full-size slide

  95. Webアクセシビリティに取り組む理由

    View full-size slide

  96. Web担当者の認識
    96
    https://www.wab.ne.jp/wab_sites/contents/2335

    View full-size slide

  97. 利益を上げるため
    効率よくビジネスを回す下地となる
     利用できる状況が最大化される
     ファネルの最大化、機会損失の防止
     コンテンツの再利用性が上がる
     オペレーションコストが下がる
    対応しないこと=見えないコスト流出と同義
    97

    View full-size slide

  98. 体験を向上するため
    使いやすいと感じるユーザーが増加する
     知覚、理解、操作のハードルが下がる
     多くの状況での有効度、効率、満足さが改善
    指名買いするユーザーが現れる
     アクセシブルなもの以外は使えないユーザーがいる
     他ではできないことができた → ロイヤリティ最大
     コミュニティ内での推奨意向もアップ
    98

    View full-size slide

  99. 高齢者のインターネット利用率増加
    99
    http://www.soumu.go.jp/johotsusintokei/whitepaper/ja/h27/html/nc122000.html

    View full-size slide

  100. 高齢者のネットショッピング利用率増加
    100
    http://www.soumu.go.jp/johotsusintokei/whitepaper/ja/h27/html/nc122000.html

    View full-size slide

  101. 障害者のインターネット利用率の高さ
    101
    http://barrierfree.nict.go.jp/relate/statistics/hc_internet.html

    View full-size slide

  102. 将来に対応するため
    新しいデバイスに取り急ぎ対応できる
     作法を守れば未知のデバイスでも利用できるはず
     ユーザーへのサービス中断を回避できる
     漸進的な対応により突発的なコスト発生を抑止
     最適化を行うための準備や検証が可能になる
    102

    View full-size slide

  103. Thoughts on Flash
    103
    http://www.apple.com/hotnews/thoughts-on-flash/

    View full-size slide

  104. Web担当者の認識
    104
    https://www.wab.ne.jp/wab_sites/contents/2335

    View full-size slide

  105. 主観:じわじわきてる
    海外では法制化でWCAG準拠が前提に
    大企業、公共系、グローバル案件で前提に
    障害者差別解消法が2016年4月に施行
    上記に伴い「アクセシビリティ方針」増加
    ピンク本もコンスタントに出荷中
    105

    View full-size slide

  106. 海外では法制化でWCAG準拠が前提に
    106
    https://www.wab.ne.jp/wab_sites/contents/2334

    View full-size slide

  107. 大企業、公的機関、グローバル案件では前提に
    とりあえずRFPには入っている
    (詳しくは口頭で)
    107

    View full-size slide

  108. 障害者差別解消法が2016年4月に施行
    108
    http://www8.cao.go.jp/shougai/suishin/sabekai_wakariyasui.html

    View full-size slide

  109. 「アクセシビリティ方針」の掲載も増加中
    109
    https://twitter.com/search?q=%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B7%E3%83%93%E3%83%AA%E3%83
    %86%E3%82%A3%E6%96%B9%E9%87%9D%20from%3Awaic_jp&src=typd&lang=ja

    View full-size slide

  110. ピンク本、好調推移中
    110

    View full-size slide

  111. 参考:ミツエーリンクス社の考え方
    111
    http://www.slideshare.net/mlca11y/ss-52115490

    View full-size slide

  112. これからのWebデザイン
    112

    View full-size slide

  113. The Web is dead.
    113
    http://wired.jp/2014/01/16/death-pc-also-mean-end-web/

    View full-size slide

  114. ブラウザを超えていくWeb
    アプリから参照するWeb
    APIやデータとしてのWeb
    ウェアラブルデバイスとWeb
    Webof Things
    もはやブラウザでの「View」はサブ扱い
    114

    View full-size slide

  115. その終着点は
    視覚デザインから開放され、
    多態性への対応こそが「Webデザイン」に
    時にViewを伴い、時にSNSに流れ、
    時に一片のデータにもなる
    コンテキストに沿って活用される情報を
    どうデザインするか、というフェーズへ
    115

    View full-size slide

  116. 流通しやすい
    マシンリーダブルな
    コンテンツを作っていくこと
    次のWebに必要な考え方
    116

    View full-size slide

  117. 積極的に
    多様なアクセスのかたちを
    デザインしていくこと
    次のWebに必要な考え方
    117

    View full-size slide

  118. そのデザインに必要な視点
    118
    http://intertwingled.org/jp/

    View full-size slide

  119. ありがとうございました
    質疑応答タイムに続く!
    119

    View full-size slide