可訪問性 標記
為什麼
使用標記，使用 螢幕閱讀器 的盲人使用者可以跳轉到網頁的各個部分。
什麼
在 HTML 中，有一些語義化元素可用於定義網頁的不同部分。
<header><nav><main><aside><section><footer>
如何 - 來自白宮網站的示例
白宮網站的首頁使用了標記。它包含頂部的 <header>，包含所有主要內容的 <main>，以及底部帶有一些 <nav> 元素的 <footer>。
視覺化標記的一種方法是使用工具 Accessibility Insights。其功能之一是突出顯示標記，正如我們在以下截圖中所見。
自己試試。下載瀏覽器擴充套件 Accessibility Insights 並開啟標記視覺化。您最喜歡的網站是否使用了標記？
角色
但是等等，它顯示 banner、contentinfo 和 navigation。這有點令人困惑。原因是每個標記元素都有一個對應的角色。我們在這個課程中還沒有講過角色。我們稍後會講到，但作為一種簡化的解釋：
一個 <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> *不*相關。
白宮網站的聯絡頁面同時使用了 <aside> 和 <section>。三個分享按鈕位於 <aside> 中。這很有意義，它們與主內容相關。如果您使用它們，您將分享您所在的頁面。
“保持聯絡”是一個 <section>。很好。它與主內容無關，也沒有其他合適的標記。白宮可以在這些標記上做的一個改進是新增標籤。這對螢幕閱讀器使用者來說會更好。<section aria-label="Newsletter"> 和 <aside aria-label="Share this page"> 會很有幫助。
