LEARN BY EXAMPLE

1.3.3 感覚的な特徴 レベル A

見た目や音だけに頼らない案内にする。

概要

内容を理解したり操作したりするための説明を、形・色・大きさ・位置・方向・音だけに頼らずに伝えます。例えば、ボタンの位置に加えて名前も示し、どれを使うかを特定できるようにします。

同じボタンを位置と名前で案内する

利用者が困る例 位置だけを指す案内

位置を使わずに案内を読むと

案内は「左のボタン」。
ボタン名は「確認完了」と「修正する」。
「左」と名前の対応は書かれていません。

案内とボタン名を結び付けにくい。
画面上の左右がわからないと、対象を推測することになります。

改善した例 名前でも対象を示す案内

申込内容の確認

参加する講座:写真教室

内容に問題がなければ、「確認完了」ボタンを押してください。

確認完了修正する

位置を使わずに案内を読むと

案内は「確認完了」ボタン。
ボタン名は「確認完了」と「修正する」。
同じ名前で対象を確認できます。

名前で案内と対象が結び付く。
画面上の左右がわからなくても、対象を確認できます。

図:ボタンの名前・配置・見た目を同じにして、案内文だけを変えた例。両方の画面は操作できない説明用の静止図です。「利用者が困る例」の内容も画面の外の文章で説明しています。形や位置を名前と併せて補助として使うこともできます。

達成できないと起こる問題の例

申込内容の確認画面に「内容に問題がなければ、左のボタンを押してください」とあります。左には「確認完了」、右には「修正する」というボタンが並んでいます。

読み上げソフトでボタン名はわかっても、画面上の左右が伝わらない場合があります。そのとき、案内にある「左」がどちらの名前を指すかを確かめられず、利用者は押す対象を推測することになります。

ボタン名が読めることだけでは、位置を頼りにした案内の問題は解消しません。

達成するための改善例

同じ画面で、案内を「内容に問題がなければ、『確認完了』ボタンを押してください」とします。ボタンの名前と配置はそのままです。

利用者は画面上の左右がわからなくても、案内と一致する「確認完了」という名前で対象を確認できます。「左側の『確認完了』ボタン」のように、位置を補助として添える説明もできます。

確認のポイント

  • 「右のボタン」「丸い印」などの案内は、位置や形がわからなくても対象を特定できますか。
  • 名前で案内している場合、その名前は実際のボタンや見出しなどと一致していますか。
  • 画面の配置が変わったり、順に読み上げられたりしても、説明の対象がわかりますか。
  • 音の高さや鳴る方向だけを頼りに、次の操作を案内していませんか。

条件と補足

形や位置を補助として使える

形・色・大きさ・位置・方向・音のような特徴は、対象を探す助けになります。この基準はそれらを使うことを禁止するものではありません。それらを知覚しなくても対象を特定できるように、ほかの情報でも伝えます。

例えば、「右下の『次へ』ボタンを押してください」なら、位置とボタン名の両方で対象を示しています。ボタン名や機能を言葉で示す方法は、公式の達成方法の例でも紹介されています。

一方、「赤い丸を選んでください」のように、色と形を組み合わせるだけでも、その特徴を知覚できなければ対象を特定できません。音で指示するときも、「高い音がした側を選ぶ」といった特徴だけに依存していないか確認します。

「上記」「下記」が指す内容

「上記」「下記」という言葉を使う説明が、すべて失敗になるわけではありません。読み順でも前にある内容を「上記」、後にある内容を「下記」と呼び、参照先が明確なら、視覚的な位置だけに依存せずに伝えられる場合があります。

画面上では下にあっても、読み順では別の場所にある場合や、候補が多くて参照先がわからない場合は、見出しの名前などを使って対象を明確にします。

ほかの基準との違い

色に関する要件はガイドライン1.4の基準も確認します。例えば、1.4.1「色の使用」は情報の区別が色だけに依存していないかを扱います。1.3.3では理解や操作のための説明が形や位置などだけに依存していないかを確認します。

1.3.2「意味のあるシーケンス」は内容を読む順序で意味が保たれるかを扱います。読み順を整えても、「右のボタン」という説明だけでは対象を特定しづらい場合があります。

この教材の例はウェブページ上の案内です。公式解説では物理的な機器を操作する説明で、触ってわかるキーの形などを手がかりにすることまで禁じる意図はないとしています。

この改善例は示した確認画面の案内についての例です。ページやサイト全体のWCAG適合を示すものではありません。

参照資料

テクニックは達成する方法の例です。特定のテクニックを採用することだけが必須ではありません。

出典の最終確認: 2026-11-08。確認画面と案内文はこの教材のために作った架空の例です。