ARIA: region role
region 角色用於識別作者認為重要的文件區域。它是一個通用的地標,當其他地標角色都不適用時,可用於輔助導航。
<div role="region" aria-label="Example">
<!-- region content -->
</div>
描述
region 角色是一個 ARIA 地標角色。region 角色應保留給作者認為足夠重要的內容區域,以便使用者可以輕鬆導航到該區域,並在頁面摘要中列出。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。
示例
<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 地標角色,請為每個角色提供唯一的標籤。此標籤將允許輔助技術使用者能夠快速理解每個地標的用途。
<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 |
| 未知規範 |