ARIA: region role

region 角色用於識別作者認為重要的文件區域。它是一個通用的地標,當其他地標角色都不適用時,可用於輔助導航。

html
<div role="region" aria-label="Example">
  <!-- region content -->
</div>

描述

region 角色是一個 ARIA 地標角色。region 角色應保留給作者認為足夠重要的內容區域,以便使用者可以輕鬆導航到該區域,並在頁面摘要中列出。Region 角色是一個更通用的術語,僅當需要識別的區域無法被其他地標角色(如 bannermaincontentinfocomplementarynavigation)準確描述時才應使用。

每個具有 region 角色的元素都應包含一個描述該區域內容用途的標籤,最好使用 aria-labelledby 引用一個可見的標題。如果沒有可見的合適標題,則應使用 aria-label

如果 region 地標角色的內容與文件主內容分離,仍然應該是有意義的。

使用 <section> 元素,如果它有一個可訪問的名稱,會自動傳達該區域具有 region 角色。開發者應始終優先使用正確的語義 HTML 元素,在本例中是 <section>,而不是使用 ARIA。

關聯的 WAI-ARIA 角色、狀態和屬性

aria-labelledbyaria-label

使用此屬性為區域設定標籤。通常,aria-labelledby 屬性的值將是用於為該部分命名的元素的 id。如果沒有可見的合適標題,則應使用 aria-label

示例

html
<div role="region" aria-labelledby="region-heading">
  <h2 id="region-heading">
    This heading's `id` attribute helps this region have an accessible name
  </h2>
  <!-- region content -->
</div>

可訪問性考慮

謹慎使用!地標角色旨在少量使用,以識別文件中較大的整體區域。使用過多的地標角色會在螢幕閱讀器中產生“噪音”,使理解頁面整體佈局變得困難。

只有當沒有其他相關的 內容分節元素或 地標角色適用時,才使用 region 角色。如果頁面上存在多個區域,可能值得重新審視頁面的整體結構。

最佳實踐

優先使用 HTML

使用 <section> 元素會自動傳達該元素具有 region 角色。如果可能,請優先使用語義化的 <section> 元素而不是 region 角色。

標記地標

如果文件中有多個 region 地標角色,請為每個角色提供唯一的標籤。此標籤將允許輔助技術使用者能夠快速理解每個地標的用途。

html
<div role="region" aria-labelledby="use-discretion">
  <h3 id="use-discretion">Please use the `region` role with discretion</h3>
  <!-- content -->
</div>

…

<div role="region" aria-labelledby="please-reconsider">
  <h3 id="please-reconsider">Please reconsider your document structure</h3>
  <!-- content -->
</div>

在此示例中,區域的標籤是透過 aria-labelledby 屬性生成的。

具有溢位文字的滾動內容區域

如果存在一個帶有 tabindex="0" 的內容區域,請新增 role="region" 以向螢幕閱讀器使用者傳達這是一個通用區域。這樣做是為了讓僅透過鍵盤操作的使用者能夠滾動內容溢位的區域。

SVG

role="region" 可以與 aria-label 一起宣告在 <svg> 區域上,以便對 SVG 的各個部分進行描述。

規範

規範
無障礙富網際網路應用程式 (WAI-ARIA)
# region
未知規範

另見