aria-label、aria-labelledby、aria-describedby、表示テキストのどれを使うべきかを、修正前後のコード20例、よくある間違い、アクセシブルネームのチェッカーで解説します。
aria-labelは、アイコンだけのボタンのように要素を名前付ける表示テキストがない場合にのみ使います：<button aria-label="Close dialog">。表示テキストがすでに名前になっているなら、それを使うか、aria-labelledbyでそのテキストを参照します。aria-describedbyは名前の後に読み上げられる補足説明を追加します。ネイティブHTMLのラベルが常に最優先です。
どの名前付け手段を使うか
ボタン、リンク、フィールド、ランドマークにはすべてアクセシブルネームが必要です。これはフォーカスが当たったときに支援技術が読み上げる短いフレーズです。このページでは名前がどのように決まるか、問題のある20のパターンと修正版の比較、そして貼り付けたコードを読み取って得られる名前を表示するチェッカーを紹介します。
aria-labelは属性の中に名前を文字列として持ちます。aria-labelledbyは1つ以上の要素のidを参照し、そのテキストから名前を組み立てるため、名前は常に晴眼者が見ている内容と一致します。両方ある場合はaria-labelledbyが優先されます。
はい。ほとんどのコントロールではaria-labelの値がテキスト内容より優先されます。Buyと表示されているボタンにaria-label="Add to basket"があれば、Add to basket（カゴに追加）と読み上げられます。この不一致は音声操作のユーザーを混乱させ、WCAG 2.5.3 Label in Name（名前にラベルを含める）に違反します。
名前ではない補足情報に使います。パスワードのルール、入力形式のヒント、エラーメッセージなどです。スクリーンリーダーは通常、名前とロールの後に、多くの場合少し間を置いて説明を読み上げます。説明の読み上げをオフにしているユーザーもいます。
role="region"やrole="dialog"のように名前付けが許可されたロールがある場合のみ可能です。汎用のdivやspanではARIAが名前付けを禁止しており、ほとんどのスクリーンリーダーはこの属性を無視します。
いいえ。画像の名前はalt属性から取られます。装飾画像にはalt=""を使うと読み飛ばされます。imgにaria-labelを付けても動作しますが、altでできないことは何も増えません。
このリストを上から順に確認し、当てはまる最初の選択肢で止めます。表示テキストが最初なのは、1つの文字列で晴眼者、スクリーンリーダー、音声操作のユーザーすべてに対応できるからです。
要素に名前や説明を与える4つの方法
各例は問題のあるパターン、修正、修正後にスクリーンリーダーがおおよそ読み上げる内容を示します。読み上げは製品や設定によって異なります。
名前がないと、ボタンは通常ボタンとしか読み上げられません。図形が名前のない画像として読まれないよう非表示にします。修正後、スクリーンリーダーでは通常、閉じる、ボタンと読み上げられます。
空のリンクはURLとして読まれることが多く、環境によっては1文字ずつ読まれます。修正後、スクリーンリーダーでは通常、Instagramのショップ、リンクと読み上げられます。
視覚的に隠したspan内の実テキストは、属性値を飛ばしがちな翻訳ツールでも残ります。修正後、スクリーンリーダーでは通常、カート、3点、リンクと読み上げられます。
名前のないnav要素が2つあると、ランドマーク一覧にナビゲーションが2回表示され、区別できません。修正後、スクリーンリーダーでは通常、メイン、ナビゲーションと読み上げられます。
プレースホルダーのテキストは代替の名前としては弱く、入力を始めると消えてしまいます。修正後、スクリーンリーダーでは通常、商品を検索、検索、編集テキストと読み上げられます。
本物のlabel要素を使うとキャプションもクリックできるようになり、操作対象が広がります。修正後、スクリーンリーダーでは通常、メール、編集テキストと読み上げられます。
説明はidを並べた順に連結されます。修正後、スクリーンリーダーでは通常、パスワード、セキュア編集テキスト、無効な入力、12文字以上、短すぎます...と読み上げられます。
legendがグループを名前付けるため、各選択肢が単独でも意味を持ちます。修正後、スクリーンリーダーでは通常、配送速度、グループ、通常、ラジオボタン、2個中1個目と読み上げられます。
表示されている見出しを参照すると、読み上げと表示のタイトルが一致します。本当のモーダルにするにはshowModal()で開きます。修正後、スクリーンリーダーでは通常、プロジェクトを削除しますか？、ダイアログ、14ページすべてが削除されます。と読み上げられます。
名前は固定し、状態だけを変えます。ラベルをUnboldに切り替えることはしません。修正後、スクリーンリーダーでは通常、太字、トグルボタン、押されていますと読み上げられます。
ラベルと押された状態を同時に変えると二重否定のように聞こえます。修正後、スクリーンリーダーでは通常、ミュート、トグルボタン、押されていませんと読み上げられます。
スクリプトでaria-expandedとhidden属性を同時に切り替える必要があります。修正後、スクリーンリーダーでは通常、商品、ボタン、折りたたみと読み上げられます。
クリックできるdivはフォーカスできず、コントロールとして読み上げられることもありません。修正後、スクリーンリーダーでは通常、メニュー、ボタン、折りたたみと読み上げられます。
画像が読み手に伝える内容を書きます。空のaltは装飾を示し、読み飛ばされます。修正後、スクリーンリーダーでは通常、5月に週40件から65件に増えた売上、画像と読み上げられます。
role=imgを付けると、SVGは図形のツリーではなく1つのオブジェクトになります。修正後、スクリーンリーダーでは通常、Northgate Bakery、画像と読み上げられます。
表示されたcaptionが全員に向けてテーブルを名前付けます。タイトルがテーブルの外にある場合のみaria-labelledbyを使います。修正後、スクリーンリーダーでは通常、営業時間、テーブル、2列、8行と読み上げられます。
テキストが変わる前にリージョンが存在していないと、多くのスクリーンリーダーは更新を読み逃します。修正後、スクリーンリーダーでは通常、保存しました（フォーカスを移動せずに読み上げ）となります。
aria-roledescriptionは読み上げられるロールを変えます。控えめに使い、汎用要素には決して使いません。修正後、スクリーンリーダーでは通常、お客様の写真、カルーセルと読み上げられます。
固有のリンクテキストは、リンク一覧を流し読みするすべての人に役立ちます。表示されている言葉から始めるとLabel in Nameを守れます。修正後、スクリーンリーダーでは通常、冬季営業時間についてもっと読む、リンクと読み上げられます。
音声操作でclick Sendと話した人がこのボタンを押せる必要があるため、表示されている言葉を名前に含めます。修正後、スクリーンリーダーでは通常、送信、ボタンと読み上げられます。
監査で見つかる間違いと修正方法
公開前に名前を確認する
コードを貼り付けてください。チェッカーはスクリプトを一切実行せずにブラウザー内で解析し、最初のインタラクティブ要素または名前付き要素を見つけ、公式の順序を簡略化した方法で名前を算出します。仕様の手順をいくつか省略しているため、簡単なヒントとして扱い、開発者ツールやスクリーンリーダーで確認してください。
アイコンボタン
修正済みアイコンボタン
ラベル付きフィールド
一致しないラベル
labelledbyのダイアログ
HTMLコード
コード内にボタン、リンク、フィールド、ランドマーク、画像、テーブルが見つかりません。
要素
算出された名前
（空）
名前の取得元
警告
この簡易チェックでは見つかりませんでした。
label要素
テキスト内容
SVGのtitle
title（弱い代替）
プレースホルダー（弱い代替）
aria-labelledbyが存在しないid "{id}" を参照しています。
ロールのないdivやspanのaria-labelは、ほとんどのスクリーンリーダーで無視されます。
画像にalt属性がありません。
プレースホルダーだけが名前になっています。ラベルを追加してください。
アクセシブルネームが見つかりません。
表示テキスト "{visible}" が名前の先頭にありません（WCAG 2.5.3 Label in Name）。
名前がロールを表す語で終わっているため、ロールが2回読み上げられます。
要素自体がaria-hiddenになっています。
無料で始める · クレジットカード不要