JIS X 8341-3:2016の「1.4 判別可能」は、ウェブページの前景にある情報を背景から区別し、利用者が見たり聞いたりしやすくするためのガイドラインです。
配色だけでなく、音声の制御、文字のコントラスト、文字の拡大、文字画像の扱いも対象になります。
「判別可能」に含まれる九つの達成基準をレベル別に整理し、実務で先に確認したいレベルAとAAの対応方法を具体例とともに説明します。
「判別可能」が扱う範囲
判別可能とは、利用者が必要な情報を背景や周囲の要素から見分け、聞き分けられるようにする考え方です。
視覚情報では文字と背景のコントラストや色の使い方、聴覚情報では自動再生される音声や背景音との分離が中心になります。
JIS X 8341-3:2016の規格本文は、ISO/IEC 40500:2012およびWCAG 2.0と一致する内容です。
規格同士の関係は、サイト内の「ISO/IEC 40500とWCAGの関係」で確認できます。
一方、字幕や文字起こしは主に「1.2 時間依存メディア」、点滅は「2.3 発作の防止」、自動更新やスライダーの一時停止は「2.2 十分な時間」で扱います。
どれも大切な対応ですが、「1.4 判別可能」の達成基準とは分けて確認する必要があります。
1.4.1〜1.4.9の達成基準
「判別可能」には、レベルAが二つ、AAが三つ、AAAが四つあります。
次の表は、各達成基準が求める内容を実装時に確認しやすい言葉で整理したものです。
| 達成基準 | レベル | 確認する内容 |
|---|---|---|
| 1.4.1 色の使用 | A | 色だけを、情報、操作、回答の要求、要素の区別を伝える唯一の手段にしない。 |
| 1.4.2 音声の制御 | A | 三秒を超えて自動再生する音声には、一時停止または停止する仕組みか、システム音量とは別に調整できる仕組みを設ける。 |
| 1.4.3 コントラスト（最低限レベル） | AA | 文字と文字画像は原則4.5:1以上、大きな文字は3:1以上のコントラスト比を確保する。 |
| 1.4.4 テキストのサイズ変更 | AA | 支援技術を使わずに文字を200％まで拡大しても、情報や機能が失われないようにする。 |
| 1.4.5 文字画像 | AA | 同じ見た目を実現できる場合は、文字を画像にせず実際のテキストで提供する。 |
| 1.4.6 コントラスト（高度レベル） | AAA | 文字と文字画像は原則7:1以上、大きな文字は4.5:1以上のコントラスト比を確保する。 |
| 1.4.7 小さな背景音又は背景音なし | AAA | 主に発話で構成される収録済み音声では、背景音をなくす、消せるようにする、または前景音より20デシベル以上小さくする。 |
| 1.4.8 視覚的提示 | AAA | 文章の色、行幅、行間、配置、拡大などを利用者が読みやすく調整できるようにする。 |
| 1.4.9 文字画像（例外なし） | AAA | 純粋な装飾や、特定の見た目が情報に不可欠な場合を除き、文字画像を使わない。 |
適合レベルAAを目標にする場合、「判別可能」については1.4.1から1.4.5までを確認します。
AAAの四項目は、より高い水準を目指す場合の基準です。
レベルAとAAの実装方法
色だけで意味を伝えない
必須項目を赤色にするだけでは、色の違いを判別しにくい利用者に意味が伝わらない場合があります。
「必須」という文字を添え、入力エラーには枠線、アイコン、具体的なメッセージなどを組み合わせます。
グラフでも、系列を色だけで分けるのではなく、線種、記号、直接表示するラベルを併用します。
詳しい考え方と例は「1.4.1「色の使用」の解説」も参照してください。
自動再生する音声を制御できるようにする
ページを開いたときに音声が三秒を超えて自動再生される場合は、利用者が一時停止または停止できる操作を用意します。
別の方法として、端末全体の音量とは独立して音量を調整できる仕組みも認められます。
実装前に、自動再生が本当に必要かを見直すことも大切です。
予期しない音声は、スクリーンリーダーの読み上げや周囲の音を聞き取りにくくする可能性があります。
文字と背景のコントラスト比を測る
コントラスト比は、文字などの前景色と背景色の明るさの差を数値で表したものです。
通常の文字は4.5:1以上、大きな文字は3:1以上を基準に確認します。
ただし、ロゴの文字、装飾だけを目的とする文字、利用できない状態のUIなどには例外があります。
判定方法や確認時の注意点は「コントラスト比の基準と確認方法」で詳しく説明しています。
200％に拡大しても情報と操作を保つ
1.4.4は、最小フォントサイズを固定値で指定する達成基準ではありません。
「12pt以上なら適合」とは判断できず、文字を200％まで拡大したときに、文章が途中で隠れたり、ボタンを操作できなくなったりしないことを確認します。
CSSでは文字サイズや領域の高さを固定しすぎず、内容に応じて表示領域が広がる設計にします。
ブラウザの文字サイズ変更機能を使い、見出し、本文、ナビゲーション、フォーム、ダイアログまで実際に操作して検証します。
文字を画像にしない
見出しやボタンの文字を画像にすると、利用者が文字サイズや配色を変更しにくくなります。
HTMLのテキストとCSSで同じ表現を実現できる場合は、画像ではなくテキストを使います。
ロゴのように特定の見た目が不可欠な場合や、利用者が文字画像の見た目を要望に合わせて変更できる場合は例外です。
画像を使う必要性を説明できるかどうかも、レビュー時の判断材料になります。
公開前の確認手順
- 対象を洗い出す：色で示す状態、自動再生音声、文字と背景の組み合わせ、固定サイズの領域、文字画像を一覧にします。
- 目標レベルを確認する：レベルAまたはAAなど、サイトが目標とする適合レベルに必要な達成基準を選びます。
- 実際の状態で検証する：通常時だけでなく、エラー、選択、ホバー、フォーカス、文字拡大後の状態も確認します。
- 問題と修正を記録する：該当する達成基準、発生箇所、再現手順、修正内容を残します。
- 更新後に再確認する：配色やコンポーネントを変更したときは、以前に合格した箇所も再検証します。
自動チェックツールは、色の組み合わせや一部の実装を探す助けになります。
ただし、色以外の手掛かりが意味を正しく伝えているか、200％拡大後も操作できるかといった点は、画面を見て操作する確認も必要です。
WCAG 2.1と2.2の関係
1.4.1から1.4.9は、JIS X 8341-3:2016とWCAG 2.0に含まれる達成基準です。
WCAG 2.1では「判別可能」に1.4.10から1.4.13が追加され、WCAG 2.2にも引き継がれています。
新しいウェブサイトや改修案件では、JIS X 8341-3:2016の確認に加えて、現行のWCAGで追加された基準も対象にするかを決めておくと、後から試験範囲がぶれません。
追加基準の全体像は「WCAG 2.2で追加された達成基準の解説」で確認できます。
「判別可能」を実務に落とし込む
「判別可能」への対応は、配色を整えるだけでは完了しません。
色以外の手掛かり、音声の停止手段、十分な文字コントラスト、200％拡大への耐性、文字画像を避ける設計を、目標レベルに合わせて一つずつ確認します。
当社では、ウェブアクセシビリティ対応を支援する「UUU ウェブアクセシビリティウィジェットツール」を提供しています。
ウィジェットだけですべての達成基準への適合が決まるわけではないため、設計、実装、試験による確認と組み合わせてご活用ください。