ARIA: 導航landmark角色
landmark是一個頁面的重要子部分。landmark角色是用於內容區域的ARIA角色值的抽象超類,這些區域足夠重要,使用者很可能會想要直接導航到它們。
注意: landmark角色是一個抽象角色。此處包含它是為了文件的完整性。Web作者不應使用它。
描述
landmark是一個抽象角色,用於表示一個內容區域,該區域足夠重要,使用者很可能會想要輕鬆地導航到該區域,並將其包含在頁面的動態生成的摘要中。Landmarks允許輔助技術快速導航和查詢內容。
要建立landmark角色,請使用語義元素(如<section>、<nav>或<main>)來定義內容的用途,或者新增一個作為landmark角色子類的ARIA角色,如role="banner"、role="complementary"或role="region"。不要使用role="landmark"。
每個具體的landmark角色都有其對應的HTML語義元素
| ARIA角色 | HTML 元素 |
|---|---|
banner |
<header> |
complementary |
<aside> |
contentinfo |
<footer> |
form |
<form> |
main |
<main> |
navigation |
<nav> |
region |
<section> |
search |
<search> |
應提供一個可見的標籤,使用aria-labelledby進行引用。如有必要,可以使用aria-label提供簡短、描述性的標籤。
對於螢幕閱讀器使用者來說,新增landmark角色可以有效地為螢幕閱讀器使用者建立“跳過連結”,但不能替代頁面內部導航,因為landmark角色並未以其他方式顯示。
最佳實踐
不要使用role="landmark";相反,應根據需要使用子類landmark角色,或者儘可能使用語義HTML。儘管不再需要,但為了相容舊瀏覽器,將子類landmark角色與相關的語義元素一起冗餘包含被認為是良好的做法。這比在非語義元素(如<div>)上使用landmark角色要好,但請至少使用role或語義元素之一來建立landmarks。否則,螢幕閱讀器使用者將更難導航您的內容。
規範
| 規範 |
|---|
| 無障礙富網際網路應用程式 (WAI-ARIA) # landmark |