ARIA ラベル (aria-label) は、WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) 仕様で定義された属性で、UI 要素にアクセシブルな名前を付与します。視覚的なラベルがない要素にテキスト情報を提供するために使われ、スクリーンリーダーがその要素を読み上げる際の手がかりとなります。

aria-label が特に有効なのは、アイコンだけのボタンやナビゲーションランドマークなど、視覚的にはデザインで意味が伝わるものの、テキスト情報が不足している要素です。たとえば検索ボタンに虫眼鏡アイコンだけを配置した場合、aria-label="検索" を追加することで、スクリーンリーダーのユーザーにもボタンの目的が伝わります。同様に、ページ内に複数の <nav> 要素がある場合、aria-label="メインナビゲーション" や aria-label="フッターナビゲーション" で区別できます。ARIA アクセシビリティの書籍で詳しく学べます。

関連する属性として aria-labelledby (別の要素のテキストを参照) と aria-describedby (補足説明を参照) があります。aria-label は要素に直接テキストを指定するのに対し、aria-labelledby は既存の要素 ID を参照して名前を取得します。ページ上に既に適切なテキストが存在する場合は aria-labelledby を優先し、テキストが存在しない場合に aria-label を使うのが一般的な使い分けです。

重要な原則として、ARIA の使用はネイティブ HTML 要素のラベル付け (<label> 要素、alt 属性、<button> のテキストコンテンツなど) では不十分な場合に限定すべきです。WAI-ARIA の第一ルールは「ネイティブ HTML で実現できるなら ARIA を使うな」です。過度な ARIA の使用はかえってアクセシビリティを損なうことがあり、スクリーンリーダーの挙動を予期しない形で変えてしまう場合があります。Web アクセシビリティ実践の書籍も参考になります。

文字数カウントの観点では、aria-label のテキストは画面に表示されませんが、スクリーンリーダーが読み上げるため、簡潔で分かりやすい文字数に収めることが重要です。長すぎるラベルはユーザーの負担になり、短すぎると情報が不足します。一般的には 2-3 語程度の簡潔な表現が推奨されます。