ARIA: term ロール

term ロールは、オプションで対応する definition を持つ単語やフレーズに使用することができます。

解説

term ロールは、オプションで対応する definition を持つ単語やフレーズに使用することができます。 HTML の <dfn> 要素や定義リスト(<dl>)内の定義項(<dt>)要素と意味づけは同じです。

term ロールは、作成者によって定義が提供された、またはユーザーによって提供されることが期待されている単語または語句を明示的に識別するために使用します。既存の定義、または定義を入力するフォームやフォームコントロールがある場合、作者は aria-details を設定し、関連の要素を指すようにすべきです (SHOULD)。

role="term" をリンクのような対話的要素に使用しないでください。支援技術ユーザーが要素と対話するのを妨害する可能性があるからです。また、用語そのものがアクセシビリティ名なので、 aria-labelaria-labelledby は使用しないでください。

警告: アクセシブル名は用語そのものでなければなりませんので、aria-labelaria-labelledby は使用しないでください。

関連付けられる WAI-ARIA ロール、ステート、プロパティ

なし。

キーボード操作

なし。

必要な JavaScript 機能

なし。

html
<p>
  <span role="term">Mansplaining</span>,
  <span role="definition"
    >a portmanteau of "man" and "explain", is the patronizing act of explaining
    without being asked to do so, to someone already learned on the topic, often
    after someone has already explained it</span
  >.
</p>

より良い意味づけをするために、上記は次のように書くこともできます。

html
<p>
  <dfn role="term">Mansplaining</dfn>,
  <span role="definition"
    >a portmanteau of "man" and "explain", is the patronizing act of explaining
    without being asked to do so, to someone already learned on the topic, often
    after someone has already explained it</span
  >.
</p>

または ARIA なしで書くとこうなります(ただし、表示したいように表示されない可能性があります)。

html
<dl>
  <dt>Mansplaining</dt>
  <dd>
    A portmanteau of "man" and "explain", is the patronizing act of explaining
    without being asked to do so, to someone already learned on the topic, often
    after someone has already explained it.
  </dd>
</dl>

アクセシビリティの考慮

role="term" は、支援技術ユーザーが要素と対話するのを妨げる可能性があるので、リンクのような対話要素には使用しないでください。

ベストプラクティス

用語自体がアクセシブル名を定義できるようにしてください。 aria-labelaria-labelledby は使用しないでください。

推奨される HTML

仕様書

Specification
Accessible Rich Internet Applications (WAI-ARIA)
# term

関連情報