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

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

関連する属性として aria-labelledby (別の要素のテキストを参照) と aria-describedby (補足説明を参照) があります。aria-label は要素に直接テキストを指定するのに対し、aria-labelledby は既存の要素 ID を参照して名前を取得します。ページ上に既に適切なテキストが存在する場合は aria-labelledby を優先し、テキストが存在しない場合に aria-label を使うのが一般的な使い分けです。両方を同じ要素に書くと aria-labelledby が優先されるため、併記は避けます。操作方法や注意書きのような補足は aria-label に押し込まず、可視テキストとして置いて aria-describedby で結び付けます。指示はスクリーンリーダー利用者だけでなく全員に必要な情報です。

実務で最も多い事故は、aria-label が既存のラベルを上書きしてしまうことです。aria-label があると、その要素の <label> 要素のテキスト、画像の alt 属性、iframe の title 属性よりも aria-label の値が優先され、アクセシブルな名前として採用されます。ここで表示されているラベルと違う文言を書くと、WCAG の達成基準 2.5.3「ラベルを含む名前」(適合レベル A) に反します。この基準は「テキストまたはテキストの画像を含むラベルを持つ UI コンポーネントでは、視覚的に提示されているテキストを名前に含める」ことを求めるものです。画面に「送信」と表示されたボタンに aria-label="フォームを保存" を付けると、音声認識で操作している利用者が「送信」と発話しても反応しません。見えているラベルと異なる名前は、意図せず実行される隠れコマンドにもなり得ます。

もう一つの落とし穴は、aria-label が効かない要素に付けてしまうことです。aria-label は作成者が名前を与えられるロールでのみ有効で、実際に機能するのはリンク、フォームコントロール、ウィジェット、ランドマーク、画像、iframe などです。role を指定していない <span> や <div> は generic ロールに割り当てられ、名前付けが禁止されています。code、emphasis、strong、paragraph、presentation といったロールも同様で、これらに書いた aria-label は支援技術に届かないまま放置されます。

そもそも ARIA の使用は、ネイティブ HTML のラベル付け (<label> 要素、alt 属性、<button> のテキストコンテンツなど) では不十分な場合に限定します。W3C の「Using ARIA」が示す第一ルールは、必要なセマンティクスと挙動が最初から組み込まれたネイティブの HTML 要素や属性が使えるのであれば、他の要素を流用して ARIA の role・状態・プロパティを足すのではなく、そちらを使うというものです。第二ルールは「ネイティブのセマンティクスは、本当に必要な場合を除いて変更しない」です。過度な ARIA の使用はかえってアクセシビリティを損ない、スクリーンリーダーの挙動を予期しない形で変えてしまう場合があります。

文字数カウントの観点では、aria-label のテキストは画面に表示されませんが、スクリーンリーダーは要素にたどり着いた時点でこれを一気に読み上げます。仕様に語数や文字数の上限はありません。判断基準は「その要素の目的が分かる最短の表現になっているか」です。ボタンは「検索」「閉じる」のように動作を表す語にし、ナビゲーションは「メインナビゲーション」のように他と区別できる語を足します。一覧に並ぶ項目で「詳細を見る」が繰り返される場合は、aria-label="詳細を見る (製品 A)" のように区別に必要な語だけを補います。表示されているテキストを先頭に置き、その後ろに区別用の語を足す形にすると、音声入力での呼び出しとも整合します。反対に、一文を超える説明や記号の羅列は、読み上げの負担になるだけで名前としては機能しません。