WordPressでも意識したいアクセシビリティ 〜「優しいウェブサイト」作りをはじめよう〜

WordCamp Tokyo 2016で発表した資料です。
※SlideshareのKeynote日本語表示できない問題への対応で、全フォントを変更したので一部表示が崩れたりしています。

セッション時の見た目担保版はこちら（リンクや文字起こしはされてません）
https://speakerdeck.com/tobotoboto/wordcamp-tokyo-2016-wordpressdemoyi-shi-sitaiakusesibiritei-you-siiuebusaito-zuo-riwohazimeyou

Transcript

2. WordPressでも 意識したいアクセシビリティ 〜「優しいウェブサイト」作りをはじめよう〜 株式会社 Gaji-Labo 横田東母子 & 森田 壮 2016.9.17 WordCamp Tokyo 2016
3. 自己紹介 横田 東母子 森田 壮 アクセシビリティーサポーター Webデザイナー マークアップエンジニア マークアップエンジニア @tobotoboto @sou_lab
4. ウェブアクセシビリティ の紹介
5. ウェブアクセシビリティって 誰のために？
6. ウェブアクセシビリティって誰のために？ 障害のある人のために • 視覚障害（全盲・弱視など） • 聴覚障害（ろうあ・難聴など） • 運動障害 • 認知障害 • 言語障害 • 学習障害（読字障害）…
7. ウェブアクセシビリティって誰のために？ 障害者のウェブページ利用方法の紹介ビデオ 総務省 障害者のウェブページ利用方法の紹介ビデオ http://www.soumu.go.jp/menu_news/snews/2005/051215_1_wmv.html
8. ウェブアクセシビリティって誰のために？ 障害者のウェブページ利用方法の紹介ビデオ 視覚障害者（全盲）のウェブページ利用方法 視覚障害者（弱視）のウェブページ利用方法 総務省 障害者のウェブページ利用方法の紹介ビデオ http://www.soumu.go.jp/menu_news/snews/2005/051215_1_wmv.html
9. ウェブアクセシビリティって誰のために？ 盲目のiPhoneユーザーに聞いた、 視覚を使わない驚きのスマホ操作術 盲目のiPhoneユーザーに聞いた、視覚を使わない 驚きのスマホ操作術 https://king.mineo.jp/magazines/special/387
10. ウェブアクセシビリティって誰のために？ 障害者権利条約 国連の定める国際条約 • 日本は2014年1月に締結、 同年2月より効力を発生 • 外務省 障害者の権利に関する条約 http://www.mofa.go.jp/mofaj/gaiko/jinken/index_shogaisha. html
11. ウェブアクセシビリティって誰のために？ “ 障害者権利条約 2 締約国は、また、次のことのための適当な措置をとる 〜略〜 (g) 障害者が新たな情報通信機器及び情報通信システム（インターネットを 含む。）を利用する機会を有することを促進すること。 引用元：外務省 障害者権利条約 和文より 外務省 障害者の権利に関する条約 条文（和文） http://www.mofa.go.jp/mofaj/files/000018093.pdf ”
12. ウェブアクセシビリティって誰のために？ 障害者差別解消法 日本の法律 • 2016年4月に施行 •「不当な差別的取扱い」を 禁止し「合理的配慮の提供」 を求める • 内閣府 障害を理由とする差別の解消の推進 http://www8.cao.go.jp/shougai/suishin/sabekai.html
13. ウェブアクセシビリティって誰のために？ “ 合理的配慮の提供とは？ Q2. 〜略〜 障害のある方などから何らかの配慮を求める意思の表明があった場合には 、負担になり過ぎない範囲で、社会的障壁※を取り除くために必要で合理的な配慮（以 下では「合理的配慮」と呼びます。）を行うことが求められます。こうした配慮を行わ ないことで、障害のある方の権利利益が侵害される場合には、差別に当たります。 Q5. 〜略〜 この法律では、合理的配慮に関しては、一律に義務とするのではなく、行 政機関などには率先した取組を行うべき主体として義務を課す一方で、民間事業者に関 しては努力義務を課した上で、対応指針によって自主的な取組を促すこととしています 。 引用元：内閣府 障害を理由とする差別の解消の推進に関する法律についてのよくあるご質問と回答＜国民向け＞より • 行政機関：法定義務 • 民間事業：努力義務 ”
14. ウェブアクセシビリティって誰のために？ 障害のある人のためだけに 特別なコトをするのが ウェブアクセシビリティ？ …こんな 経験ありませんか ？
15. ウェブアクセシビリティって誰のために？ 急いでいる・慌てている ↓ • ボタンが小さくてタップできない • 見出しがなく、文章量が多すぎて 必要な情報がすぐ見つからない
16. ウェブアクセシビリティって誰のために？ 直射日光の下 ↓ • コントラストが弱くて 見づらい・読みづらい
17. ウェブアクセシビリティって誰のために？ 公共機関を使っている ↓ • 回線状況が悪くデータが読み 込まれない • 音を出せない • 周囲が騒がしい
18. ウェブアクセシビリティって誰のために？ 怪我をした・具合が悪い ↓ • キーボードやマウスを使えない • 音声で操作をする • 入力に時間がかかる
19. ウェブアクセシビリティって誰のために？ 歳をとった ↓ • 文字が読みづらい・見づらい • エラーに気づかない • 理解に時間がかかる
20. ウェブアクセシビリティって誰のために？ 全ての人のために！ • 誰しもが、いつもは100%の状態でも常に 100%だとは限らない • 誰でも・いつでも・どこでも・どんな状況でも 目的の情報にたどり着き、利用できるように • あなたの発信する情報にアクセスできる人の数 を最大にしよう
21. ウェブアクセシビリティって誰のために？ “ アクセシビリティ声明 アクセシビリティとは製品、デバイス、サービ ス、あるいは環境がどれだけ多くの人に利用可 能になっているかということを示す度合いのこ とである。 Cynthia D Waddell | http://www.icdri.org/CynthiaW/cynthia_d.htm ”
22. WordPressの ウェブアクセシビリティは？
23. WordPress Codex WordPress Codex 日本語版 https://wpdocs.osdn.jp/アクセシビリティ
24. アクセシビリティ対応の公式テーマ 無料の WordPress テーマ > アクセシビリティ対応 https://ja.wordpress.org/themes/tags/accessibility-ready/
25. アクセシビリティ対応の公式テーマ • 「accessibility_ready」タグのあるテーマ • 自作した一般テーマも、アクセシビリティレビュー を受けることで対応テーマを宣言できる 無料の WordPress テーマ > アクセシビリティ対応 https://ja.wordpress.org/themes/tags/accessibility-ready/
26. WordPress Accessibility Team Make WordPress Accessible https://make.wordpress.org/accessibility/2016/03/21/wordpress-goes-wcag/
27. WordPress Accessibility Team “ All new or updated code released into WordPress core and bundled themes must conform with the WCAG 2.0 guidelines at level AA. ” WordPressのコアとコアに付属するテーマ群に新規追加 またはアップデートされるコードは全て、ガイドライン WCAG 2.0のレベルAAに準拠しなくてはならない。 Make WordPress Accessible https://make.wordpress.org/accessibility/2016/03/21/wordpress-goes-wcag/
28. WCAG 2.0と JIS X 8341-3:2016
29. WCAG 2.0とは • W3Cが勧告 • ウェブコンテンツをよりアク セシブルにするためのガイド ライン • ISO/IEC 40500:2012 として 国際規格に (2012年10月) Web Content Accessibility Guidelines (WCAG) 2.0（原文） https://www.w3.org/TR/WCAG20/
30. JIS X 8341-3:2016とは • 日本工業規格 • 日本独自の指針を含む規格か らISO/IEC 40500:2012の一致 規格（IDT）へ • 2016年3月に改訂 閲覧：「日本工業標準調査会（JISC）」Webサイトの「JIS検索」 http://www.jisc.go.jp/app/JPS/JPSO0020.html
31. 一致規格（IDT） WCAG 2.0 ISO/IEC 40500:2012 JIS X 8341-3:2016 JIS X 8341-3:2016に対応すると WCAG 2.0 （国際規格）に 準拠することになる
32. JIS X 8341-3:2016の 達成基準とレベル レベルA … 25個の達成基準 レベルAA … 13個の達成基準 レベルAAA … 23個の達成基準 • 改訂でWCAG2.0と同じ達成基準とレベルを採用 • レベルAAAをサイト全体の制作方針として要件とす ることは推奨されていない
33. WordPress Accessibility Team “ All new or updated code released into WordPress core and bundled themes must conform with the WCAG 2.0 guidelines at level AA. ” WordPressのコアとコアに付属するテーマ群に新規追加 またはアップデートされるコードは全て、ガイドライン WCAG 2.0のレベルAAに準拠しなくてはならない。 Make WordPress Accessible https://make.wordpress.org/accessibility/2016/03/21/wordpress-goes-wcag/
34. JIS X 8341-3:2016の 達成基準とレベル レベルAAに準拠 レベルA … 25個の達成基準 レベルAA … 13個の達成基準 レベルAAA … 23個の達成基準 • 改訂でWCAG2.0と同じ達成基準とレベルを採用 • レベルAAAをサイト全体の制作方針として要件とす ることは推奨されていない
35. JIS X 8341-3:2016の 適用範囲 “ 0A 適用範囲 この規格は、高齢者および障害のある人を含む全ての利用者が、〜 略〜 ウェブコンテンツとは 〜略〜 例えば、インターネット又はイントラ ネットを介して提供されるウェブサイト、ウェブアプリケーション 、ウェブシステムなどのコンテンツ、及びCD-ROMなどの記録媒体 を介して配布される電子文書が挙げられる。その他、この規格は支 援技術を含むユーザーエージェントを用いて利用されるコンテンツ 全般に適用される。
36. ウェブアクセシビリティは 自分ごと • あなたもわたしも • ネットに関わる情報すべて
37. WordPressにおける アクセシビリティ施策
38. WordPress Codex WordPress Codex 日本語版 https://wpdocs.osdn.jp/アクセシビリティ
39. WordPress Codex • 見出しを正しく使う • イメージの説明 • リンクを記述 • リーダブルなページを作成する • 賢明なカラーを使う • バリデート
40. 見出し リストも • 見出しを正しく使う • イメージの説明 • リンクを記述 • リーダブルなページを作成する • 賢明なカラーを使う • バリデート
41. 見出しで気を付けるポイント • 見出しで構造化を意識する • 目的の情報に辿り着けるようにする • 先頭に内容を識別できる情報があると望ましい 関連する JIS X 8341-3:2016 の達成基準： • 1.3.1 情報及び関係性 • 2.4.6 見出し及びラベル • 2.4.1 ブロックスキップ • 2.4.10 セクション見出し
42. 見出しで構造化を意識する 春はあけぼの。やうやう白くなりゆく山際、少し明かりて、紫だち たる雲の細くたなびきたる。 夏は夜。月のころはさらなり、闇もなほ、蛍の多く飛びちがひたる 。また、ただ一つ二つなど、ほかにうち光て行くもをかし。雨など 降るもをかし。 秋は夕暮れ。夕日の差して山の端いと近うなりたるに、烏の寝所へ 行くとて、三つ四つ、二つ三つなど飛び急ぐさへあはれなり。まい て雁などの連ねたるが、いと小さく見ゆるは、いとをかし。日入り 果てて、風の音、虫の音など、はた言ふべきにあらず。 冬はつとめて。雪の降りたるは言ふべきにもあらず、霜のいと白き も、またさらでもいと寒きに、火など急ぎおこして、炭持て渡るも 、いとつきづきし。昼になりて、ぬるくゆるびもていけば、火桶の 火も、白き灰がちになりてわろし。 春 春はあけぼの。やうやう白くなりゆく山際、少し明かりて、紫だち たる雲の細くたなびきたる。 夏 夏は夜。月のころはさらなり、闇もなほ、蛍の多く飛びちがひたる 。また、ただ一つ二つなど、ほかにうち光て行くもをかし。雨など 降るもをかし。 秋 秋は夕暮れ。夕日の差して山の端いと近うなりたるに、烏の寝所へ 行くとて、三つ四つ、二つ三つなど飛び急ぐさへあはれなり。まい て雁などの連ねたるが、いと小さく見ゆるは、いとをかし。日入り 果てて、風の音、虫の音など、はた言ふべきにあらず。 冬 冬はつとめて。雪の降りたるは言ふべきにもあらず、霜のいと白き も、またさらでもいと寒きに、火など急ぎおこして、炭持て渡るも 、いとつきづきし。昼になりて、ぬるくゆるびもていけば、火桶の 火も、白き灰がちになりてわろし。
43. 見出しで目的の場所へスキップ 例：Wikipedia Table of Contents Plusプラグイン
44. 先頭に内容を識別できる情報を 🙆 🙅 • 対策：洪水 • 洪水対策 • 対策：台風 • 台風対策 • 対策：地震 • 地震対策 • 対策：雷 • 雷対策
45. ショートカットで見出しの挿入 Mac：control + option + 1〜6 Win：alt + shift + 1〜6
46. Markdown風で見出しの挿入 # + Enterで見出しに変換できる
47. 画像 • 見出しを正しく使う • イメージの説明 • リンクを記述 • リーダブルなページを作成する • 賢明なカラーを使う • バリデート
48. 画像で気を付けるポイント • alt属性の内容をちゃんと考える → 代替としてちゃんと機能するものを • alt属性の内容は必須ではない（属性は必須） → 装飾であるのならばaltはむしろ空で • CSSの背景画像は装飾以外で使わない → コンテンツに必要なものはimg要素で 関連する JIS X 8341-3:2016 の達成基準： • 1.1.1 非テキストコンテンツ • 1.4.5 文字画像
49. 画像追加時のalt属性の入力 • デフォルトで「タイトル」に画像名が入る • 「代替テキスト」が未入力だとタイトル（ 画像名）がalt属性に入るので注意 • alt属性を空にしたい場合は「タイトル」 も空にする
50. 画像追加時のキャプションの入力 キャプションを入れるとfigure要素と figcaption要素でマークアップされる ※テーマによる（ Twenty Sixteen や _s など 有名テーマはほとんどこの形 ）
51. 画像追加時のキャプションの入力 • キャプションを入れるとfigure要素と figcaption要素でマークアップされる ※テーマによる（ Twenty Sixteen や _s <figure id="attachment_1" style="width:など有名テーマはほとんどこの形 150px" class="wp-caption alignnone"> ） <img class="size-thumbnail wp-image-1" src="wapuu.png" alt="扇わぷー" width="150" height="150"> <figcaption class="wp-caption-text">キャプション</figcaption> </figure>
52. 画像追加時のキャプションの入力 • キャプションを入れるとfigure要素と figcaption要素でマークアップされる ※テーマによる（ Twenty Sixteen や _s <figure id="attachment_1" style="width:など有名テーマはほとんどこの形 150px" class="wp-caption alignnone" aria- ） labelledby="caption-attachment_1"> <img class="size-thumbnail wp-image-1" src="wapuu.png" alt="扇わぷー" width="150" height="150"> <figcaption class="wp-caption-text" id="caption-attachment_1">キャプション</figcaption> </figure>
53. 障害者のウェブページ利用方法の紹介ビデオ http://www.soumu.go.jp/menu_news/sGist - sou-lab / functions.php news/2005/051215_1_wmv.html https://gist.github.com/sou-lab/61d4f1b2b492a2a33ef638ee35ae13ba
54. Accessible Rich Internet Applications (WAI-ARIA) 1.0 https://www.w3.org/TR/wai-aria/
55. Font Awesome http://fontawesome.io/
56. Bootstrap - Collapse http://v4-alpha.getbootstrap.com/components/collapse/
57. Jetpackのサイト統計の画像 <img src="https://pixel.wp.com/g.gif?hoge" alt=":)" width="6" height="5" id="wpstats">
58. Jetpackのサイト統計の画像 <img src="https://pixel.wp.com/g.gif?hoge" alt=":)" width="6" height="5" id="wpstats" aria-hidden="true">
59. 動画 • 見出しを正しく使う • イメージの説明 • リンクを記述 • リーダブルなページを作成する • 賢明なカラーを使う • バリデート
60. 動画 (収録済み）で気を付けるポイント • キャプションを提供（※字幕ではない） → 効果音、音楽、笑い声、話者の特定、位置などを含む • 再生／停止の操作が可能 • 動画プレイヤーがキーボード操作可能 関連する JIS X 8341-3:2016 の達成基準： • 1.2.1 音声だけ及び映像だけ（収録済み） • 2.1.1 キーボード • 2.2.2 一時停止、停止及び非表示 • 1.2.2 キャプション（収録済み） • 2.1.2 キーボードトラップなし
61. ループアニメーションgifを使うときは 5秒以内に停止させる
62. YouTube埋め込みプレイヤー • 再生／停止可能 • キーボード操作可能
63. YouTubeはキャプションを付けられる 動画アップロードの後から付けられる 多言語にも対応可能
64. 障害者のウェブページ利用方法の紹介ビデオ 視覚障害者（全盲）のウェブページ利用方法 視覚障害者（弱視）のウェブページ利用方法 障害者のウェブページ利用方法の紹介ビデオ http://www.soumu.go.jp/menu_news/snews/2005/051215_1_wmv.html
65. WordPress動画プレイヤー 再生／停止可能・キーボード操作可能
66. スライダーにも一時停止を 再生／停止可能
67. リンク • 見出しを正しく使う • イメージの説明 • リンクを記述 • リーダブルなページを作成する • 賢明なカラーを使う • バリデート
68. リンクで気を付けるポイント • リンク先の具体内容を予測できる表現で → 関心の無いリンク先をスキップできる • 「新規タブで開く」は使いどころを考える → ブラウザの「戻る」ボタンで戻れない • フォーカスを消さない → キーボードで操作することも考える 関連する JIS X 8341-3:2016 の達成基準： • 2.4.4 リンクの目的（コンテキスト内） • 2.4.9 リンクの目的（リンクだけ） • 2.4.7 フォーカスの可視化 • 3.2.5 要求による変化
69. リンクのフォーカスは消さない a:hover, a:active, a:focus { outline: none; }
70. :focusを指定する .nav__item > a:focus { color: #fff; background-color: #e00; }
71. W3C Link Checker https://validator.w3.org/checklink
72. 読みやすさ （リーダブル） • 見出しを正しく使う • イメージの説明 • リンクを記述 • リーダブルなページを作成する • 賢明なカラーを使う • バリデート
73. 読みやすさで気を付けるポイント 〜コーディング〜 • 機能を損なわずテキストをサイズ変更できる • 一行ずつ横スクロールをせずに読める • 行間1.5文字以上が望ましい • 均等割付はしない方がいい • 余白を効果的に使用する 関連する JIS X 8341-3:2016 の達成基準： • 1.4.4 テキストのサイズ変更 • 1.4.8 視覚的提示
74. 読みやすさで気を付けるポイント 〜コンテンツ〜 • 簡潔に読みやすい文章にする • 空スペースに気を付ける • 一般的でない用語や略語は説明を入れる 関連する JIS X 8341-3:2016 の達成基準： • 3.1.3 一般的ではない用語 • 3.1.5 読解レベル • 3.1.4 略語
75. 色 • 見出しを正しく使う • イメージの説明 • リンクを記述 • リーダブルなページを作成する • 賢明なカラーを使う • バリデート
76. 色で気を付けるポイント • 色だけで情報を伝えない・操作させない • 背景色と文字色のコントラスト比 （ただしアクティブでない要素、純粋な装飾、写 真の一部などは除く） • 色の反転やグレースケールで使われる場合も想定 関連する JIS X 8341-3:2016 の達成基準： • 1.4.1 色の使用 • 1.4.6 コントラスト（高度レベル） • 1.4.3 コントラスト（最低限レベル）
77. コントラスト比を意識しよう テキストと背景のコントラスト比が 最低限（レベルAA） • 4.5：1（大きなテキストは3:1）以上 より十分に（レベルAAA） • 7：1（大きなテキストは4.5:1）以上 ※大きなテキストとは18pt以上（全角は22pt以上） 太字14pt以上（全角は18pt以上）
78. Color Contrast Samples http://trace.wisc.edu/contrast-ratio-examples/
79. Colors on the Web - Color Contrast Analyzer http://www.colorsontheweb.com/Color-Tools/Color-Contrast-Analyzer
80. バリデート • 見出しを正しく使う • イメージの説明 • リンクを記述 • リーダブルなページを作成する • 賢明なカラーを使う • バリデート
81. バリデートで気を付けるポイント • ちゃんとバリデーター通そう • タグが欠けていたりするとキー操作や読み上げ などで想定外の動作をする場合がある 関連する JIS X 8341-3:2016 の達成基準： • 4.1.1 構文解析
82. The W3C Markup Validation Service https://validator.w3.org/
83. バリデート結果
84. まとめ
85. WordPressのアクセシビリティは 1人だけではできない！ • WordPress開発者 • テーマ実装者 • コンテンツ制作・更新者
86. みんなで意識して より優しい ウェブサイトを！
87. ありがとうございました