可訪問性 標記
為什麼
使用標記,使用 螢幕閱讀器 的盲人使用者可以跳轉到網頁的各個部分。
什麼
在 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">
會很有幫助。