aria-label 属性

aria-label 属性は要素にアクセシブルなラベル（名前）を付与します。属性値は文字列である必要があります。

例えば、デザイン上、ボタンのサイズに制約があり、button 要素内に長いテキストが入れられずに簡略化したテキストのみ入れた場合など、aria-label 属性を用いて本来の説明文を付与するなどすれば、より利用者にとってわかりやすいボタンとすることができるかもしれません。

同様の目的を果たす属性として、aria-labelledby 属性がありますが、aria-labelledby 属性は、DOM Document Object Model）にラベルとなるテキストが存在する場合（わかりやすく言えば、可視化されたテキストコンテンツが存在する場合）に使用し、可能であれば aria-labelledby 属性の使用を優先すべきです。

しかし、可視化されたラベルに相当するものが存在しない、あるいは存在するがそれを aria-labelledby 属性で参照することがユーザーにとってわかりやすくない、といった場合には、aria-label 属性を使用して、要素に直接アクセシブルなラベルを設定することができます。

なお、aria-label 属性と aria-labelledby 属性が、ある要素に対して同時に使用され場合、ユーザーエージェントは、aria-labelledby 属性の方を優先します。

<button aria-label="入力した内容をすべて消去">
  消去
</button>

<!-- アイコンフォントの都合でどうしてもボタン内にテキストが入れられない場合などの例 -->
<button aria-label="検索">
  <span aria-hidden="true">
    <i class="fa-solid fa-magnifying-glass"></i>
  </span>
</button>

<!-- SVG アイコンに使用した例 -->
<button>
  <svg role="img" aria-label="検索" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
    <title>検索</title>
    <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
  </svg>
</button>