ひとことで言うと
aria-labelはHTML要素に「人間が読める名前」を付与するWAI-ARIA属性です。`<button aria-label="メニューを開く">☰</button>`のように記述すると、スクリーンリーダーは「メニューを開く、ボタン」と読み上げます。アイコンボタンや画像ボタンなど、テキストがない要素に特に有効です。
同様の役割を持つ属性としてaria-labelledbyがありますが、こちらは別の要素のIDを参照して名前を取得します。aria-labelは値を直接書けるため、個別の要素に素早く名前を付けたいときに使われます。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
HTML共有で関係する場面
AIが生成したダッシュボード系HTMLには、×ボタンや＋ボタンなどアイコンだけのコントロールが多く含まれます。これらにaria-labelがなければ、スクリーンリーダー利用者には「ボタン」としか伝わらず、操作の意図が全く理解できません。
社内レビューの場面でも、キーボード操作で確認している担当者がTabキーでボタンを移動するとき、フォーカスが当たった要素の名前がステータスバーに表示されます。aria-labelが適切に設定されていればレビューの効率も上がり、修正指摘の精度が向上します。
よくある誤解
「aria-labelはtitle属性と同じだ」という誤解があります。title属性はマウスホバーでツールチップを表示しますが、スクリーンリーダーへの読み上げは実装依存で不安定です。一方aria-labelはアクセシビリティツリーに確実に反映されるため、スクリーンリーダーサポートははるかに信頼性が高いです。
「aria-labelを付ければalt属性は不要」も誤りです。img要素にはalt属性が必須であり、aria-labelはimg要素の代替テキストを上書きしません。画像にはalt、操作可能な要素にはaria-labelと、用途に応じて使い分ける必要があります。
安全に使うための注意点
AI生成HTMLを受け取ったら、まずブラウザのデベロッパーツールでアクセシビリティツリーを確認しましょう。Chromeの場合、Elements→Accessibilityタブで選択中の要素に「Accessible Name」が表示されます。空欄や「ボタン」のような意味のない名前が付いていたら、aria-labelの追加が必要です。
aria-labelの値には動詞＋名詞の形式で記述するとわかりやすくなります。「削除」よりも「この項目を削除」、「送信」よりも「問い合わせフォームを送信」のように書くことで、スクリーンリーダー利用者が文脈を理解しやすくなります。共有前にこの観点でHTMLをひと通り見直してください。
よくある質問
aria-labelはどの要素に付ける必要がありますか？
ボタン・リンク・フォーム要素・ランドマーク（nav・main・asideなど）が主な対象です。特にテキストを持たないアイコンボタンやSVGベースのコントロールは必須です。テキストが可視状態で存在する場合はaria-labelの追加は不要です。
AIが生成したHTMLにaria-labelを自動で追加するツールはありますか？
完全自動化は難しく、要素の「意図」を理解するには人間の判断が必要です。ただしaxe DevToolsやLighthouseでaria-labelが必要な箇所を自動検出し、修正すべき要素をリスト化することは可能です。そこから手動で適切な名前を付けていく流れが現実的です。
日本語のaria-labelは英語と同じように機能しますか？
はい、aria-labelの値は文字列であれば言語を問いません。日本語スクリーンリーダー（PC-TalkerやNVDAの日本語版など）は日本語のaria-labelを正常に読み上げます。ただし英語専用に設定された環境では英語読みになるため、多言語配布するHTMLでは言語設定（lang属性）との組み合わせも確認してください。