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