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

另見