選單
×
   ❮   
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

可訪問性 標記


為什麼

使用標記,使用 螢幕閱讀器 的盲人使用者可以跳轉到網頁的各個部分。


什麼

在 HTML 中,有一些語義化元素可用於定義網頁的不同部分。

  • <header>
  • <nav>
  • <main>
  • <aside>
  • <section>
  • <footer>

如何 - 來自白宮網站的示例

白宮網站的首頁使用了標記。它包含頂部的 <header>,包含所有主要內容的 <main>,以及底部帶有一些 <nav> 元素的 <footer>

視覺化標記的一種方法是使用工具 Accessibility Insights。其功能之一是突出顯示標記,正如我們在以下截圖中所見。

Screenshot from whitehouse.gov, showing the page is organized with banner, main, search and contentinfo landmark.

自己試試。下載瀏覽器擴充套件 Accessibility Insights 並開啟標記視覺化。您最喜歡的網站是否使用了標記?



角色

但是等等,它顯示 bannercontentinfonavigation。這有點令人困惑。原因是每個標記元素都有一個對應的角色。我們在這個課程中還沒有講過角色。我們稍後會講到,但作為一種簡化的解釋:

一個 <header> 具有內建的 banner 角色。這意味著 <header><header role="banner"><div role="banner"> 在很大程度上是等效的。在大多數情況下,<header> 就足夠了。

對於 <nav> 也是如此,它內建了 role="navigation"<main> 更簡單,它具有 role="main"。然後我們有 <footer> 及其 role="contentinfo"。我們暫時先不管角色。 

一個標記的多個例項

經驗法則是每頁只使用一個 <main>。當我們使用多種型別的標記時,例如在本例中使用了多個 <nav>,我們必須為每個標記新增標籤。這可以透過 aria-label 屬性來完成。

在白宮網站的頁尾中,我們有三個 <nav>,每個都有一個 aria-label,例如 aria-label="social navigation"。這意味著螢幕閱讀器使用者可以直接跳到社交導航。這是一種幫助。有些人會說,將“navigation”用作 <nav> 標籤的一部分是多餘的。沒有對錯之分,但 aria-label="social" 應該可以。

<aside><section> 標籤

自從 HTML 引入標記以來,開發者們一直感到困惑。人們覺得定義模糊的兩個元素是 <aside><section>。讓我們來稍微澄清一下。最大的區別在於 <aside> 與主內容相關,而 <section> *不*相關。

Screenshot of The White House, with a sign up form for a newsletter and buttons for sharing the page in social media.

白宮網站的聯絡頁面同時使用了 <aside><section>。三個分享按鈕位於 <aside> 中。這很有意義,它們與主內容相關。如果您使用它們,您將分享您所在的頁面。

“保持聯絡”是一個 <section>。很好。它與主內容無關,也沒有其他合適的標記。白宮可以在這些標記上做的一個改進是新增標籤。這對螢幕閱讀器使用者來說會更好。<section aria-label="Newsletter"><aside aria-label="Share this page"> 會很有幫助。 



×

聯絡銷售

如果您想將 W3Schools 服務用於教育機構、團隊或企業,請傳送電子郵件給我們
sales@w3schools.com

報告錯誤

如果您想報告錯誤,或想提出建議,請傳送電子郵件給我們
help@w3schools.com

W3Schools 經過最佳化,旨在方便學習和培訓。示例可能經過簡化,以提高閱讀和學習體驗。教程、參考資料和示例會不斷審查,以避免錯誤,但我們無法保證所有內容的完全正確性。使用 W3Schools 即表示您已閱讀並接受我們的使用條款Cookie 和隱私政策

版權所有 1999-2024 Refsnes Data。保留所有權利。W3Schools 由 W3.CSS 提供支援