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.

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

6,718 views

Published on

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

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

Published in: Internet
  • Be the first to comment

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

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

×