あなたの価値を高めるWebアクセシビリティ

Transcript

1. あなたの価値を高める Webアクセシビリティ Rikiya Ihara | BA
2. 伊原力也 @magi1125 BA（ビジネス・アーキテクツ） ユーザー調査、情報設計、UIデザイン ウェブアクセシビリティ基盤委員会 WG1委員 HCD‑Net 評議委員、認定人間中心設計専門家
4. 目次 1 導入：アクセシビリティの温度感 前編：アクセシビリティ概論 後編：アクセシビリティとビジネス 終わりに：どこから取り組むべきか？
5. Q：アクセシビリティについて 仕様書を見てはいないが 感覚的に意識している （100人、51%）
6. 24位：アクセシブルなサイト構築 3位：優れたユーザビリティ設計 2位：優れたインターフェイス／ナビゲーション設計 1位：JavaScript Q：近いうちに習得したいものは？
7. Web制作者がアクセシビリティに 取り組む価値とは？
8. access + ability アクセスできる度合い
9. Googleで「accessibility」を検索 5
10. アクセシビリティ ＝障害者・高齢者対応？
11. 腱鞘炎でマウスが持てない Bluetoothイヤホンが電池切れ 子どもにメガネを壊された
12. アクセシビリティ ＝使えるかどうか？ 使いものになるか 使えるか accessible usable
13. remote control pig pile https://www.flickr.com/photos/redjar/136216456/
14. ISO 9241‑11 のユーザビリティ定義 特定の目的を達成するために、 特定の利用者が、特定の利用状況で、 有効性、効率性、そして満足とともに ある製品を利用することができる度合い。
15. 様々な能力を持つ幅広い層の人々に対する、 製品、サービス、環境または施設のユーザビリティ。 ISO 9241‑20 のアクセシビリティ定義
16. ユーザビリティ アクセシビリティ Use Use ある状況での使える度 使える度合いの幅広さ
17. アクセシビリティ ＝ユーザビリティの幅広さ
18. Webアクセシビリティの解剖
19. Web Content Accessibility Guidelines (WCAG)2.0 36 https://www.w3.org/TR/WCAG20/
20. WCAG 2.0 W3Cが勧告している標準規格  ISO/IEC 40500:2012、JIS X 8341-3:2016と一致 Web技術を使ったコンテンツはすべて対象  アプリのWebView、HTMLヘルプ、イントラネット、 キオスク端末のHTML、 Web上のPDF 、EPUB…… 3つのレベルがある  レベルA（シングルA）は必ず守るべきもの 40
21. 素人とは違う、Webプロフェッショナルの 仕事としてのWebコンテンツ開発を考えてみた http://web‑tan.forum.impressrd.jp/e/2012/05/17/12727
22. ヒューマンリーダブル 人の目で見やすいか、わかりやすいか ひとつの表現で幅広く使えるようにする 物理的な製品のユニバーサルデザインに近い
23. レベルAA~：見やすさ、読みやすさ、分かり易さ 45 http://web-tan.forum.impressrd.jp/e/2012/05/17/12727
24. コンテンツを、利用者にとって見やすく、聞きやすいものにすること。 これには、前景と背景を区別することも含む。 1.4 判別可能 1.知覚可能
25. 利用者がナビゲートしたり、コンテンツを探し出したり、 現在位置を確認したりすることを手助けする手段を提供すること。 2.4 ナビゲーション可能 発作を引き起こすようなコンテンツを設計しないこと。 2.3 発作の防止 利用者がコンテンツを読み、使用するために十分な時間を提供すること。 2.2 十分な時間 2:操作可能
26. テキストのコンテンツを読みやすく理解可能にすること。 ウェブページの表示や挙動を予測可能にすること。 利用者の間違いを防ぎ、修正を支援すること。 3.1 読みやすさ 3.2 予測可能 3.3 入力支援 3:理解可能
27. Web Content Accessibility Guidelines (WCAG) 2.0 イントロダクション： しばしば利用者全般の ユーザビリティを向上させる。
28. 幅広い状況でのヒューマンリーダビリティ ≒モバイル、マルチデバイス
29. https://material.google.com/
30. https://developer.apple.com/ios/human‑interface‑guidelines/overview/design‑principles/
31. 7. - � 7 � y Q) t,· � © UI r4f-1 :Y ,d sign Theresa Neil Jt2 51'l .�!J e w e b 201J•T-alft. •1t45nff80l11ff99"� t--t!,-. Web&�1'(-( ,i--1-..,�•J 7-(Qllr•• !"Don't Maka MeThlnkJO)B*lllll APtJloe, !llo1>mb�r9 co"" L••�•.coffl li!t' t••i:c VC � I:= !1.-'f 1!''7' • :r::.,'T-. .,::.,�f)a-A ltt..t'a'ii-'f-7'7. � lllliil• 7.'P<-7· ,,1,-,�a(.i-.,-1�r-,t:!!1t.!I-�- 'l'i'l"O>n 1:,;. 7 y T 7 y Cl 7 1 I JI,, 'l 7" (t- ""'- (l) r
32. モバイルの利用状況から来るデザインヒント 必要十分な表現にとどめる チラ見しやすいようにデザインする 階層を深くしない 自然な形で接点を見せる 途中で操作を止めても同じことができる 時間軸を使って情報を整理する
33. http://www.slideshare.net/rikiha/mobile‑accessibility‑64942570
34. https://www.w3.org/TR/WCAG21/
35. UI 幅広い状況でのヒューマンリーダビリティ ≒アクセシビリティ 特定状況でのユーザビリティ ＝いわゆるユーザビリティ
36. 可能性をさらに広げる マシンリーダビリティ
37. マシンリーダブル プログラムが解釈できるか 様々な形に変換して幅広く使えるようにする Webならではのアプローチ
38. レベルA≒ テキスト提供、機械可読、キーボード 42 http://web-tan.forum.impressrd.jp/e/2012/05/17/12727
39. ヒューマンリーダブル ひとつのものでは 対応範囲に限界がある マシンリーダブル 形を変えることで 様々な状況に対応できる 実はWCAG 2.0ではレベルA、必ず満たすべきとされている
40. ユニバーサルデザイン Universal = 普遍的な  特定の人のためのデザインではない、普遍的なデザイン  ある一つのものが普遍的に使える さまざまな状況の人が同じものを使える 12
41. 例：駅のホームへのアクセス手段 13
42. 例：福岡県大野城市 15 http://www.city.onojo.fukuoka.jp
43. 支援機能の提供 16
44. 総務省みんなの公共サイト運用ガイドライン 17 http://www.soumu.go.jp/main_sosiki/joho_tsusin/b_free/guideline.html
45. 2.1.4. ウェブアクセシビリティ対応に関する誤解 注意点！ ホームページ等において、音声読み上げ、 文字拡大、文字色変更等の支援機能を 提供する事例がありますが、これだけでは、 ウェブアクセシビリティに 対応しているとは言えません。 18
46. 障害者のウェブページ利用方法の紹介ビデオ 総務省ウェブサイトの利用例  視覚障害者（全盲）  視覚障害者（弱視）  肢体不自由者 19 http://www.soumu.go.jp/menu_news/s-news/2005/051215_1_wmv.html
47. みんなの公共サイト運用ガイドライン(続き) 利用者は、多くの場合、 音声読み上げソフトや文字拡大ソフトなど、 自分がホームページ等を利用するために 必要な支援機能を、自身のパソコン等に インストールし必要な設定を行った上で、 その支援機能を活用して様々な ホームページ等にアクセスしています。 20
48. ブラウザや支援技術で 状況に適した表現に 変えられること Webアクセシビリティの重要なポイント 21
49. プレーンテキスト  ▪デザイニングWebアクセシビリティ •訴求ポイント(この本が既存の本と異なる点) ・「ガイドライン対策」ではなく、実際にコンテンツをアクセシブルにするための実践的な内容 ・解決アプローチの例として、実際に公開されているサイトの実例を多数紹介 ・上流から下流まで、制作プロセスの全てをカバー ・デザイン、実装だけではなく、戦略や設計のプロセスにおける取り組みを重視 •取り組みの背景 ウェブコンテンツは本来、ユニバーサルなものです。PCのブラウザで閲覧するだけでなく、スマートフォンで アクセスしたり、合成音声で読み上げたり、点字で出力したりと、ユーザーの状況に併せてさまざまな形に変 えながらアクセスすることができます。 24
50. HTMLでマークアップ <!DOCTYPE html> <html lang=“ja”> <head> <title>デザイニングWebアクセシビリティ</title> </head> <body> <h1>デザイニングWebアクセシビリティ</h1> <h2>訴求ポイント(この本が既存の本と異なる点)</h2> <ul> <li>「ガイドライン対策」ではなく、実際にコンテンツをアクセシブルにするための実践的な内容</li> <li>解決アプローチの例として、実際に公開されているサイトの実例を多数紹介</li> <li>上流から下流まで、制作プロセスの全てをカバー</li> <li>デザイン、実装だけではなく、戦略や設計のプロセスにおける取り組みを重視</li> </ul> <h2>取り組みの背景</h2> <p>ウェブコンテンツは本来、ユニバーサルなものです。PCのブラウザで閲覧するだけでなく、スマートフォンでアクセスしたり、合成音 声で読み上げたり 、点字で出力したりと、ユーザーの状況に併せてさまざまな形に変えながらアクセスすることができます。</p> </body> </html> 25
51. これがWebアクセシビリティの根幹 Webアクセシビリティの根幹は マシンリーダブルなテキスト  最も多くの人に伝わる表現方法は「テキスト」  テキストをマークアップすると 意味が明確になり、機械が解釈可能になる  ユーザーエージェントや支援技術といったプログラムを通して 利用可能な形に変換できる 26
52. ユーザーエージェントと支援技術 ユーザーエージェント：ユーザーの代理  ユーザーに成り代わってWebにアクセスする  ブラウザはその一種だが、他にもいろいろある 支援技術：アクセス支援用ソフト・ハード  OSやブラウザが提供するカスタマイズ機能  別途インストールするソフトウェア  特定用途向けのハードウェア 27
53. ビジュアルブラウザ(Firefox) 28
54. テキストブラウザ(w3m) 29
55. 拡大鏡、ハイコントラストモード 31
56. スクリーンリーダー(PC、iOS) 32
57. 33 さまざまな入出力デバイス
58. 「分けてある」ことで選択肢が増えていく 34 プロダクト 情報 コンテナ 情報 デバイス Web 情報 ユーザー エージェント Web デバイス 情報 ユーザー エージェント Web デバイス 支援技術
59. マシンとヒューマンの架け橋は 「テキスト」
60. 伝わる可能性が一番高いUI「テキスト」 Webコンテンツのほとんどは「テキスト」 IAの中心にあるのは「テキスト」 検索に使うのも「テキスト」 書き込むのも「テキスト」
61. http://www.uxbooth.com/articles/complete‑beginners‑guide‑to‑information‑architecture/
62. The Final Hamburger A/B Test http://sitesforprofit.com/menu‑eats‑hamburger
63. 設計・デザインの段階でテキストを意識 わかりやすく、構造を持ったテキストを 「ヒューマンリーダブル」な形で出す
64. マシンリーダブルは テキストがあればこそ テキストが無ければマークアップはできない（！） 構造を持つテキストあれば、マークアップは難しくない title, h1～h6, ul, ol, a, form, label nav, article, section, aside, header, footer, main
65. 可能性を保つ マシン リーダビリティ 網を張る ヒューマン リーダビリティ 狙い撃つ ユーザビリティ Web
66. アクセシビリティ ＝売りにつながらない？
67. Web担当者の認識 47 https://www.wab.ne.jp/wab_sites/contents/2335
68. 遷移・回遊 コンバージョン 利用開始 流入 理解 申込 母数へのアプローチ デザイン側での唯一のアプローチ手段 65歳以上の利用が16.4％（1,653万人） 障害者の利用率は高い（82.7～93.4%） 流入を増やす？アクセシブルにする？
69. 遷移・回遊 コンバージョン 利用開始 流入 理解 申込 各段階へのアプローチ WCAG2.0 に含まれる内容： ナビゲーションのガイドライン ライティングのガイドライン フォーム最適化のガイドライン
70. 流入 例：ナビゲーション
71. 流入 例：ナビゲーション
72. 流入 例：ライティング
73. 流入 例：ライティング
74. 流入 例：フォーム最適化
75. 流入 例：フォーム最適化
76. アクセシビリティ ＝売りにつながる
77. アクセシビリティ ＝コストが増える？
78. http://www.slideshare.net/waic_jp/201310‑waic‑seminarsawada
81. ルールを要する案件にアクセシビリティを絡める 標準のガイドラインがあることで： 理由付けがしやすい CMS選定の基準となる 対応後に評価しやすい 発展させる際に立ち戻りやすい http://www.yasuhisa.com/could/article/design‑system‑language/
82. 将来に対応するため 新しいデバイスに取り急ぎ対応できる  作法を守れば未知のデバイスでも利用できる  ユーザーへのサービス中断を回避できる  漸進的な対応により突発的なコスト発生を抑止 54
83. Thoughts on Flash 55 http://www.apple.com/hotnews/thoughts-on-flash/
84. 原則：大きなコストは掛からない レベルA対応はそこまで大変ではない  先に方針を立てて、制作フローや運用フローに組み込めば、 大きな追加コストにはならない やるべきことは5つ  ガイドラインに沿って「真っ当」に作るだけ 94
85. レベルAでやるべきこと、5つ 1. テキストだけでわかるように書く 1.1.1 非テキストコンテンツ 1.3.3 感覚的な特徴 1.4.1 色の使用 2.4.2 ページタイトル 3.3.1 エラーの特定 3.3.2 ラベル又は説明 2. 適切にマークアップする 1.3.1 情報及び関係性 1.3.2 意味のある順序 2.1.1 キーボード 2.1.2 キーボードトラップなし 2.4.1 ブロックスキップ 2.4.3 フォーカス順序 2.4.4 リンクの目的(コンテキスト内) 3.1.1 ページの言語 4.1.1 構文解析 4.1.2 名前(name) ・役割(role) 及び値(value) 95
86. レベルAでやるべきこと、5つ 3. 勝手に動かさない 1.4.2 音声の制御 2.2.1 タイミング調整可能 2.2.2 一時停止、停止、非表示 3.2.1 フォーカス時 3.2.2 入力時 4. チカチカさせない 2.3.1 3回の閃光、又は閾値以下 5. 動画や音声の代替テキストを書く 1.2.1 音声のみ及び映像のみ(収録済) 1.2.2 キャプション(収録済) 1.2.3 音声解説、又はメディアに対する代替(収録済) 96
87. アクセシビリティ ＝利益につながる
88. コストが掛かるケース 動画や音声 紙もの＆PDF JavaScriptによるUI 試験の実施 97
89. 動画や音声：映像が見えない／音が聞こえない 98
90. 字幕や文字起こしをつけるコストを見込む 99 https://www.youtube.com/watch?v=gAgOnQqyDz0
91. 紙もの＆PDF 100
92. 紙もの＆PDF Webに適したフォーマットになっていない  グラフや図版が多用され、テキストの説明がない  きわめて複雑な表が使われている  スキャンしたPDFでテキスト情報がない  PDFの作り方によっては、読み上げ順序が不適切に 再構成が必要、追加コストを見込む 101
93. JavaScriptによるUI 102
94. JavaScriptによるUI 既存のHTMLだけではUIを表現しきれない  スクリーンリーダーに状態が伝わらない  キーボードのみで適切に操作できない アクセシブルな実装と検証のコストを見込む  WAI-ARIAという追加仕様を使って独自に実装する or すでに対応されているUIウィジェットを使う  スクリーンリーダーとキーボードでテストする 103
95. 次の可能性を生むため ユーザー側の工夫や想定外利用を誘発する  マシンリーダブルなテキストは機械で扱いやすい  提供側の意図とは別の形で使われる  新たな可能性の芽が生まれる 56
96. 59 http://logmi.jp
97. クローラー(Googlebot) 30
99. https://calil.jp/
100. 58 https://matome.naver.jp
101. 1-6. 2 3 33 cccccc 2 7J1 t-� 7 -1 !/ '1:' ,'J 7 -A � - .A � - ,, - L "C tr l o 00 c r :¥-A r c ff & u.> :i :r- } 7 A r- ,, ,� - -u 1: _ · - . - :--c !; 1tJ ._ tJ 1 ·r 71 / 1:fle: 1 Jll tJ _iJj, ��tit"" Q fW.fk Y �'o ---7 : DJl -_i:.:�: ·� r?A��;�1 --�- ���}���� . �k�� � �? 1) 7 L-C l Q D1 7 :X o/ ? L �tJ ,.; 'T�-1' � L. 'i Tc [_i t: tt ,:: - ; -f� :1 ;.,,- r 7· A 1-- r .x. --;, � 1 -1J..-t e.. �1- ;;r_ -;, ?· L t1:IJ � r�.{;,.., Li To ifl!u -ff4j., :. � f7J :to 4? ;,;_ t: tJ � - l: !¼ � l ,:, L J: 1 o . .>. � ... . 'f !:"1 ,.. 1. r""" 't ':Z.. _. � .t .... •� a..,� - ·+ IJ h}' 1 � I. I ' �, Cil rt!;··:. � · � ('�y, rp� If� ¥,d.,i ,_ . Q ":(!; • · ·· ' ¢��i!J-i; fJ i Ti� Lt, L X�!i ,t ff . t!lOJ · }J1fbit ' � . 1:1" l, ,{:,;:. ?-OJ 1t�.i-1f-·1(1)1- jJtJ:.1:_� : ! -?'"C.. .· .,p l 1 1 (}) :- 1.1,J. · b�I -- fl.� := � tJ ';jj fJ i h
103. Web担当者の認識 61 https://www.wab.ne.jp/wab_sites/contents/2335
104. 海外諸国でも進む「法律による義務化」  カナダ（オンタリオ州）の「AODA」  従業員50名以上の企業はレベルA準拠  韓国の「障害者差別禁止法」  全法人が対象、技術基準は「KWCAG 2.1」  アメリカの「ADA」  明文化されていないが、近年の判例等では 企業にレベルAA準拠を要求することが多い  アメリカの「ACAA」  国内外の航空会社Webサイトに レベルAA準拠を要求（日本の航空会社も含む） 70 http://www.slideshare.net/waic_jp/webjis-x-83413
105. 64 http://www8.cao.go.jp/shougai/suishin/sabekai_wakariyasui.html
106. 合理的配慮の要求 65
107. 総務省みんなの公共サイト運用ガイドライン 67 http://www.soumu.go.jp/main_sosiki/joho_tsusin/b_free/guideline.html
108. 公共機関は待ったなしの状況 みんなの公共サイト運用ガイドラインの要求  2017年度末までに適合レベルAAに準拠 （試験の実施と公開）  「ウェブアクセシビリティ取組確認・評価表」を 毎年度末までに公開を推奨 68
109. どこから取り組むべきか? 71
110. Q アクセシビリティに なんらか取り組んでいる？
111. A この場にいる全員が 実は取り組んでいる
112. Webに載るだけで 圧倒的にアクセシブル
113. お店 →　Web 新聞 →　Web 学校 →　Web 業務 →　Web
114. robustness findability portability usability shareability hackability 頑健:存在が維持される 発見:特定できる、探し出せる 携帯:持ち運べる、呼び出せる 使用: 知覚・理解・操作、目的達成 共有: 誰かに渡せる、共有できる 改変: 加工できる、再利用できる
115. ユーザは、 わたしたちの製品にアクセスすることで 何にアクセスしようとしているのか？ あなたの言葉で伝えるWebアクセシビリティ http://www.slideshare.net/KobayashiDaisuke1/web‑59111913
116. 製品・サービス 価値 Web
117. Webの本質 The power of the Web is in its universality. Access by everyone regardless of disabilityis an essential aspect. Webの力はその普遍性にあります。 障害の有無にかかわらず誰もがアクセスできる というのがWebの本質的な側面なのです。 23 http://www.w3.org/standards/webdesign/accessibility
118. 僕なら「ウェブ制作の教科書」とか「ウェブ制作のすべて」とつける すべてのウェブサイト制作者のための「ウェブサイト構築」の教科書 土台の揺らぐことのないウェブサイトを構築するチャート 本書はWebデザインの「型」の説明をしてくれています 実は、ユニバーサルなユーザビリティの解説本 Webの本質は アクセシビリティ
119. アクセシビリティはゼロか1かではない  特定の施策ができなくとも、 他の施策が無駄なわけではない  ガイドラインの全ての施策を完璧に実施しても、全てのアクセスが 完全に保証されるわけではない  逆に、たとえば見出しをマークアップするだけでも 劇的にアクセシブルになる可能性がある  高すぎる目標を設定する必要はない  できる範囲で方針を立て、できることからはじめましょう！ 106
120. 方針がないと…… 73
121. まずは方針を立てることをオススメ 72
122. まとめ  アクセシビリティとは、幅広い層へのユーザビリティ  ヒューマン向け≒ マルチデバイス向けデザインの基礎  マシン向け≒ 複数ルートと可能性、これが根幹  その架け橋は、ちゃんと設計されたテキスト  アクセシビリティは売りアップ、コスト減、投資  社会からの要請、需要も増える  あなたは既にやっている！方針立てて、できるところから 2
123. さあ、はじめよう！
124. ありがとうございました @magi1125 facebook.com/rikiya.ihara