Webアクセシビリティ逆引きガイドライン

『JIS X 8341-3:2016』レベル Aの達成基準（W3C勧告『WCAG 2.0』のレベル Aと同じ）をベースにして、エーイレブンワイ（株式会社インフォアクシア）が独自に作成した『Webアクセシビリティ逆引きガイドライン』です。注意事項をご確認の上、Webコンテンツのアクセシビリティ向上にご活用ください。

最終更新日：2018年12月15日

注意事項

HTMLのWebページを対象にしています。
このガイドラインに沿って制作したWebコンテンツが、『JIS X 8341-3:2016』や『WCAG 2.0』の達成基準を満たすことを保証するものではありません。
『JIS X 8341-3:2016』や『WCAG 2.0』の達成基準が適用されるすべてのケースを網羅しているわけではありません。
また、達成基準で要求されている事項と異なるものが一部含まれています（その場合、ほとんどはユーザビリティ等も考慮して達成基準で要求されていること以上の内容になっています）。
このガイドラインは、予告なく内容等が変更されることがあります。

コーディング

HTMLソース

HTMLソースは、ユーザーエージェントが解析できるように、バリデータで以下に該当するエラーが出ていないことを確認する。

仕様では認められていない終了タグの省略
仕様に準じていない要素の入れ子
同一の要素内での同じ属性の重複
ユニーク（一意的）ではないid属性値

ページ設定

言語指定

Webページのデフォルトの言語は、<html>要素のlang属性を用いて指定する（例：日本語の場合、lang="ja"）。

ページタイトル

ページタイトルは、<title>要素を用いて、そのWebページの内容が分かるように記述する。

文字サイズ

テキストの文字サイズを標準の200％まで拡大しても、コンテンツの閲覧や操作に支障が生じないようにする。

ページの領域

セクショニング要素とランドマークrole

Webページにあるコンテンツは、次のいずれかの要素内に入れる。また、当面はランドマークroleを併用する。

ページのヘッダー：<header role="banner">
ナビゲーション：<nav role="navigation">
- グローバルナビゲーション、パンくずリスト、ローカルナビゲーション、目次など
- Webページに複数の<nav>要素があるときは、aria-label属性やaria-labelledby属性を用いて、他の<nav>要素と区別がつくラベルを付ける。
検索機能：<form role="search">
メインコンテンツ：<main role="main">
補足的コンテンツ：<aside role="complementary">
ページのフッター：<footer role="contentinfo">

ブロックスキップ

スクリーンリーダーを使用したり、キーボードで操作したりしているとき、ユーザーがWebページのメインコンテンツの開始位置へ移動できるようにマークアップする。

メインコンテンツの開始位置に見出しがある場合、見出し要素（多くの場合は<h1>要素）を用いてマークアップする。
メインコンテンツの開始位置を<main>要素を用いてマークアップする。または、ランドマークrole（role="main"）を用いる。

文書構造

見出し

見出しは、見た目だけではなく、文書構造に応じて<h1>～<h6>要素を用いてマークアップする。

順不同リスト

順不同のリストは、見た目だけではなく、<ul>、<li>要素を用いてマークアップする。

順序付きリスト

順序付きリストは、見た目だけではなく、<ol>、<li>要素を用いてマークアップする。

強調

見た目で強調しているテキストは、<em>要素を用いてマークアップする。

重要度

見た目で重要度の高さ（重要性、深刻さ、緊急性）を示しているテキストは、<strong>要素を用いてマークアップする。

引用

長い引用文は<blockquote>要素、短い引用文は<q>要素を用いてマークアップする。

キーボード操作

フォーカス・インジケータ

キーボードで操作しているときには、キーボード・フォーカスの現在位置を示すインジケータを常に表示する。

キーボード操作対応

マウスで操作できる機能（リンクやフォーム・コントロール、ボタン、ウィジェットなど）は、キーボードだけでも操作できるようにする。

キーボード・トラップなし

キーボード操作でフォーカスを移動しているとき、フォーカスが特定の部分に閉じ込められることなく、Webページの先頭から最後まで移動できるようにする。

フォーカス時

Webページにあるフォーカスを受け取ることのできる要素（リンクやフォーム・コントロールなど）がフォーカスを受け取ったとき、次のような動作をしないようにする。

新しいウィンドウを開く
フォーカスを異なる要素へ移動させる
新しいウェブページへ移動する
ウェブページの内容を大きく再配置する

リンク

リンクテキスト

リンクテキストは、ユーザーがリンク先に移動するかどうかを判断できるように記述する。ただし、次のいずれかによってリンク先を特定できる場合は除く。

リンクが含まれている文全体
リンクが含まれているリスト項目全体
リンクが含まれているパラグラフ全体
リンクの前にある見出し（<h1>～<h6>要素でマークアップされた見出し）とリンクテキストの組み合わせ
リンクが含まれているデータセルと関連付けられている見出しセルの文言とリンクテキストの組み合わせ

スタイル

文中にあるテキストリンクに下線がなく、文字色の違いだけでリンクであることを示す場合は、次の両方の条件を満たすようにする。

テキストリンクの文字色とリンクではないテキストの文字色とのコントラスト比が 3:1 以上ある
マウスオーバーしたとき及びキーボード・フォーカスを受け取ったときには、下線を表示したり、背景色を変更したりして、リンクであることを強調する

画像

画像の代替テキスト

画像には、<img>要素のalt属性を用いて、画像が伝えている情報を記述した代替テキストを提供する

装飾画像

情報を伝えていない装飾の画像は、<img>要素のalt属性を空（alt=""）にする。または、CSSを用いて背景画像として表示する。

CSSの背景画像

装飾を目的にした画像ではないかぎり、CSSの背景画像（background-imageプロパティ）ではなく、<img>要素を用いる。

画像リンクの代替テキスト

画像リンクには、<img>要素のalt属性を用いて、ユーザーがリンク先に移動するかどうかを判断できるように代替テキストを提供する。

代替テキストの省略

同一のリンク（<a>要素）内に画像とテキストの両方がある場合、テキストの繰り返しになる文言はalt属性に記述しない。

画像ボタンの代替テキスト

画像ボタンには、<input>要素（type="image"）または<img>要素のalt属性を用いて、ボタンの機能が分かる代替テキストを提供する。

イメージマップの代替テキスト

イメージマップの<img>要素、各ホットスポットの<area>要素には、alt属性を用いて代替テキストを提供する。

色

色の違い

色の違いを用いて情報を提供しているとき、その色の違いが分からなくても理解できるようにテキストやパターン等を併用する。

コントラスト比

情報を伝えている文字の色と背景色とのコントラスト比を4.5:1以上確保する。

感覚的特徴

形・大きさ・位置・方向・音

形、大きさ、視覚的な位置、方向、又は音を用いて情報を提供したり、コンテンツを説明したりするとき、その感覚的特徴が分からなくても理解できるようにする。

順序

画面読み上げ順序

スクリーンリーダーによる読み上げ順序（HTMLソースの記述順）は、コンテンツの意味が通じる順序にする。

フォーカス移動順序

キーボードで操作しているときのフォーカス移動順序は、コンテンツの意味や操作性に沿った順序にする。

データテーブル

表題

表題は、<caption>要素を用いてマークアップする。

見出しセル

見出しセルは、<th>要素を用いてマークアップする。

複雑な構造の関連付け

テーブルの構造が複雑な場合、各データセルの<td>要素にheaders属性を用いて、見出しセルのID（<th>要素のid属性値）と関連付ける。

フォーム

ラベルとフォーム・コントロールの関連付け（可視ラベルあり）

フォーム・コントロールのラベルとなるテキストがある場合は、<label>要素を用いてマークアップしてフォーム・コントロールと関連付ける。

フォーム・コントロールのラベル提供（可視ラベルなし）

ラベルとなるテキストがない場合、フォーム・コントロールの要素（<input>、<select>など）にtitle属性を用いてラベルを提供する。

フォーム・コントロールの補足説明

必須項目の明示、入力方法の説明、入力可能な値などは、<label>要素または<legend>要素内に含める。または、入力例や入力方法には、placeholder属性やaria-describedby属性を用いることができる。

フォーム・コントロール一式のグループ化

グループ化できるフォーム・コントロール一式には<filedset>要素、そのグループのラベルとなるテキストには<legend>要素を用いて、それぞれをマークアップする。

`<option>`要素のグループ化

<select>要素内でグループ化できる<option>要素一式は、<optgroup>要素を用いてグループ化する。

入力/選択時のふるまい

入力フォームで、ユーザーがテキストを入力したり、選択/非選択を切り替えたりしただけで、次のような動作をしないようにする。

新しいウィンドウを開く
フォーカスを異なる要素へ移動させる
新しいウェブページへ移動する
ウェブページの内容を大きく再配置する

エラーメッセージ

エラーメッセージでは、エラーになっている項目を明示して、エラーの内容を説明した上で、修正方法を説明する。

音声のみ（収録済み）

再生

Webページを読み込んだとき、音声を自動的に再生しない。

音声の代替コンテンツ

音声が伝えている情報をテキストに書き起こした代替コンテンツを用いて、音声コンテンツと同等の情報を提供する。

映像のみ（収録済み）

映像の代替コンテンツ

映像が伝えている情報をテキストに書き起こした代替コンテンツを用いて、映像コンテンツと同等の情報を提供する。

音声付き動画（収録済み）

動画の自動再生なし

Webページを読み込んだとき、動画を自動的に再生しない。

キャプション

音声付きの動画には、キャプションを用いて、動画の音声が伝えている情報を再生中の画面で提供する。

音声解説/代替コンテンツ

動画には、音声解説またはテキストに書き起こした代替コンテンツを用いて、動画の映像だけで伝えている情報を提供する。

カスタムUI

名前（name）、役割（role）、状態（state）、値（value）

HTML標準の要素を再定義したり、HTML標準の要素にはない独自のコントロールを作成する場合は、WAI-ARIAを用いて名前（name）、役割（role）、状態（state）、値（value）を設定する。

動き・点滅・スクロール

一時停止

コンテンツの動き、点滅、スクロールが自動的に開始して5秒よりも長く続く場合、必要に応じてユーザーが一時停止できるようにする。

制限時間

解除・調整・延長

コンテンツに制限時間を設定している場合、次のいずれかの手段を提供する。

コンテンツを利用する前に、ユーザーが制限時間を解除できる
コンテンツを利用する前に、ユーザーが制限時間を10倍以上の長さに調整できる
時間切れになる20秒以上前に、ユーザーに警告して、ユーザーが簡単な操作によって制限時間を少なくとも10倍以上延長できる

自動更新

一時停止・調整

自動更新するコンテンツがある場合は、必要に応じてユーザーが一時停止できるか、または更新頻度を調整できるようにする。

閃光

1秒間に3回以下

閃光を放つコンテンツがある場合、閃光はどの1秒間においても3回以下でなければならない。

Webアクセシビリティ 逆引きガイドライン