aria-label

要素の既定の アクセシブル名 がなかったり、その内容を正確に記述していなかったりして、オブジェクトに意味を与えるために関連付けることができるコンテンツが DOM に表示されていないことがあります。よくある例は、 SVG やアイコンフォント（使用すべきではない）を含む、テキストのないボタンです。

対話型要素にアクセシブル名がないか、または正確でないアクセシブル名があり、 aria-labelledby 属性で参照できるコンテンツが DOM にない場合、aria-label 属性を使用して、設定する対話型要素にラベル付けする文字列を定義することができます。これは要素にアクセシビリティ名を提供します。

<button aria-label="Close" onclick="myDialog.close()">
  <svg
    aria-hidden="true"
    focusable="false"
    width="17"
    height="17"
    xmlns="http://www.w3.org/2000/svg">
    <path
      d="m.967 14.217 5.8-5.906-5.765-5.89L3.094.26l5.783 5.888L14.66.26l2.092 2.162-5.766 5.889 5.801 5.906-2.092 2.162-5.818-5.924-5.818 5.924-2.092-2.162Z"
      fill="#000" />
  </svg>
</button>

ほとんどのコンテンツは、それを直接囲む要素のテキストコンテンツから生成されるアクセシブル名を持っています。アクセシブル名は、特定の属性や関連要素によって作成することもできます。

既定では、ボタンのアクセシブル名は <button> の開始タグと終了タグの間のコンテンツであり、画像のアクセシブル名はその alt 属性のコンテンツであり、フォーム入力のアクセシブル名は関連付けられた <label> 要素のコンテンツです。

これらのオプションが利用できない場合、または既定のアクセシブル名が適切でない場合は、 aria-label 属性を使用して要素のアクセシブル名を定義します。

aria-label は、要素にラベル付けできるテキストが見えない場合に使用することができます。要素をラベル付けする可視テキストがある場合、代わりに aria-labelledby を使用してください。

aria-label の目的は aria-labelledby と同じです。どちらも要素にアクセシビリティ名を指定します。参照する要素に目に見える名前がない場合、 aria-label を使用してユーザーに認識可能なアクセシビリティ名を提供することができます。ラベルテキストが DOM で利用でき、 DOM のコンテンツを参照し、使い勝手も受け入れられる場合は、 aria-labelledby を使用することを推奨します。両方を記載しないでください。同じ要素に両方が存在する場合、 aria-labelledby が aria-label よりも優先されます。

aria-label 属性は通常の意味づけされた HTML 要素で使用することができます。 ARIA role が割り当てられている要素に限定されません。

aria-label を「使いすぎない」ようにしてください。例えば、 aria-label ではなく、 aria-describedby や aria-description で可視テキストを使用し、追加の指示を提供したり、 U Iを明確にしたりしてください。常に覚えておいてほしいのは、スクリーンリーダーだけを対象にして指示を出す必要はないということです。もし指示が必要であれば、すべての人に提供しましょう（できれば、 UI をより直感的なものにしましょう）。

すべての要素にアクセシブル名を指定できるわけではありません。 aria-label や aria-labelledby は、非対話型要素や、code、term、emphasis などのインライン構造ロールや、 presentation、none、hidden などのアクセシビリティ API に意味づけが割り当てられないロールでは使用しないでください。 aria-label 属性は対話型要素のみを意図しています。リンク、動画、フォームコントロール、ランドマークロール、ウィジェットロールのようなすべての対話型要素の DOM で何も表示されていないときに、アクセシブル名が指定されるようにするには aria-label を使用してください。

もし <iframe> に title、画像に alt 属性、入力に関連する <label> を与えた場合、 aria-label は必要ありません。しかし、 aria-label が存在する場合、iframe、画像、入力のアクセシブル名として、それぞれ title、alt、<label>よりも優先されます。

<string>

オブジェクトのアクセシブル名となる文字列。

Element.ariaLabel

ariaLabel プロパティは Element インターフェイスの一部で、 aria-label 属性の値を反映します。

ElementInternals.ariaLabel

ariaLabel プロパティは ElementInternals インターフェイスの一部で、 aria-label 属性の値を反映します。

作者がアクセシブル名を提供できないロールを除くほとんどすべてのロールで使用します。

aria-label に対応していないものは次の通りです。

• code (en-US)
• caption (en-US)
• deletion (en-US)
• emphasis (en-US)
• generic
• insertion (en-US)
• mark (en-US)
• paragraph (en-US)
• presentation / none
• strong (en-US)
• subscript (en-US)
• superscript (en-US)
• suggestion (en-US)
• term
• time (en-US)

• <label> 要素
• aria-labelledby
• Using HTML landmark roles to improve accessibility (MDN blog, 2023)