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

Transcript

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

   View Slide

2. 自己紹介
   2
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

6. 本日の流れ
   6
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

11. Googleで「accessibility」を検索
    11
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View 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 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 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 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

69. クローラー(Googlebot)
    69
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

75. 代替マウス
    75
    

    View Slide

76. 点字ディスプレイ
    76
    

    View Slide

77. 視線入力装置
    77
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

82. JIS-X 8341-3:2016
    82
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View 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 Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide