ARIA:術語角色

term 角色可用於一個單詞或短語,並帶有一個可選的對應 definition

描述

term 角色可用於一個單詞或短語,並帶有一個可選的對應 definition。在語義上等效於 HTML <dfn> 元素和定義列表 (<dl> ) 中的定義術語 (<dt> ) 元素。

term 角色用於明確標識作者已提供或預期使用者將提供的定義的單詞或短語。如果存在現有定義或用於輸入定義的表單或表單控制元件,則作者應將 aria-details 設定為指向相關元素。

不要在互動式元素(如連結)上使用 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

規範

規範
可訪問富網際網路應用程式 (WAI-ARIA)
# 術語

另請參閱