この記事でわかること

  • 見た目の文字が、読み上げや音声操作で使う名前に含まれていることを求める、WCAGの達成基準2.5.3
  • aria-labelで名前を付けるときに、見た目の文字を名前の初めに入れる書き方
  • 何をラベルとして数えるか(すぐ横の文字・句読点・アイコンだけのボタン)
  • ページのボタンとリンクから食い違いを書き出すコードと、試した結果

画面には「検索」と書かれたボタンなのに、読み上げでは「サイト内を探す」と聞こえる。こうした食い違いがあると、「検索をクリック」と話して操作する人は、そのボタンを押せないことがあります。この記事では、見た目の文字と名前をそろえる考え方を、アクセシビリティの基準にもとづいて紹介します。

拠り所は、W3Cの達成基準2.5.3の解説(Understanding)と、技法G208・G211、失敗例F96です。2026年10月30日に原文を読みました。書き出しのコードは、架空のページを作業PCのChromeで開いて動かしています。特定のツールやスクールは推していません。

結論: 見た目の文字を、名前の中にそのまま入れる

ボタンやリンクの見た目の文字は、そのまま全部、名前(アクセシブルネーム)の中に入れます。 いちばん確実なのは、aria-labelを使わず、ボタンやリンクの中の文字をそのまま名前にすることです。

見た目 名前 判断
検索 検索 合っている
検索 検索 サイト全体 合っている
検索 サイト内を探す 食い違い
Next… Next 合っている
(文字なし) 閉じる 対象外

見た目のラベルと名前に関わる基準(2.5.3)

WCAG 2.2の達成基準2.5.3(レベルA)は、文字や文字の画像を含むラベルのある部品について、名前に、画面に見えている文字が含まれていることを求めています。注記では、ラベルの文字を名前の初めに置くのが望ましいとしています。

技法G208によると、音声で操作する人は、ふつう、操作の言葉に続けて画面に見えるラベルを話します。たとえば「click search」と話して検索のボタンを押します。音声認識のソフトが照らし合わせるのは名前のほうなので、見た目の文字と名前が食い違うと、話しても押せないことがあります。

何をラベルとして数えるか

解説では、ラベルとして扱うのは、部品のすぐ横の文字にとどめるのがよいとしています。ボタンやタブなら中の文字、チェックボックスなら右隣の文字です。見出し・説明の文・グループのラベルは、ふつうはラベルとして数えません。

見た目の文字のラベルがない部品、たとえば文字のないアイコンだけのボタンには、この基準は当てはまりません。また、大文字・小文字やほとんどの句読点の違いは問題にしないとしていて、見た目が「Next…」で名前が「Next」のボタンは基準を満たす例として載っています。

名前を付け足すときの書き方(G208・G211)

技法G211は、名前を見た目のラベルに合わせる方法です。ボタンの中の文字、リンクの中の文字、label要素の文字のように、HTMLのふつうの書き方で名前を付ければ、見た目と名前はそのまま一致します。

見た目の文字だけでは足りないときは、技法G208のように名前へ言葉を足せます。ただし、見た目の文字はそのまま全部、名前の中に入れます。例として、「続きを読む」に当たる英語の短いリンクに、aria-labelで、その文字の後ろに記事の題を付け足した名前を付ける形が載っています。

よくある失敗(F96)

失敗例F96は、名前に見た目の文字が含まれていない場合です。検索のボタンの文字は「Go」なのに、aria-labelで「Find in this site」という名前を付けている例が挙がっています。

名前の中に見た目の言葉が全部あっても、途中に別の言葉が入って続きの文字列でなくなる場合も、失敗例に挙がっています。「Download specification」と見えるリンクに、見えない「gizmo」が挟まって「Download gizmo specification」という名前になる例です。

手順: 食い違いを書き出して確かめる

次のコードは、開いているページのボタンとリンクを調べ、見た目の文字が名前に含まれていないものを書き出します。開発者ツールを開き、コンソールの欄に貼り付けて動かします。読み取るだけのコードなので、ページは書き換わりません。

// ボタンとリンクで、見た目の文字が名前に含まれていないものを書き出す
for (const el of document.querySelectorAll("button, a[href]")) {
  const visible = el.innerText.trim();
  const ids = el.getAttribute("aria-labelledby");
  const name = ids
    ? ids.split(" ").map((id) => document.getElementById(id).textContent.trim()).join(" ")
    : el.getAttribute("aria-label") || visible;
  if (visible && !name.includes(visible)) {
    console.log("食い違い:", JSON.stringify({ visible, name }));
  }
}

名前は、aria-labelledby属性、aria-label属性、中の文字の順に見る簡易な形です。句読点の違いも食い違いとして出すので、出てきたものは上の基準に照らして1つずつ判断します。

  1. ページを開いて上のコードを実行する: 申し込み・検索・ログインなど、ボタンの多いページから始めます
  2. 出てきたものを判断する: 見た目の文字が名前に入っていないものを直します。句読点だけの違いは直さなくてかまいません
  3. 名前の付け方を直す: できるだけaria-labelを外し、中の文字を名前にします。言葉を足すときは、見た目の文字を初めに置きます

試した結果

ボタンとリンクを7つ置いた架空のページを、作業PCの中だけで開けるサーバーに置き、画面を出さない設定のChromeで開いて、上のコードを実行しました。

  • 書き出されたのは2つでした。見た目が「検索」で名前が「サイト内を探す」のボタンと、見た目が「次へ…」で名前が「次へ」のボタンです
  • 名前が「検索 サイト全体」のボタン、「続きを読む: 料金の改定のお知らせ」という名前の「続きを読む」のリンク、aria-labelledbyで見出しの「料金」と中の「詳しく」をつないだボタンは、書き出されませんでした
  • 文字のないアイコンだけのボタン(名前は「閉じる」)は、見た目の文字がないため書き出されませんでした
  • コードで組み立てた名前は、7つとも、ブラウザのアクセシビリティの情報に出る名前と同じでした

「次へ…」と「次へ」の違いは句読点だけなので、基準に照らせば直す必要はありません。コードが出したものを、そのまますべて直すわけではない例です。

動かしたのはMac版のGoogle Chrome 156(画面を出さない起動)だけで、音声入力や画面読み上げのソフト、Chrome以外のブラウザでの動きは試していません。

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

目安は、「画面に見えている言葉を話せば、その部品を押せる名前になっているか」です。なっていれば、名前を付け足していても問題はありません。

部品の名前を、使っている部品集やテンプレートがまとめて付けている場合は、1つずつ直すより、作りそのものを直すほうが早いことがあります。どこで名前を付けているかを制作を担当した人と確かめ、作り方で迷うときは、Webデザインの講座の講師にも相談してみます。

つまずきやすいところ

まとめ

  • ボタンやリンクの見た目の文字は、そのまま全部、名前の中に入れます
  • いちばん確実なのは、aria-labelを使わず、中の文字をそのまま名前にすることです
  • 言葉を足すときは、見た目の文字を名前の初めに置き、途中に別の言葉を挟みません
  • 大文字・小文字や句読点の違い、見た目の文字がないアイコンだけのボタンは、この基準の食い違いには当たりません