この記事でわかること

  • 形や位置だけで操作を説明しないことを求める、WCAGの達成基準1.3.3
  • 位置の説明そのものは使ってよいことと、足す手がかりの例
  • 説明の文にボタンの名前を入れる書き方と、画面の幅でボタンの位置が変わった結果
  • 自分のページの説明文を見直す手順

「右下のボタンを押してください」「丸い印の付いた項目が対象です」のような説明は、画面を見られない人や、画面の一部だけを拡大して見ている人には、どのボタンや項目のことか分かりません。この記事では、形や位置の説明に、名前や見出しの言葉を足す考え方を、アクセシビリティの基準にもとづいて紹介します。

確かめたのは、W3Cが公開している達成基準1.3.3の解説(Understanding)と、技法G96、失敗例F14・F26です(2026年10月30日に原文を確認)。例のHTMLは作業PCのChromeで開き、画面の幅を変えてボタンの位置と名前を読み取りました。ツールやスクールを選んで勧めることはしません。

結論: 位置や形の説明に、名前を添える

操作の説明では、形・大きさ・位置・向き・音の言葉だけに頼らず、ボタンの名前や見出しの言葉も一緒に書きます。 位置や形の説明は消さなくてかまいません。

頼りがちな説明 足す言葉の例
右下のボタン 「申し込む」ボタン
丸いボタン ボタンの名前
右のリンクの一覧 一覧の見出し
丸い印の項目 「在庫あり」の文字
音が鳴ったら 画面の表示

形や位置に関わる基準(1.3.3)

WCAG 2.2の達成基準1.3.3(レベルA)は、内容を理解したり操作したりするための説明を、形・色・大きさ・見た目の位置・向き・音といった、部品の感覚的な特徴だけに頼らないことを求めています。色については別の基準があり、Webデザインで色だけで情報を伝えないようにする方法で紹介しています。

解説では、「丸いボタン」「右のボタン」のように、ページの構造からは分からない形や位置の知識に頼る内容があると説明しています。使っている支援技術によっては、形や位置が分からない人がいるためです。

位置や形の説明は、消さなくてよい

解説は、形や位置で情報を伝えることは、認知に障害のある人を含む多くの人にとって役に立つ方法だとしています。ほかの方法でも情報を伝えていれば、こうした手がかりを使うことを妨げるものではありません。

また、読む順番で「上」が前の内容、「下」が後の内容と一般に分かる言語では、指している内容が読む順番の正しい位置にあり、あいまいでなければ、「下のリンクから1つ選ぶ」のような書き方は基準を満たすとしています。

名前を添えた説明と、W3Cの例

技法G96は、ページの中の項目を、形・大きさ・音・位置だけでなく、その働きやラベルのように感覚に頼らない言い方でも指し示す方法です。例として、「go」と書かれた丸いボタンを「goと書かれた丸いボタンを押す」と説明する形や、右側にあるリンクの一覧を、その見出しの名前と一緒に示す形を挙げています。

失敗例F14は、形や位置だけで内容を指し示す場合です。「次のページへは右のボタン、前のページへは左のボタン」という説明が例に挙がっています。解説では、文字の大きさ・ウィンドウ・画面の大きさでページの配置が変わると、内容の位置も変わることがあるとしています。

失敗例F26は、記号の形だけで情報を伝える場合です。丸は在庫あり、四角は取り寄せ中のように、印の形だけで状態を示す買い物かごの例が載っています。

書き方の例: 説明の文にボタンの名前を入れる

次のHTMLは、申し込みのフォームの説明に、位置の言葉とボタンの名前の両方を入れた例です。画面の幅が480px以下のときは、ボタンを縦に並べ、横いっぱいに広げています。

<style>
  .actions { display: flex; justify-content: flex-end; gap: 8px; }
  @media (max-width: 480px) {
    .actions { flex-direction: column; }
  }
</style>
<form>
  <p id="guide">
    入力が終わったら、右下の「申し込む」ボタンを押してください。
  </p>
  <label for="zip">郵便番号(半角数字7けた)</label>
  <input id="zip" type="text" inputmode="numeric">
  <div class="actions">
    <button type="reset">入力を消す</button>
    <button type="submit">申し込む</button>
  </div>
</form>

説明の文の「申し込む」は、ボタンに書いた文字と同じにしています。読み上げで聞いたときも、文字を探すときも、同じ言葉でボタンにたどり着けます。

手順: 説明の文を見直す

技法G96と失敗例F14・F26の確かめ方に沿った手順です。

  1. 操作や内容を指し示す説明を集める: 「押してください」「選んでください」「ご覧ください」などを含む文と、凡例・注意書きを書き出します
  2. 感覚の言葉を探す: 右・左・上・下・丸い・四角い・大きい・赤い・音が鳴る、のような言葉に印を付けます
  3. 名前や見出しがあるかを見る: 印を付けた説明に、ボタンの名前・リンクの文字・見出しの言葉など、感覚に頼らない手がかりが一緒に書かれているかを確かめます
  4. 画面の幅を変えて読む: スマートフォンの幅でも、位置の説明が合っているかを見ます。合わなくても、名前で見つけられれば足ります

試した結果

上のHTMLを、作業PCの中だけで開ける検証用のサーバーに置き、画面を出さない設定のChromeで、画面の幅を1280pxと390pxにして開きました。

  • 幅1280pxでは、「申し込む」ボタンは「入力を消す」ボタンと同じ行の右側にありました
  • 幅390pxでは、2つのボタンが縦に並び、「申し込む」は「入力を消す」の下で、左端からフォームの幅いっぱいに広がっていました。「右下」という説明は当てはまらなくなりました
  • どちらの幅でも、ブラウザのアクセシビリティの情報で、ボタンの名前は「申し込む」でした。説明の文にある「申し込む」と同じです

ブラウザはMac版のGoogle Chrome 156だけで、画面を出さずに起動しました。画面読み上げのソフトと、Chrome以外のブラウザは試していません。

自分で直すか、相談するかの判断

目安は、「説明の文から位置や形の言葉を消しても、どのボタンや項目のことか分かるか」です。分かるなら、その説明は位置や形だけに頼っていません。

地図や図のように、位置そのものが内容になっている場合や、音で知らせる仕組みを作り直す必要がある場合は、表し方そのものを見直すことになります。図の作り直しが要るかどうかは、制作を任せた人と一緒に判断します。表し方の選び方に自信が持てないときは、Webデザインの講座で講師に見てもらうのも手です。

つまずきやすいところ

  • 画面の幅で位置が変わる: 試したときも、幅390pxでは「申し込む」ボタンが下に移り、横いっぱいになって「右下」とは言えなくなりました。名前を添えておけば、幅が変わっても探せます
  • 説明の言葉とボタンの文字が違う: 説明では「送信」、ボタンには「申し込む」のように食い違うと、名前で探せません。ボタンの文字と同じ言葉を使います
  • 印の形だけで状態を示す: 丸・三角・四角の印に意味を持たせるなら、その意味を文字でも書きます。画像の印に代わりの文字を付ける方法は、Webデザインで画像の代替テキスト(alt)を書く方法で紹介しています
  • 入力欄を「上の欄」と呼ぶ: 入力欄は、ラベルの言葉で指し示します。ラベルの付け方は、Webデザインで入力フォームのラベルと説明を分かりやすくする方法にまとめています

まとめ

  • 操作の説明を、形・大きさ・位置・向き・音の言葉だけに頼らないようにします
  • 位置や形の説明は消さなくてよく、ボタンの名前や見出しの言葉を一緒に書きます
  • 説明の言葉は、ボタンやリンクに書いた文字とそろえます
  • 画面の幅で配置が変わることがあるので、名前で見つけられるかを確かめます