“ウェブアクセシビリティー”のページのアクセシビリティー・チェックリストについて例を交えて説明します。
チェック項目の内のいくつかは、HTML やスタイルシートの知識がないと対応できないものがありますが、これらの知識がなくても対応できるものがあります。ホームページ作成ソフトを用いた対応方法として、ホームページ・ビルダー14（以下HPB14と略す）を例にします。
チェック項目の内のいくつかは、HTML やスタイルシートの知識がないと対応できないものがありますが、これらの知識がなくても対応できるものがあります。ホームページ作成ソフトを用いた対応方法として、ホームページ・ビルダー14（以下HPB14と略す）を例にします。
(1) 関連するJIS
- 箇条 7.3.1.1 ページの言語に関する達成基準（等級A）
(2) コメント
html要素のlang属性に"ja"を指定することで日本語であることを明示します。
XHTML 1.0の場合 lang属性と xml:lang属性で言語を指定します。
lang属性の指定がなくても日本国内では、ブラウザに正常に表示され、手持ちのスクリーンリーダーの読み上げも正常です。
文字コードは、meta要素の charset属性で指定します。
文字コード指定を間違えるとブラウザの表示が異常になり、スクリーンリーダーの読み上げも異常になります。
なお、JIS 7.3.1.1 は、言語指定に関する規定です。関連文書の“Understanding WCAG 2.0”も含め、文字コードの指定には言及していません。
XHTML 1.0の場合 lang属性と xml:lang属性で言語を指定します。
lang属性の指定がなくても日本国内では、ブラウザに正常に表示され、手持ちのスクリーンリーダーの読み上げも正常です。
文字コードは、meta要素の charset属性で指定します。
文字コード指定を間違えるとブラウザの表示が異常になり、スクリーンリーダーの読み上げも異常になります。
なお、JIS 7.3.1.1 は、言語指定に関する規定です。関連文書の“Understanding WCAG 2.0”も含め、文字コードの指定には言及していません。
(3) HTMLの具体例
(3.1) HTMLの場合
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
(3.2) XHTML 1.0の場合
<html xmlns="…" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
(4) 参考資料
- Understanding WCAG 2.0 の SC 3.1.1
- 旧JIS 箇条 5.9 a)
- 旧JIS 附属書1：2.7 a)
(5) HPB14での操作
HTMLを知らなくても、“ツール”、“オプション”、“ファイル”の順にクリックして設定が可能です。
(1) 関連するJIS
- 箇条 7.1.3.1 情報及び関係性に関する達成基準（等級A）
(2) コメント
手持ちのスクリーンリーダーでは、表題を示す caption要素や見出し項目を示す th要素があると、表として読み上げます。表題とth要素が無い場合、レイアウトと見なします。
表組み要素をレイアウトのために使う場合には表題、th要素を付けてはいけません。
表組み要素をレイアウトのために使う場合には表題、th要素を付けてはいけません。
(3) 参考資料
- Understanding WCAG 2.0 の SC 1.3.1
- Techniques for WCAG 2.0 の F46（不適合例）
- 旧JIS 5.2 d)
(1) 関連するJIS
- 箇条 7.1.3.2 意味のある順序に関する達成基準（等級A）
(2) コメント
スクリーンリーダーの読み上げ順序が見た目の順序と同じか確認します。スクリーンリーダーの読み上げ順序は、基本的には HTMLソースに現れる順序です。
次の場合に読み上げ順序と見た目の順序が異なる場合があります。
次の場合に読み上げ順序と見た目の順序が異なる場合があります。
- 表組み要素をレイアウトに使う場合
- "position:absolute;"で配置方法を指定する場合
| 画像１ | 画像２ |
| 画像１の説明 | 画像２の説明 |
次の例のように、"position:absolute;"で配置方法を指定する場合、見た目の順序は“第１行”、“第２行”、“第３行”ですが、読み上げ順序は“第１行”、“第３行”、“第２行”となります。
<div style="top:100px; left:100px; position:absolute;">第１行</div>
<div style="top:200px; left:100px; position:absolute;">第３行</div>
<div style="top:150px; left:100px; position:absolute;">第２行</div>
<div style="top:200px; left:100px; position:absolute;">第３行</div>
<div style="top:150px; left:100px; position:absolute;">第２行</div>
(3) 参考資料
- Understanding WCAG 2.0 の SC 1.3.2
- Techniques for WCAG 2.0 の F49（不適合例）
- Techniques for WCAG 2.0 の F1（不適合例）
- 旧JIS 5.2 d)
(1) 関連するJIS
- 無し
(2) コメント
フレームを使うとスクリーンリーダーの読み上げやキーボード操作に支障が出る可能性があります。
旧JIS 5.2 f) にスクリーンリーダーの読み上げやキーボード操作へのフレームの及ぼす影響が記載されています。
旧JISはフレームを必要以上に用いないこを推奨しています。フレームを使う場合にはフレームの役割を明確にすることを求めています。
なお、フレームを使わない方が、GOOGLEなどの検索サイトから訪れた訪問者を、関連ページに誘導する上で効果があるとされています。
旧JIS 5.2 f) にスクリーンリーダーの読み上げやキーボード操作へのフレームの及ぼす影響が記載されています。
旧JISはフレームを必要以上に用いないこを推奨しています。フレームを使う場合にはフレームの役割を明確にすることを求めています。
なお、フレームを使わない方が、GOOGLEなどの検索サイトから訪れた訪問者を、関連ページに誘導する上で効果があるとされています。
(3) 参考資料
- 旧JIS 箇条 5.2 f)
- 旧JIS 附属書1：2.2 d)
(1) 関連するJIS
- 箇条 7.2.4.2 ページタイトルに関する達成基準（等級A）
(2) コメント
スクリーンリーダーは最初にページのタイトルを読み上げます。
複数のページに同じタイトルを付けるのは好ましくありません。
ページにタイトルを付けることは当たり前のことですが、忘れることもあるので注意が必要です。
なお、検索サイトの上位に表示されるようにホームページを最適化（SEO）するためにも必須です。
複数のページに同じタイトルを付けるのは好ましくありません。
ページにタイトルを付けることは当たり前のことですが、忘れることもあるので注意が必要です。
なお、検索サイトの上位に表示されるようにホームページを最適化（SEO）するためにも必須です。
(3) HTMLの具体例
<title>ページタイトル</title>
(4) 参考資料
- Understanding WCAG 2.0 の SC 2.4.2
- 旧JIS 箇条 5.2 e)
(5) HPB14での操作
HTMLを知らなくても、“編集”、“属性の変更”、“ページ情報”の順にクリックして設定が可能です。
(1) 関連するJIS
- 箇条 7.1.3.1 情報及び関係性に関する達成基準（等級A）
- 箇条 7.2.4.6 見出し及びラベルに関する達成基準（等級AA）
- 箇条 7.2.4.10 セクション見出しに関する達成基準（等級AAA）
(2) コメント
スクリーンリーダーには、h1～h6要素の文字列だけを見出しとして読み上げる機能を持つものがあります。
h1～h6要素を使わずに，フォントサイズを大きくすることで見出しに見せかけることもできますが、スクリーンリーダーは見出しとはわかりません。
なお、検索サイトの上位に表示されるようにホームページを最適化（SEO）するためにも必須です。
h1～h6要素を使わずに，フォントサイズを大きくすることで見出しに見せかけることもできますが、スクリーンリーダーは見出しとはわかりません。
なお、検索サイトの上位に表示されるようにホームページを最適化（SEO）するためにも必須です。
(3) HTMLの具体例
<h1>見出し１</h1>
<h2>見出し２</h2>
<h2>見出し２</h2>
(4) 参考資料
- Understanding WCAG 2.0 の SC 1.3.1
- Understanding WCAG 2.0 の SC 2.4.6
- Understanding WCAG 2.0 の SC 2.4.10
- 旧JIS 箇条 5.2 a)
- 旧JIS 附属書1：2.2 a)
(5) HPB14での操作
HTMLを知らなくても、文字列の選択後、“書式”、“段落”、“見出し１～見出し６のいずれか”の順にクリックして設定が可能です。
(1) 関連するJIS
- 箇条 7.2.4.8 現在位置に関する達成基準（等級AAA）
(2) コメント
トップページからそのページに至るサイトの構造を明示します。
トップページからのリンクの順にページタイトルに相当するテキストを記述し、テキストにはそのページへのリンクを張ります。
構造を示す文字列の最後にそのページのタイトルを含める場合がありますが、次の例では含めていません。
なお、GOOGLEなどの検索サイトから訪れた訪問者を、関連ページに誘導する上で効果があります。
JISの“等級AAA”に係わらず対応した方がよいでしょう。
トップページからのリンクの順にページタイトルに相当するテキストを記述し、テキストにはそのページへのリンクを張ります。
構造を示す文字列の最後にそのページのタイトルを含める場合がありますが、次の例では含めていません。
なお、GOOGLEなどの検索サイトから訪れた訪問者を、関連ページに誘導する上で効果があります。
JISの“等級AAA”に係わらず対応した方がよいでしょう。
(3) HTMLの具体例：このページの場合
<div>
<a href="../index.htm">トップページ</a>>
<a href="it-consul.htm">情報技術コンサルティング</a>>
<a href="accessibility.htm">ウェブアクセシビリティー</a>>
</div>
<a href="../index.htm">トップページ</a>>
<a href="it-consul.htm">情報技術コンサルティング</a>>
<a href="accessibility.htm">ウェブアクセシビリティー</a>>
</div>
(4) 参考資料
- Understanding WCAG 2.0 の SC 2.4.8
- 旧JIS 箇条 5.2 g)
- 旧JIS 附属書1：2.2 e)
(5) HPB14での操作
HTMLを知らなくても、通常の文字入力とリンク設定で対応が可能です。
(1) 関連するJIS
- 箇条 7.3.2.3 一貫したナビゲーションに関する達成基準（等級AA）
- 箇条 7.3.2.4 一貫した識別性に関する達成基準（等級AA）
(2) コメント
ナビゲーションやメニューの位置、表示スタイル及び表記に、サイト内で一貫性を持たせた方が操作性が良くなりますし、デザイン的にも良いでしょう。
なお、ナビゲーションやメニューがないページをたまにみかけます。その場合、GOOGLEなどの検索サイトから訪れた訪問者が関連するページや企業情報をチェックできません。
JISの“等級AA”に係わらず対応した方が良いでしょう。
なお、ナビゲーションやメニューがないページをたまにみかけます。その場合、GOOGLEなどの検索サイトから訪れた訪問者が関連するページや企業情報をチェックできません。
JISの“等級AA”に係わらず対応した方が良いでしょう。
(3) 参考資料
- Understanding WCAG 2.0 の SC 3.2.3
- Understanding WCAG 2.0 の SC 3.2.4
- 旧JIS 箇条 5.3 f)
- 旧JIS 附属書1：2.3 e)
(1) 関連するJIS
- 箇条 7.2.4.1 ブロックスキップに関する達成基準（等級A）
(2) コメント
共通に使われるナビゲーションやメニューは、スクリーンリーダーの読み上げやキーボード操作にとって、煩わしい存在です。
共通に使われるメニューの直前に画像を挿入し、本文開始位置へページ内リンクを設けることでも対応できます。
旧JISでは“推奨”でしたが、新JIS では“等級A”になりました。
共通に使われるメニューの直前に画像を挿入し、本文開始位置へページ内リンクを設けることでも対応できます。
旧JISでは“推奨”でしたが、新JIS では“等級A”になりました。
(3) HTMLの具体例
<body>
<!-- メニュースキップ設定 -->
<a href="#maintext"><img src="…" alt="メニューをスキップして本文へ"></a>
<!-- メニュー -->
<!-- 本文開始 -->
<a id="maintext" name="maintext"></a>
<!-- メニュースキップ設定 -->
<a href="#maintext"><img src="…" alt="メニューをスキップして本文へ"></a>
<!-- メニュー -->
<!-- 本文開始 -->
<a id="maintext" name="maintext"></a>
(4) 参考資料
- Understanding WCAG 2.0 の SC 2.4.1
- 旧JIS 箇条 5.3 h)
- 旧JIS 附属書1：2.3 f)
(5) HPB14での操作
HTMLを知らなくても、“画像の挿入”、“画像にリンクと代替テキストの設定”、“本文にリンクの挿入”を行うことで操作が可能ですが、画像を大きさ1×1の透明 GIF画像にした場合は多少手間取ります。
(1) 関連するJIS
- 箇条 7.2.1.2 フォーカス移動に関する達成基準（等級A）
- 箇条 7.2.4.3 フォーカス順序に関する達成基準（等級A）
- 箇条 7.2.4.7 視覚的に認識可能なフォーカスに関する達成基準（等級AA）
- 箇条 7.3.2.1 オンフォーカスに関する達成基準（等級A）
(2) コメント
キーボードのタブキー、矢印キーを使うと、操作が可能なリンクや入力欄を移動できます。
タブキーや矢印キーで操作して次の事項を確認します。標準的な HTMLの場合は、通常問題ありませんが、Scriptやオブジェクトやアプレットを使う場合は注意が必要です。
タブキーや矢印キーで操作して次の事項を確認します。標準的な HTMLの場合は、通常問題ありませんが、Scriptやオブジェクトやアプレットを使う場合は注意が必要です。
- キーボードフォーカスを移動できるか確認します。
- フォーカスの移動順序が適切か確認します。
必要なら tabindex属性でフォーカスの移動順序を指定します。 - フォーカスを移動しても状況に変化が生じないことを確認します。
(3) 参考資料
- Understanding WCAG 2.0 の SC 2.1.2
- Understanding WCAG 2.0 の SC 2.4.3
- Understanding WCAG 2.0 の SC 2.4.7
- Understanding WCAG 2.0 の SC 3.2.1
- Techniques for WCAG 2.0 の F10（不適合例）
- Techniques for WCAG 2.0 の F44（不適合例）
- Techniques for WCAG 2.0 の F52（不適合例）
- Techniques for WCAG 2.0 の F55（不適合例）
- 旧JIS 箇条 5.3 a)
- 旧JIS 附属書1：2.3 a)
(1) 関連するJIS
- 箇条 7.2.1.1 キーボード操作に関する達成基準（等級A）
- 箇条 7.2.1.3 キーボード操作に関する例外のない達成基準（等級AAA）
(2) コメント
タブキー、矢印キー、エンターキーなどですべての機能を、特定のタイミングを要することなく、操作可能か確認します。
特に、Scriptを使う場合は注意が必要です。
特に、Scriptを使う場合は注意が必要です。
(3) 参考資料
- Understanding WCAG 2.0 の SC 2.1.1
- Understanding WCAG 2.0 の SC 2.1.3
- Techniques for WCAG 2.0 の F54（不適合例）
- Techniques for WCAG 2.0 の F55（不適合例）
- Techniques for WCAG 2.0 の F42（不適合例）
- 旧JIS 箇条 5.3 a)
- 旧JIS 附属書1：2.3 a)
(1) 関連するJIS
- 箇条 7.1.4.4 テキストのサイズ変更に関する達成基準（等級AA）
- 箇条 7.1.4.8 視覚的な表現に関する達成基準（等級AAA）
(2) コメント
利用者が文字サイズを変更できよう、文字のサイズを %単位または em単位で指定します。
px単位やpt単位で文字サイズを指定すると、Internet Explorer では文字サイズを変更できませんが、Fire Fox では変更できます。
%単位またはem単位で文字サイズを指定すれば、Internet Explorer でも文字サイズを変更できます。
さらに、7.1.4.4 は、支援技術なしで200%までサイズ変更できることを求めています。
Internet Explorer では200%まで文字サイズを変更できませんが、Fire Fox では変更できます。
ブラウザの問題が大きいようです。
px単位やpt単位で文字サイズを指定すると、Internet Explorer では文字サイズを変更できませんが、Fire Fox では変更できます。
%単位またはem単位で文字サイズを指定すれば、Internet Explorer でも文字サイズを変更できます。
さらに、7.1.4.4 は、支援技術なしで200%までサイズ変更できることを求めています。
Internet Explorer では200%まで文字サイズを変更できませんが、Fire Fox では変更できます。
ブラウザの問題が大きいようです。
(3) 参考資料
- Understanding WCAG 2.0 の SC 1.4.4
- Understanding WCAG 2.0 の SC 1.4.8
- 旧JIS 箇条 5.6 a)
- 旧JIS 附属書1：2.6 a)
(1) 関連するJIS
- 箇条 7.1.4.1 色の使用に関する達成基準（等級A）
(2) コメント
例えば、入力が必須の入力欄のラベルの文字色を赤色にした場合、ラベルに“必須”を付け加えます。
(3) 参考資料
- Understanding WCAG 2.0 の SC 1.4.1
- Techniques for WCAG 2.0 の F13（不適合例）
- Techniques for WCAG 2.0 の F81（不適合例）
- 旧JIS 箇条 5.5 a)
(1) 関連するJIS
- 箇条 7.1.4.3 最低限のコントラストに関する達成基準（等級AA）
- 箇条 7.1.4.6 より十分なコントラストに関する達成基準（等級AAA）
(2) コメント
7.1.4.3 は、文字色と背景色の間に少なくとも 4.5:1 のコントラスト比をとること求めています。
7.1.4.6 は、文字色と背景色の間に少なくとも 7:1 のコントラスト比をとること求めています。
コントラスト比の計算方法は、JIS の“3.5 光及び色に関する用語及び定義”に記載されています。
コントラスト比の数値が同じでも、見え方にはかなり違いがあります。計算違いや、モニターの性能や、個人差が原因かもしれません。
コントラスト比はできれば、7:1 以上とすべきです。
ただし、コントラスト比が高くても、文字色に黒を指定すると、Windowsの機能を使ってディスプレイの表示モードをハイコントラストに変更した場合、文字色と背景色とも黒ですので、文字が見えなくなります。
JISの原文の関連資料の Techniques for WCAG 2.0 の F24 では、色指定する場合には文字色と背景色両方を指定しないと不適合としています。これを遵守すると表示モードをハイコントラストに変更した場合、文字が見えなくなる場合があります。W3Cの定めた WCAG 2.0 に適合してもアクセシビリティーが低下する場合があります。注意が必要です。
例えば、文字色を白に、背景色を 0000FF と設定する場合、コントラスト比は 8.59 となり 7.1.4.6 に適合します。ハイコントラストに変更しても、文字色が白、背景色が黒ですので問題ありません。
なお、装飾だけを目的にしている場合やロゴタイプは対象外です。また、リンクのテキストの色を指定したり下線を消したりする場合は別条件があります。
7.1.4.6 は、文字色と背景色の間に少なくとも 7:1 のコントラスト比をとること求めています。
コントラスト比の計算方法は、JIS の“3.5 光及び色に関する用語及び定義”に記載されています。
コントラスト比の数値が同じでも、見え方にはかなり違いがあります。計算違いや、モニターの性能や、個人差が原因かもしれません。
コントラスト比はできれば、7:1 以上とすべきです。
ただし、コントラスト比が高くても、文字色に黒を指定すると、Windowsの機能を使ってディスプレイの表示モードをハイコントラストに変更した場合、文字色と背景色とも黒ですので、文字が見えなくなります。
JISの原文の関連資料の Techniques for WCAG 2.0 の F24 では、色指定する場合には文字色と背景色両方を指定しないと不適合としています。これを遵守すると表示モードをハイコントラストに変更した場合、文字が見えなくなる場合があります。W3Cの定めた WCAG 2.0 に適合してもアクセシビリティーが低下する場合があります。注意が必要です。
例えば、文字色を白に、背景色を 0000FF と設定する場合、コントラスト比は 8.59 となり 7.1.4.6 に適合します。ハイコントラストに変更しても、文字色が白、背景色が黒ですので問題ありません。
なお、装飾だけを目的にしている場合やロゴタイプは対象外です。また、リンクのテキストの色を指定したり下線を消したりする場合は別条件があります。
(3) コントラスト比の例
文字色が黒の場合に背景色を変えた例です。文字は背景色の値です。計算違いは無いと思いますが、コントラスト比を保証するものではありません。
(3.1) コントラスト比 4.5:1
(3.2) コントラスト比 7:1
(4) 参考資料
- Understanding WCAG 2.0 の SC 1.4.3
- Understanding WCAG 2.0 の SC 1.4.6
- Techniques for WCAG 2.0 の F24（不適合例）
- 旧JIS 箇条 5.6 c)
(1) 関連するJIS
- 箇条 7.1.3.3 感覚的な特徴に関する達成基準（等級A）
(2) コメント
例えば、○、△のような記号は、手持ちのスクリーンリーダーでは読み上げできません。記号の×は、“かける”と読み上げます。
記号を用いる場合は、“○（まる）”のように記述する方が良いでしょう。
その他の例を次に挙げます。
記号を用いる場合は、“○（まる）”のように記述する方が良いでしょう。
その他の例を次に挙げます。
- 悪い例：丸ボタンを押す。（形だけに依存）
- 良い例：次へと書かれた丸ボタンを押す。
- 悪い例：右のボタンを押す。（位置だけに依存）
- 良い例：次へと書かれた右のボタンを押す。
(3) 参考資料
- Understanding WCAG 2.0 の SC 1.3.3
- Techniques for WCAG 2.0 の G96
- Techniques for WCAG 2.0 の F14（不適合例）
- Techniques for WCAG 2.0 の F26（不適合例）
- 旧JIS 箇条 5.5 b)
- 旧JIS 附属書1：2.5 a)
(1) 関連するJIS
- 箇条 7.1.3.2 意味のある順序に関する達成基準（等級A）
(2) コメント
単語の文字間にスペースや改行を入れると、スクリーンリーダーで正しく読み上げられません。
なお、検索サイトの上位に表示されるようにホームページを最適化（SEO）するためにも必須です。
なお、検索サイトの上位に表示されるようにホームページを最適化（SEO）するためにも必須です。
(3) 参考資料
- Understanding WCAG 2.0 の SC 1.3.2
- Techniques for WCAG 2.0 の F32（不適合例）
- 旧JIS 箇条 5.9 e)
- 旧JIS 附属書1：2.7 d)
(1) 関連するJIS
- 箇条 7.1.3.1 情報及び関係性に関する達成基準（等級A）
(2) コメント
表題を表の上にcaption要素で適切に付けます。見出し項目はth要素で指定すると共にscope属性を付けます。
scope属性は、列の見出しの場合 scope="col"、行の見出しの場合 scope="row"と記述します。
手持ちのスクリーンリーダーでは、表題またはth要素があると、表として読み上げます。表題とth要素が無い場合、レイアウトと見なします。
表組みの要素（table要素）をレイアウトに使う場合には表題、th要素は付けてはいけません。
scope属性は、列の見出しの場合 scope="col"、行の見出しの場合 scope="row"と記述します。
手持ちのスクリーンリーダーでは、表題またはth要素があると、表として読み上げます。表題とth要素が無い場合、レイアウトと見なします。
表組みの要素（table要素）をレイアウトに使う場合には表題、th要素は付けてはいけません。
(3) HTMLの具体例
<table border="1">
<caption>会社情報</caption>
<tbody>
<tr><th scope="col">会社名</th><th scope="col">資本金</th><th scope="col">従業員</th></tr>
<tr><th scope="row">Ａ社</th><td>１千万</td><td>10名</td></tr>
<tr><th scope="row">Ｂ社</th><td>２千万</td><td>20名</td></tr>
</tbody></table>
<caption>会社情報</caption>
<tbody>
<tr><th scope="col">会社名</th><th scope="col">資本金</th><th scope="col">従業員</th></tr>
<tr><th scope="row">Ａ社</th><td>１千万</td><td>10名</td></tr>
<tr><th scope="row">Ｂ社</th><td>２千万</td><td>20名</td></tr>
</tbody></table>
(4) 参考資料
- Understanding WCAG 2.0 の SC 1.3.1
- Techniques for WCAG 2.0 の H63
- 旧JIS 箇条 5.2 c)
- 旧JIS 附属書1：2.2 c)
(5) HPB14での操作
表題の場合は、HTMLを知らなくても、“表”、“表題の挿入”の順にクリックして設定が可能です。
th要素の場合は、HTMLを知らなくても、セルの選択後、“編集”、“属性の変更”の順にクリックしてセル一つずつ設定が可能です。
scope属性は、タグ一覧で設定できますが、HTMLを知らないと困難でしょう。
th要素の場合は、HTMLを知らなくても、セルの選択後、“編集”、“属性の変更”の順にクリックしてセル一つずつ設定が可能です。
scope属性は、タグ一覧で設定できますが、HTMLを知らないと困難でしょう。
(1) 関連するJIS
- 箇条 7.1.3.1 情報及び関係性に関する達成基準（等級A）
(2) コメント
複雑な表の場合は、id属性と headers属性を付けます。参考資料をご覧ください。
(3) 参考資料
- Understanding WCAG 2.0 の SC 1.3.1
- Techniques for WCAG 2.0 の H73
- Techniques for WCAG 2.0 の H43
- 旧JIS 箇条 5.2 c)
- 旧JIS 附属書1：2.2 c)
(1) 関連するJIS
- 箇条 7.1.3.1 情報及び関係性に関する達成基準（等級A）
(2) コメント
スクリーンリーダーには、ul要素、ol要素で記述された文字列だけをリストとして読み上げる機能を持つものがあります。
ul要素、ol要素を使わずに、記号や画像を使ってリストに見せかけることもできますが、スクリーンリーダーはリストとはわかりません。
ul要素、ol要素を使わずに、記号や画像を使ってリストに見せかけることもできますが、スクリーンリーダーはリストとはわかりません。
(3) 参考資料
- Understanding WCAG 2.0 の SC 1.3.1
- 旧JIS 箇条 5.2 a)
(4) HPB14での操作
HTMLを知らなくても、“挿入”、“リスト”の順にクリックして設定が可能です。
(1) 関連するJIS
- 箇条 7.1.1.1 非テキストコンテンツに関する達成基準（等級A）
(2) コメント
画像に代替テキストがalt属性で記述されていると、スクリーンリーダーは、代替テキストを読み上げます。
画像に代替テキストがalt属性で記述されていないと、スクリーンリーダーで違いがあるようですが、画像を無視したりします。
なお、検索サイトの上位に表示されるようにホームページを最適化（SEO）するためにも必須です。
画像に代替テキストがalt属性で記述されていないと、スクリーンリーダーで違いがあるようですが、画像を無視したりします。
なお、検索サイトの上位に表示されるようにホームページを最適化（SEO）するためにも必須です。
(3) HTMLの具体例
(3.1) 通常の画像
img要素の alt属性に画像の説明を記述します。
<img src="…" alt="画像の説明" />
(3.2) 装飾用画像
スクリーンリーダーが読み飛ばして構わない装飾用画像などの場合、img 要素の alt属性を空にします。
<img src="…" alt="" /> または、
<img src="…" alt=" " />
<img src="…" alt=" " />
(3.3) 画像ボタン
input要素の alt属性に画像の説明を記述します。
<input type="image" src="…" alt="画像の説明" />
(3.4) 画像グループ
グループの代替テキストを画像の一つに付けます。
<img src="…" alt="代替テキスト">
<img src="…" alt="">
<img src="…" alt="">
<img src="…" alt="">
<img src="…" alt="">
(3.5) イメージマップ
img要素の alt属性に画像の説明を記述し、area要素の alt属性にリンク先の説明を記述します。
<img src="…" usemap="#map1" alt="画像用テキスト" />
<map id="map1" name="map1">
<area shape="…" href="…" alt="エリア用テキスト" />
<area shape="…" href="…" alt="エリア用テキスト" /></map>
<map id="map1" name="map1">
<area shape="…" href="…" alt="エリア用テキスト" />
<area shape="…" href="…" alt="エリア用テキスト" /></map>
(4) 参考資料
- Understanding WCAG 2.0 の SC 1.1.1
- Techniques for WCAG 2.0 の H67
- Techniques for WCAG 2.0 の G196
- 旧JIS 箇条 5.4 a)
- 旧JIS 附属書1：2.4 a)
(5) HPB14での操作
HTMLを知らなくても、画像を選択し、“編集”、“属性の変更”、“画像”の順にクリックして設定が可能です。
(1) 関連するJIS
- 箇条 7.1.1.1 非テキストコンテンツに関する達成基準（等級A）
(2) コメント
ディスプレイの表示モードをハイコントラストにすると、背景画像は見えなくなります。
通販サイトなど商業系サイトの中には、「購入」ボタンや「ログイン」ボタンや「メニュー」が見えなくなるサイトがあります。
背景画像は装飾用です。背景画像で重要な情報を伝えようとしてはいけません。
通販サイトなど商業系サイトの中には、「購入」ボタンや「ログイン」ボタンや「メニュー」が見えなくなるサイトがあります。
背景画像は装飾用です。背景画像で重要な情報を伝えようとしてはいけません。
(3) 参考資料
- Understanding WCAG 2.0 の SC 1.1.1
- Techniques for WCAG 2.0 の F3（不適合例）
(1) 関連するJIS
- 箇条 7.1.4.1 色の使用に関する達成基準（等級A）
(2) コメント
例えば、グラフの場合、引き出し線を付け領域の違いをテキストで表します。
あるいは、色とパターンを併用する方法も考えられます。
あるいは、色とパターンを併用する方法も考えられます。
(3) 参考資料
- Understanding WCAG 2.0 の SC 1.4.1
- Techniques for WCAG 2.0 の G111
- 旧JIS 箇条 5.5 a)
(1) 関連するJIS
- 箇条 7.1.4.5 画像化された文字に関する達成基準（等級AA）
- 箇条 7.1.4.9 画像化された文字に関する例外のない達成基準（等級AAA）
(2) コメント
例えば、メニューは画像化された文字を使わなくてもテキストだけで表現可能です。
なお、ロゴタイプは対象外です。
なお、ロゴタイプは対象外です。
(3) 参考資料
- Understanding WCAG 2.0 の SC 1.4.5
- Understanding WCAG 2.0 の SC 1.4.9
(1) 関連するJIS
- 箇条 7.1.4.3 最低限のコントラストに関する達成基準（等級AA）
- 箇条 7.1.4.6 より十分なコントラストに関する達成基準（等級AAA）
(2) コメント
7.1.4.3 は、文字色と背景色の間に少なくとも 4.5:1 のコントラスト比をとること求めています。
7.1.4.6 は、文字色と背景色の間に少なくとも 7:1 のコントラスト比をとること求めています。
コントラスト比の計算方法は、JIS の“3.5 光及び色に関する用語及び定義”に記載されています。
コントラスト比の数値が同じでも、見え方にはかなり違いがあります。計算違いや、モニターの性能や、個人差が原因かもしれません。
コントラスト比はできれば、7:1 以上とすべきです。
ただし、コントラスト比が高くても、文字色が黒の透過画像は、Windowsの機能を使ってディスプレイの表示モードをハイコントラストに変更した場合、文字が見えなくなります。
なお、ロゴタイプは対象外です。
7.1.4.6 は、文字色と背景色の間に少なくとも 7:1 のコントラスト比をとること求めています。
コントラスト比の計算方法は、JIS の“3.5 光及び色に関する用語及び定義”に記載されています。
コントラスト比の数値が同じでも、見え方にはかなり違いがあります。計算違いや、モニターの性能や、個人差が原因かもしれません。
コントラスト比はできれば、7:1 以上とすべきです。
ただし、コントラスト比が高くても、文字色が黒の透過画像は、Windowsの機能を使ってディスプレイの表示モードをハイコントラストに変更した場合、文字が見えなくなります。
なお、ロゴタイプは対象外です。
(3) コントラスト比の例
“文章”に記載した例をご覧ください。
(4) 参考資料
- Understanding WCAG 2.0 の SC 1.4.3
- Understanding WCAG 2.0 の SC 1.4.6
- 旧JIS 箇条 5.5 c)
- 旧JIS 附属書1：2.5 b)
(1) 関連するJIS
- 箇条 7.1.3.1 情報及び関係性に関する達成基準（等級A）
(2) コメント
a要素を使って設定します。
scriptを使ったリンク設定は不適合です。
scriptを使ったリンク設定は不適合です。
(3) 参考資料
- Understanding WCAG 2.0 の SC 1.3.1
- Techniques for WCAG 2.0 の F42（不適合例）
(4) HPB14での操作
a要素を使った通常のリンクは、HTMLを知らなくても、“挿入”、“リンク”の順にクリックして設定が可能です。
(1) 関連するJIS
- 箇条 7.1.1.1 非テキストコンテンツに関する達成基準（等級A）
- 箇条 7.1.3.1 情報及び関係性に関する達成基準（等級A）
- 箇条 7.2.4.4 文脈におけるリンクの目的に関する達成基準（等級A）
- 箇条 7.2.4.9 リンクの目的に関する達成基準（等級AAA）
(2) コメント
リンク先の説明を次の箇所に適切に記述します。
- リンク用テキスト
- リンク用画像のalt属性
(3) HTMLの具体例
(3.1) リンク用テキスト
<a href="…">リンク先の説明</a>
(3.2) リンク用画像
画像だけでリンクを設定する場合、img要素の alt属性にリンク先の説明を記述します。
画像と画像に隣接するテキストでリンクを設定する場合、img 要素の alt属性を空にする、または img 要素の alt属性にテキストと異なる記述をします。img 要素の alt属性にテキストと同じ記述をするとスクリーンリーダーが二度読みする可能性があります。
画像と画像に隣接するテキストでリンクを設定する場合、img 要素の alt属性を空にする、または img 要素の alt属性にテキストと異なる記述をします。img 要素の alt属性にテキストと同じ記述をするとスクリーンリーダーが二度読みする可能性があります。
<a href="…"><img src="…" alt="リンク先の説明" /></a>
<a href="…"><img src="…" alt="" />リンク先の説明</a>
<a href="…"><img src="…" alt="代替テキスト" />リンク先の説明</a>
<a href="…"><img src="…" alt="" />リンク先の説明</a>
<a href="…"><img src="…" alt="代替テキスト" />リンク先の説明</a>
(4) 参考資料
- Understanding WCAG 2.0 の SC 1.1.1
- Understanding WCAG 2.0 の SC 1.3.1
- Understanding WCAG 2.0 の SC 2.4.4
- Understanding WCAG 2.0 の SC 2.4.9
- 旧JIS 箇条 5.4 a)
- 旧JIS 箇条 5.4 b)
- 旧JIS 附属書1：2.4 a)
- 旧JIS 附属書1：2.4 b)
(1) 関連するJIS
- 箇条 7.2.4.4 文脈におけるリンクの目的に関する達成基準（等級A）
- 箇条 7.3.2.5 利用者の要求による状況の変化に関する達成基準（等級AAA）
(2) コメント
新しいウィンドウを開いてページを表示する場合、知らないうちに新しいウインドウが開くと操作に戸惑います。
リンク用テキストあるいは title属性に新しいウインドウで開くことを明示します。
a要素の title属性をスクリーンリーダーが読み上げる場合があります。
なお、サイト外にリンクする場合、新しいウィンドウで表示するようにリンクを設定することがマナーとされています。
リンク用テキストあるいは title属性に新しいウインドウで開くことを明示します。
a要素の title属性をスクリーンリーダーが読み上げる場合があります。
なお、サイト外にリンクする場合、新しいウィンドウで表示するようにリンクを設定することがマナーとされています。
(3) 参考資料
- Understanding WCAG 2.0 の SC 2.4.4
- Understanding WCAG 2.0 の SC 3.2.5
- Techniques for WCAG 2.0 の H33
- Techniques for WCAG 2.0 の H83
- 旧JIS 箇条 5.3 e)
- 旧JIS 附属書1：2.3 d)
(4) HTMLの具体例
<a href="…" target="_blank">リンク先の説明（別ウィンドウで表示）</a>
<a href="…" target="_blank" title="新しいウィンドウで表示">リンク先の説明</a>
<a href="…" target="_blank" title="新しいウィンドウで表示">リンク先の説明</a>
(5) HPB14での操作
title属性は、タグ一覧で設定できますが、HTMLを知らないと困難でしょう。
(1) 関連するJIS
- 箇条 7.1.4.1 色の使用に関する達成基準（等級A）
(2) コメント
リンク用テキストの文字色や下線に関するデフォルトの設定を変更する場合、次の条件例があります。
- リンク用テキストと周辺の文字色の間に少なくとも 3:1のコントラスト比をとる
- リンク用テキストと背景色の間に少なくとも 4.5:1のコントラスト比をとる
- リンクにマウスポインタを当てた場合に下線を表示する
(3) 参考資料
- Understanding WCAG 2.0 の SC 1.4.1
- Techniques for WCAG 2.0 の G182
- Techniques for WCAG 2.0 の G183
- Techniques for WCAG 2.0 の F73（不適合例）
(1) 関連するJIS
- 箇条 7.1.1.1 非テキストコンテンツに関する達成基準（等級A）
- 箇条 7.1.3.1 情報及び関係性に関する達成基準（等級A）
- 箇条 7.2.4.6 見出し及びラベルに関する達成基準（等級AA）
- 箇条 7.3.3.2 ラベル又は説明文に関する達成基準（等級A）
(2) コメント
テキスト入力欄、ラジオボタン、チェックボックスなどに label要素でラベル（項目名）を付けます。
テキスト入力欄の場合、テキスト入力欄の前にラベルを付けます。
ラジオボタンの場合、ラジオボタンの後ろにラベルを付けます。
チェックボックスの場合、チェックボックスの後ろにラベルを付けます。
ラベル部分をクリックすると、テキスト入力欄、ラジオボタン、チェックボックスを選択できるようになります。
テキスト入力欄の場合、テキスト入力欄の前にラベルを付けます。
ラジオボタンの場合、ラジオボタンの後ろにラベルを付けます。
チェックボックスの場合、チェックボックスの後ろにラベルを付けます。
ラベル部分をクリックすると、テキスト入力欄、ラジオボタン、チェックボックスを選択できるようになります。
(3) HTMLの具体例
<label for="box1">お名前</label><input type="text" id="box1">
<input type="radio" id="yes1"><label for="yes1">はい</label>
<input type="radio" id="yes1"><label for="yes1">はい</label>
(4) 参考資料
- Understanding WCAG 2.0 の SC 1.1.1
- Understanding WCAG 2.0 の SC 1.3.1
- Understanding WCAG 2.0 の SC 2.4.6
- Understanding WCAG 2.0 の SC 3.3.2
- 旧JIS 箇条 5.3 b)
- 旧JIS 附属書1：2.3 c)
(5) HPB14での操作
labelの設定は、文字列選択後、“挿入”、“その他 HTMLタグ”の順にクリックし labelタグを選択することでできます。
for属性と id属性はタグ一覧で設定できますが、HTMLを知らないと困難でしょう。
for属性と id属性はタグ一覧で設定できますが、HTMLを知らないと困難でしょう。
(1) 関連するJIS
- 箇条 7.3.2.2 ユーザインタフェースコンポーネントによる状況の変化に関する達成基準（等級A）
(2) コメント
利用者が使用する前にその挙動を知らせてある場合を除いて、入力部品に入力しただけでは状況に変化が生じないようにします。
注意すべき例として次の例があります。
注意すべき例として次の例があります。
- onchange で送信
- onclick で送信
(3) 参考資料
- Understanding WCAG 2.0 の SC 3.2.2
- Techniques for WCAG 2.0 の F36（不適合例）
- Techniques for WCAG 2.0 の F37（不適合例）
(1) 関連するJIS
- 箇条 7.3.3.1 入力エラー箇所の特定に関する達成基準（等級A）
- 箇条 7.3.3.3 入力エラー修正方法の提示に関する達成基準（等級AA）
- 箇条 7.3.3.4 法的義務，金銭的取引，データ変更及び回答送信のエラー回避に関する達成基準（等級AA）
- 箇条 7.3.3.6 エラー回避に関する例外のない達成基準（等級AAA）
(2) コメント
入力エラーが自動的に発見された場合は、エラーを利用者にテキストで説明します。
フォームメールの場合、レンタルサーバー業者などが提供するサンプルCGIを利用すれば確認画面の表示、入力エラーがある場合のエラー明示を行える場合があります。
7.3.3.3 は、入力エラーが自動的に発見され修正方法が明らかな場合、修正方法を利用者に提示することを求めています。
7.3.3.4 と 7.3.3.6 は、送信後の取消、またはチェック、または利用者のよる送信前の確認(点検、確認、修正)を求めています。
ビジネスサイトでは、利用者のよる送信前の“確認”は必須でしょう。
フォームメールの場合、レンタルサーバー業者などが提供するサンプルCGIを利用すれば確認画面の表示、入力エラーがある場合のエラー明示を行える場合があります。
7.3.3.3 は、入力エラーが自動的に発見され修正方法が明らかな場合、修正方法を利用者に提示することを求めています。
7.3.3.4 と 7.3.3.6 は、送信後の取消、またはチェック、または利用者のよる送信前の確認(点検、確認、修正)を求めています。
ビジネスサイトでは、利用者のよる送信前の“確認”は必須でしょう。
(3) 参考資料
- Understanding WCAG 2.0 の SC 3.3.1
- Understanding WCAG 2.0 の SC 3.3.3
- Understanding WCAG 2.0 の SC 3.3.4
- Understanding WCAG 2.0 の SC 3.3.6
- 旧JIS 箇条 5.3 i)
- 旧JIS 附属書1：2.3 g)
(1) 関連するJIS
- 箇条 7.2.2.1 調整可能な制限時間に関する達成基準（等級A）
- 箇条 7.3.2.5 利用者の要求による状況の変化に関する達成基準（等級AAA）
(2) コメント
meta要素の refresh属性を使用すると一定時間後に別ページに自動的に移動することができます。
この時間制限をゼロにしないといけません。
この時間制限をゼロにしないといけません。
(3) HTMLの具体例
<meta http-equiv="refresh" content="0; URL=…" />
(4) 参考資料
- Understanding WCAG 2.0 の SC 2.2.1
- Understanding WCAG 2.0 の SC 3.2.5
- Techniques for WCAG 2.0 の H76
- Techniques for WCAG 2.0 の F41（不適合例）
- 旧JIS 箇条 5.3 e)
- 旧JIS 附属書1：2.3 d)
(1) 関連するJIS
- 箇条 7.4.1.1 構文解析に関する達成基準（等級A）
(2) コメント
文法（構文）チェックを行いエラーがないか確認します。
(3) 参考資料
- Understanding WCAG 2.0 の SC 4.1.1
- 旧JIS 箇条 5.1 a)
(4) HPB14での操作
“ツール”、“HTML構文チェック”の順にクリックすることでチェックできます。
(1) 関連するJIS
- 箇条 7.4.1.2 プログラムが解釈可能な識別名，役割及び設定可能な値に関する達成基準（等級A）
(2) コメント
HTMLの場合、標準的な HTMLのユーザインタフェース（入力部品、リンク）を使用している場合は、7.4.1.2に非該当です。
独自のユーザインタフェースコンポーネントを使用している場合は、参考資料をご覧ください。
独自のユーザインタフェースコンポーネントを使用している場合は、参考資料をご覧ください。
(3) 参考資料
- Understanding WCAG 2.0 の SC 4.1.2