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
障害者のウェブページ利用方法の紹介ビデオ

総務省障害者のウェブページ利用方法の紹介ビデオ
視覚障害者（全盲）のウェブページ利用方法視覚障害者（弱視）のウェブページ利用方法

盲目の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 Accessible
https://make.wordpress.org/accessibility/2016/03/21/wordpress-goes-wcag/

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

• 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の
達成基準とレベル

レベル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

見出し
リストも
• バリデート

見出しで気を付けるポイント
• 見出しで構造化を意識する
• 目的の情報に辿り着けるようにする
• 先頭に内容を識別できる情報があると望ましい
関連する JIS X 8341-3:2016 の達成基準：
• 1.3.1 情報及び関係性
• 2.4.6 見出し及びラベル • 2.4.1 ブロックスキップ
• 2.4.10 セクション見出し

見出しで構造化を意識する
春はあけぼの。やうやう白くなりゆく山際、少し明かりて、紫だち
たる雲の細くたなびきたる。
夏は夜。月のころはさらなり、闇もなほ、蛍の多く飛びちがひたる
。また、ただ一つ二つなど、ほかにうち光て行くもをかし。雨など
降るもをかし。
秋は夕暮れ。夕日の差して山の端いと近うなりたるに、烏の寝所へ
行くとて、三つ四つ、二つ三つなど飛び急ぐさへあはれなり。まい
て雁などの連ねたるが、いと小さく見ゆるは、いとをかし。日入り
果てて、風の音、虫の音など、はた言ふべきにあらず。
冬はつとめて。雪の降りたるは言ふべきにもあらず、霜のいと白き
も、またさらでもいと寒きに、火など急ぎおこして、炭持て渡るも
、いとつきづきし。昼になりて、ぬるくゆるびもていけば、火桶の
火も、白き灰がちになりてわろし。
春
春はあけぼの。やうやう白くなりゆく山際、少し明かりて、紫だち
たる雲の細くたなびきたる。
夏
夏は夜。月のころはさらなり、闇もなほ、蛍の多く飛びちがひたる
。また、ただ一つ二つなど、ほかにうち光て行くもをかし。雨など
降るもをかし。
秋
秋は夕暮れ。夕日の差して山の端いと近うなりたるに、烏の寝所へ
行くとて、三つ四つ、二つ三つなど飛び急ぐさへあはれなり。まい
て雁などの連ねたるが、いと小さく見ゆるは、いとをかし。日入り
果てて、風の音、虫の音など、はた言ふべきにあらず。
冬
冬はつとめて。雪の降りたるは言ふべきにもあらず、霜のいと白き
も、またさらでもいと寒きに、火など急ぎおこして、炭持て渡るも
、いとつきづきし。昼になりて、ぬるくゆるびもていけば、火桶の
火も、白き灰がちになりてわろし。

見出しで目的の場所へスキップ
例：Wikipedia
Table of Contents Plusプラグイン

先頭に内容を識別できる情報を
• 洪水対策
• 台風対策
• 地震対策
• 雷対策
🙆
• 対策：洪水
• 対策：台風
• 対策：地震
• 対策：雷
🙅

ショートカットで見出しの挿入
Mac：control + option + 1〜6
Win：alt + shift + 1〜6

Markdown風で見出しの挿入
# + Enterで見出しに変換できる

画像
• バリデート

画像で気を付けるポイント
• alt属性の内容をちゃんと考える
→ 代替としてちゃんと機能するものを
• alt属性の内容は必須ではない（属性は必須）
→ 装飾であるのならばaltはむしろ空で
• CSSの背景画像は装飾以外で使わない
→ コンテンツに必要なものはimg要素で
• 1.1.1 非テキストコンテンツ
• 1.4.5 文字画像

画像追加時のalt属性の入力
• デフォルトで「タイトル」に画像名が入る
•「代替テキスト」が未入力だとタイトル（
画像名）がalt属性に入るので注意
• alt属性を空にしたい場合は「タイトル」
も空にする

画像追加時のキャプションの入力
キャプションを入れるとfigure要素と
figcaption要素でマークアップされる
※テーマによる（Twenty Sixteen や _s など
有名テーマはほとんどこの形）

• キャプションを入れるとfigure要素と
※テーマによる（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>

• キャプションを入れるとfigure要素と
※テーマによる（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>

news/2005/051215_1_wmv.htmlGist - sou-lab / functions.php
https://gist.github.com/sou-lab/61d4f1b2b492a2a33ef638ee35ae13ba

Accessible Rich Internet Applications (WAI-ARIA) 1.0
https://www.w3.org/TR/wai-aria/

Font Awesome
http://fontawesome.io/

Bootstrap - Collapse
http://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のサイト統計の画像

動画
• バリデート

動画(収録済み）で気を付けるポイント
• キャプションを提供（※字幕ではない）
→ 効果音、音楽、笑い声、話者の特定、位置などを含む
• 再生／停止の操作が可能
• 動画プレイヤーがキーボード操作可能
• 1.2.1 音声だけ及び映像だけ（収録済み）
• 2.1.1 キーボード
• 2.2.2 一時停止、停止及び非表示
• 1.2.2 キャプション（収録済み）
• 2.1.2 キーボードトラップなし

ループアニメーションgifを使うときは
5秒以内に停止させる

YouTube埋め込みプレイヤー
• 再生／停止可能
• キーボード操作可能

YouTubeはキャプションを付けられる
動画アップロードの後から付けられる
多言語にも対応可能

視覚障害者（全盲）のウェブページ利用方法視覚障害者（弱視）のウェブページ利用方法

WordPress動画プレイヤー
再生／停止可能・キーボード操作可能

スライダーにも一時停止を
再生／停止可能

リンク
• バリデート

リンクで気を付けるポイント
• リンク先の具体内容を予測できる表現で
→ 関心の無いリンク先をスキップできる
• 「新規タブで開く」は使いどころを考える
→ ブラウザの「戻る」ボタンで戻れない
• フォーカスを消さない
→ キーボードで操作することも考える
• 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を指定する

W3C Link Checker
https://validator.w3.org/checklink

読みやすさ
（リーダブル）
• バリデート

読みやすさで気を付けるポイント
〜コーディング〜
• 機能を損なわずテキストをサイズ変更できる
• 一行ずつ横スクロールをせずに読める
• 行間1.5文字以上が望ましい
• 均等割付はしない方がいい
• 余白を効果的に使用する
• 1.4.4 テキストのサイズ変更
• 1.4.8 視覚的提示

• 簡潔に読みやすい文章にする
• 空スペースに気を付ける
• 一般的でない用語や略語は説明を入れる
読みやすさで気を付けるポイント
〜コンテンツ〜
• 3.1.3 一般的ではない用語
• 3.1.5 読解レベル • 3.1.4 略語

色
• バリデート

色で気を付けるポイント
• 色だけで情報を伝えない・操作させない
• 背景色と文字色のコントラスト比
（ただしアクティブでない要素、純粋な装飾、写
真の一部などは除く）
• 色の反転やグレースケールで使われる場合も想定
• 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 Samples
http://trace.wisc.edu/contrast-ratio-examples/

Colors on the Web - Color Contrast Analyzer
http://www.colorsontheweb.com/Color-Tools/Color-Contrast-Analyzer

バリデート
• バリデート

バリデートで気を付けるポイント
• ちゃんとバリデーター通そう
• タグが欠けていたりするとキー操作や読み上げ
などで想定外の動作をする場合がある
• 4.1.1 構文解析

The W3C Markup Validation Service
https://validator.w3.org/

WordPressのアクセシビリティは
1人だけではできない！
• WordPress開発者
• テーマ実装者
• コンテンツ制作・更新者

みんなで意識して
より優しい
ウェブサイトを！

ありがとうございました

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

More Related Content

What's hot

Viewers also liked

More from Sou Lab