適応可能のガイドライン
1.3.1情報及び関係性の達成基準（レベルA）
コンテンツを適切に構造化する
この達成基準は、視覚的または聴覚的な手段に依存せずに、すべての利用者に情報や関係性を伝えることを目的としています。視覚的手がかり（例:
フォントの大きさや太さ、間隔）と同様に、非視覚的な手段でも情報の構造を理解できるように、適切なマークアップを使用します。
実践すべきこと
WCAG 2.0
構造化マークアップの使用
- 文書の構造を明確にするために、見出し（h1～h6）、リスト（ul、ol）、表（table）などを適切に使用する。
意味のあるマークアップ
- table要素では、説明のためのcaption要素と見出しセルを示すth要素を設定する。
- 段落の区切りに連続する改行（br要素）の使用は避ける。
フォームとラベル
- テキストのラベルとフォームコントロールを関連付けるために、label要素を使用する。
視覚的手がかりの補足
- 太字や色分けなどの視覚的手がかりだけに依存せず、テキストによる説明を提供して、視覚障害がある利用者も情報を得られるようにする。
運用者への注意
誤用の回避
- 見出しタグは装飾目的ではなく、構造を示すために使用する。
- 箇条書きは視覚的だけで作らず、リスト（ul、ol）を使用する。
- 改行（br要素）を使って段落を作らないようにする。
- コンテンツに不要な空要素やHTML要素がないか確認する。
読み上げへの対応
- 連続したbrはスクリーンリーダーで読み上げるため使用しない。
- strong、emはスクリーンリーダーでは読み上げない。
開発者への注意
意味的なマークアップ
- HTML要素のセマンティクス（意味）に基づいてコンテンツをマークアップすることが重要。
- アクセシビリティを考慮し、コンテンツの構造と情報の関係性を意識する。
1.3.2意味のある順序の達成基準（レベルA）
コンテンツを理解しやすい順序で提供する
この達成基準は、コンテンツの意味を理解する上で必要な読み上げ順序を維持することを目的としています。読み上げ順序が維持されていない場合、スクリーンリーダーなどの支援技術を使用する利用者は、コンテンツを正しく理解できず混乱する恐れがあります。
実践すべきこと
WCAG 2.0
論理的な配置
- コンテンツを意味のある順序で配置し、スクリーンリーダーやその他の支援技術を使っても、意図した通りに情報が伝わるようにする。
正しい階層の維持
- 見出しタグ（例: h3の後にh2を置く）の順序を逆にしないなど、文書の階層構造を正しく保持する。
運用者への注意
不要なスペースの避ける
- 「日 時」のような単語間に不必要なスペースやタグの使用を避ける。
自然な表現を使用
- 「2024年01月01日」より「2024年1月1日」のようにより自然な形にする。
読み上げへの対応
- 脚注をつける場合、リンクをつけるか「脚注1」など明確にする。
- 見出しに連続した改行<br>があるとスクリーンリーダーでは空の見出しが存在するように読み上げるので注意する。
- 装飾文字を使用しても良いが装飾文字だけで意味を伝えないようにする。
-
9:30～17:00を「きゅうころんさんじゅうなみせんじゅうななころんれい」と読む。可能であれば「9時30分から17時」とした方がより良い。
開発者への注意
論理的なマークアップ
- コンテンツをマークアップする際は、意味のある情報の流れを維持するように、論理的な順序を心がける。
支援技術のための構造
- スクリーンリーダーやその他の支援技術がコンテンツを正確に解釈できるよう、適切なHTML構造を心がける。
読み上げへの対応
-
「aria-label="ページネーション"」というランドマーク名ではなく「aria-label="ページ切り替え"」など伝わりやすい呼び名を心がける。
- 画像とテキストが同じタグ内に存在するとスクリーンリーダーでは聞き取りづらいので分けることが望ましい（「<p><画像
alt="画像の説明">テキストテキスト</p>」より「<div><画像
alt="画像の説明"><p>テキストテキスト</p></div>」）。
1.3.3感覚的な特徴の達成基準（レベルA）
コンテンツの理解に必要な情報は形や大きさ、方向など感覚的な情報だけでなくテキストでも提供する
この達成基準は、視覚的な情報を利用できない利用者でもコンテンツを理解できるようにすることを目的としています。スクリーンリーダーなどの支援技術を使用している利用者が、形状や大きさ、方向などの感覚的な情報に依存しなくても、必要な情報を得られるようにテキストによる説明を提供することが必要です。
実践すべきこと
WCAG 2.0
曖昧なリンクテキストの使用を避ける
- 「こちら」や「ここをクリック」のような表現ではなく、リンクの目的地や内容について具体的な説明を提供する。
テキストでの情報提供
- 形状、大きさ、位置、方向に関する情報を、テキストでも明確に伝える。
運用者への注意
リンクの説明
- リンクには遷移先のタイトルや内容を正確に伝えるための具体的な説明を用いる。
空間的な指示の使用
- 「下記」のような空間的な指示は、コンテンツの理解を助ける形で、適切に配置されている限り使用しても構わない。
- ただし、これらの指示が誤解を招かないように注意が必要。
開発者への注意
テキスト説明の追加
- 感覚的特徴に関する情報を補う形で、コンテンツ内で提供される情報をテキスト形式で明確に説明する。
アクセシビリティへの配慮
- アクセシビリティを損なう可能性のある表現を避け、すべてのユーザーが情報を平等に理解できるように努める。
1.3.4 表示の向きの達成基準（レベルAA）【WCAG 2.1】
表示の向きは固定しない
この達成基準は、コンテンツの「表示の向き」は、利用者の好みの向き（縦向きまたは横向き）でアクセス可能であることを保証することを目的としています。
実践すべきこと
WCAG 2.1
縦向きと横向きの両方をサポート
- 例外的に必要不可欠な場合を除き、利用者がデバイスの向きを固定していても、コンテンツや機能が失われないようにする。
- 表示の向きを固定する場合は、利用者に不利益がないよう十分に検討する。
運用者への注意
定期的な確認
- 新規ページや更新されたコンテンツにおいて、表示の向きを固定していないかを定期的にチェックする。
開発者への注意
縦向きと横向きの両方をサポート
- メディアクエリを使用して、表示の向きに応じたスタイルを適用する。
絶対値の使用は最小限
- コンテンツの幅や高さを指定する際は、絶対値の使用は最小限に留める。
1.3.5 入力目的の特定の達成基準（レベルAA）【WCAG 2.1】
入力フィールドはautocomplete属性などで自動入力できるようにする
この達成基準は、入力フィールドで入力する内容を、プログラムが解釈可能な形で指定することを目的としています。これにより、利用者が入力フィールドの目的を理解しやすくなり、特に認知障害のある人にとってフォームの入力が容易になります。
実践すべきこと
WCAG 2.1
autocomplete属性の使用
- 入力フィールドにautocomplete属性を使用する。
運用者への注意
定期的な確認
- 新規ページや更新されたコンテンツにおいて、適切にautocomplete属性を使用しているかを定期的にチェックする。
開発者への注意
適切なautocomplete属性値の設定
- 入力フィールドに対して適切なautocomplete属性の値を設定し、利用者が以前に入力したブラウザの情報を提案しやすくする。
1.3.6 目的の特定の達成基準（レベルAAA）
WCAG 2.1 解説書
目次へ戻る