ARIA：區域角色

region 角色用於標識作者認為重要的文件區域。它是一種通用的地標，在沒有其他合適的地標角色的情況下，可用於輔助導航。

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

描述

region 角色是一個 ARIA 地標 角色。region 角色應保留用於內容部分，這些部分足夠重要，使用者可能希望輕鬆導航到該部分，並將其列入頁面摘要中。區域角色是一個更通用的術語，僅在需要標識的部分不能被其他地標角色（例如 banner、main、contentinfo、complementary 或 navigation）準確地描述時才使用。

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

region 地標角色的內容在與文件主內容分離後應有意義。

使用 <section> 元素將自動傳達一個部分具有 region 角色，前提是該部分具有無障礙名稱。開發人員應始終優先使用正確的語義 HTML 元素（在本例中為 <section>），而不是使用 ARIA。

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

aria-labelledby 或 aria-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 地標角色，請為每個地標提供唯一的標籤。此標籤將允許輔助技術使用者能夠快速瞭解每個地標的用途。

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

可以在 <svg> 的區域上宣告 role="region" 以及 aria-label，以允許描述 SVG 的各個部分。

規範

規範
可訪問的富網際網路應用程式 (WAI-ARIA)
# 區域
未知規範

另請參閱