Successfully reported this slideshow.

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

6

Share

1 of 87
1 of 87

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

6

Share

Download to read offline

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

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

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

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

More Related Content

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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. ありがとうございました

Editor's Notes

  • こんにちは。ヨコタトモコです。同じくGaji-Laboという会社でアクセシビリティーサポーター、マークアップエンジニアとして受託案件に関わっています。
  • このセッションの前半では、ウェブアクセシビリティについての概要を説明します。後半ではワードプレスでのアクセシビリティ施策をご紹介していきます。
  • ではまず、そもそもウェブアクセシビリティとは誰のためにやるもの?ということをあらためてみていきましょう。
  • まずまっさきに浮かぶのは障害のある人のためにでしょう。視覚障害、聴覚障害、運動障害…ここに挙げているようにさまざまな障害のある人(制約・ハンディキャップのある人)でも、ウェブを気軽に利用できて、みなさんのウェブサイトのコンテンツにたどり着き、理解できるような配慮が必要です。

    (視覚障害:目が見えない、視力や視界が非常に弱く狭い 聴覚障害:耳が聞こえない、聞こえづらい 運動障害:肢体不自由、手や指が動かせない、動かしにくい 認知障害:記憶や学習などが困難 言語障害:ことばの理解や表現などが困難 学習障害:聞く、話す、読む、書く、計算する又は推論するといったことが困難など。)
  • 総務省では、障害のある人が実際にどのようにウェブページを利用しているのかを紹介するビデオが公開されています。
  • 全盲の方、弱視の方がどのような方法でウェブにアクセスし、たどり着きたい情報を見つけているのかがよくわかりますので、みなさんもぜひ一度ご覧になってみてください。
  • それから、国連のさだめる障害者権利条約(略称)という、障害者に関する初めての国際条約がありまして、日本は2014年に締結(ていけつ)しています。日本も国際社会の一員として、障害者の権利の実現にむけた取り組みをより後押しされていくものです。
  • この条約の中には、インターネットを含む情報通信システムを、障害者が利用できるようにするという記載が盛り込まれています。
  • また、今年の4月には障害者差別解消法という法律が施行(しこう)されました。ニュースなどで聞いたことあるでしょうか。内閣府のサイトから引用すると、”この法律は、障害のある人もない人も、互いに、その人らしさを認め合いながら、共に生きる社会をつくることを目指しています。この法律では「不当な差別的取扱い」を禁止し、「合理的配慮の提供」を求めています。”
  • 合理的配慮の提供とはなにかと言いますと、障害のある人から、何らかの対応を必要としているとの意思が伝えられたときに、負担が重すぎない範囲で対応することです。これは同じサービスなどをくりかえし継続する意思をもって行う人たち、つまり公的機関や民間事業、NPO法人なども含まれます、が対象です。で、行政などの公的機関には義務を課していて、民間については努力義務となっているんですね。ウェブは公民問わず、あらゆる場面でさまざまなかたちで利用されているので、たとえば対応しないと公的機関にとっては法的責任が問われることになるかもしれませんし、民間事業にとっては機会損失やイメージダウンにつながるでしょう。
    3年後に事業者にも義務になるように検討、見直しを障害者団体が求めている。
  • みなさんはこんな経験ありませんか?
  • 急ぎながら、慌てながら、スマホでお店の行き方をネットで調べていて、リンクがうまくタップできない、見出しがなく、文章量が多すぎて必要な情報がすぐ見つからない
  • 外出先、直射日光の下で、スマホでメールをチェックしているが、画面の色のコントラストが弱くてよく見えない
  • 電車やバス、駅など公共機関をつかっていると、回線状況が悪くて画像やCSSが読み込まれなかったり、周りへの配慮から音を出せなかったりしますよね。また、周囲が騒がしくて聞き取れないこともあります。
  • 怪我をしたり具合が悪くてキーボードやマウスが使えない、音声で操作をしている、入力に時間がかかったりすることもありますね。
  • わたしもそうさんも、みなさんも、歳をとりますね。老眼、近眼
    以前より文字が小さくて見えづらい、エラーがどこにでているか分からなくなる、理解に時間がかかったりするでしょう
  • ウェブを使うのは人間です。
    誰しもが、いつもは100%の状態でも、常に100%だとは限らないですよね。
    だからアクセシビリティはすべての人のために必要なものなのです。
    誰でも いつでも どこからでも 「〜できない・〜しづらい」状況でも、目的の情報に到達し、利用できるようにすることがウェブアクセシビリティです。
    たとえばサイトのデザインの見た目をつまらなくするというような、見た目のレベルを落とすことではなく、あなたの発信する情報にアクセスできる人の数を最大にしようというのがウェブアクセシビリティです。
  • アメリカのアクセシビリティ専門家であるシンシア・ワデルさんの言葉です。
  • ではつづいて、WordPressにおけるアクセシビリティへの対応をみてみましょう。
  • WordPressCodexはWordPressの公式オンラインマニュアルです。この中にアクセシビリティという項目があります。
  • また、WordPressにはアクセシビリティ対応の公式テーマというのがあり
  • このようにWordPressでは(WordPress) Accessibility Teamが設けられており、この中で
  • 「ウィーキャグ2.0のレベルダブルえー」〜〜と宣言しています。
  • ここで、ガイドライン「ウィーキャグ2.0と、関係するJIS〜とはなんぞやということについてご紹介していきます。
  • ウィーキャグ あいえすおーヨンゼロゴーゼロゼロ
  • (規格票は購入するものなのですが、)ウェブサイトで閲覧することもできます。
    (正式名称は「高齢者・障害者等配慮設計指針-情報通信における機器,ソフトウェア及びサービス-第3部:ウェブコンテンツ」)
  • また、このJISX8341-3には、計61個の達成基準と3個のレベルがあり、WCAG2.0と同じものを採用しています。 等級とは言わなくなった。
  • 「ウィーキャグ2.0のレベルダブルえー」〜〜と宣言しています。
  • ここで注意したいのは、レベルダブルAに適合するには、シングルAとダブルAの達成基準のすべてを満たさなくてはなりません。
    少なくともレベル A の達成基準すべてを満たさなければどのレベルでも適合することはできないのです。 つまり38個すべての達成基準に適合するということです。
  • そしてこのJISX8341では、対応国際規格に記載されていませんが利用者の理解促進のため、適用範囲が追記されています。
  • つまりすべての利用者はあなたもわたしも ウェブコンテンツとはネットを介する情報すべてを指します。アクセシビリティを自分ごととしてまずは意識してみましょう。
  • しさく
  • WordPressの公式オンラインマニュアルですね。
  • コーデックスの「目次」の項目を参照にして、施策を上げていきます。
  • ここはさらっと
    下の仕様の説明をとぼさんがする
  • 某アメブロとかは見出し無しで書いている場合が多いが、あれはあまりよろしくない。
  • 読み上げなどの場合、すべての見出しを最後まで聞かないといけなくなる。
    拡大している場合も
  • ここはひとつづつ説明する
  • この画像名がaltになってるパターンがとても多い。面倒だけどちゃんと入れよう。
  • ありあ ひどぅん
  • ウェイ-アリア
    Roles (役割)、States (状態) 、 Properties (特性)
    roleやaria属性で意味づけする
    マシンリーダブルに
  • クリックで拡大
  • クリックで拡大
    Rolesで(役割)、ARIAは状態や特性
    マークアップだけでは伝わらない情報をARIAで
  • 設定に「 統計のスマイル画像を非表示」とあるが、display: none;が書かれるだけでhtmlソースが存在する。
  • Jetpackの設定で「 統計のスマイル画像を非表示」とあるが、display: none;が書かれるだけでhtmlソースが存在する。

    ここはjsで挿入した。
  • 台本的なものがテキストデータで代替コンテンツとして用意されている
  • この達成基準の意図は、利用者がウェブページとやりとりしている間、他の事に注意をそらされないようにすることである。
    大企業もスライダーに再生・一時停止ボタンがついています。味の素のサイトなどよかったら見てみてください

    http://waic.jp/docs/UNDERSTANDING-WCAG20/time-limits-pause.html
  • URLで埋め込むやーつー
  • 全盲の方、弱視(ロービジョン)の方の見方がとてもよく分かる
  • WordPressにアップロードするパティーン
  • スライダーにも言えます
  • 「新規タブで開く」 → スマートフォン・タブレットだと不便なことも多い
  • ブラウザ拡張でもリンクチェッカーツールなどはある
  • 200%まで崩れないように user-scalable="no"だと指定しない 文字の大・小ボタンはいらない
    フォントサイズ:その人が見やすい方法が取られていればいい。望んだ文字の大きさに変更できることが大事。
    JISによるとコンテンツの幅は80字(全角40字)で折返しするのが望ましい


  • 空改行を連打
    空スペース:森田の間に見た目上スペースをいれると読み上げで〜 
    業界用語・略語・馴染みのない外来語・慣用句 難しい漢字にルビ
  • 色だけNG:モノクロで印刷する、Windowsのハイコントラスト・モードで閲覧する、(色覚特性を持つひと)
  • 横田補足:JIS X 8341-3:2016 1.4.3と1.4.6のガイドラインで決まっている
  • 忘れがちなバリデーター。ちゃんと通そう。
  • タグのとじ忘れなどに気づける。
  • せーの(2人同時に)
  • (2人同時に)
  • ×