Landmark Regions
Demo 與 Accessibility Tree
本週更新
新增 Grid 與 Feed 兩個元件頁。
這個 section 沒有無障礙名稱，所以它不是地標。
Accessibility Tree
觀察對象：這一頁的 header。
元素目前不在無障礙樹中。
Accessibility Tree
觀察對象：header 裡的導覽。
元素目前不在無障礙樹中。
Accessibility Tree
觀察對象：這一頁的 main。
元素目前不在無障礙樹中。
Accessibility Tree
觀察對象：頁面標題區的 header。
元素目前不在無障礙樹中。
Accessibility Tree
觀察對象：搜尋區塊。
元素目前不在無障礙樹中。
Accessibility Tree
觀察對象：訂閱表單。
元素目前不在無障礙樹中。
Accessibility Tree
觀察對象：具名的 section。
元素目前不在無障礙樹中。
Accessibility Tree
觀察對象：沒有名稱的 section。
元素目前不在無障礙樹中。
Accessibility Tree
觀察對象：這一頁的 footer。
元素目前不在無障礙樹中。
鍵盤操作
| 按鍵 | 行為 |
|---|---|
| Tab | 地標本身不接收焦點，Tab 不會停在上面。這一頁按 Tab 的第一個停留點是「跳到主要內容」的略過連結。 |
| D / Shift + D | NVDA 的下一個與上一個地標。地標唯一的用途就是讓使用者這樣跳 —— 沒有名稱的地標在這份清單裡只會顯示角色名，使用者分不出是哪一個。 |
| Insert + F7 | NVDA 的元素清單，可以列出整頁的地標。VoiceOver 的對應功能是 VO + U 的 Landmarks 選單。這是地標的驗收方式：清單裡每一項都該看得出是什麼。 |
| Enter（在略過連結上） | 跳過導覽直接進入 main。略過連結是給鍵盤使用者的，它與地標解決的是同一個問題的兩面。 |
ARIA 屬性
| 屬性 | 值 | 用途 |
|---|---|---|
<header> | banner | 必須直接位於 body 情境下才是 banner；包進 main、section、article 之後就只是普通容器。一個頁面最多一個最高層級的 banner。面板上第一個與第四個觀察對象都是 <header>，角色卻不同 —— 差別只在它被誰包著。 |
<main> | main | 主要內容。每個頁面一個最高層級的 main。若同一份文件真的有多個（例如巢狀的應用程式情境），每個都要有可區分的無障礙名稱。 |
<footer> | contentinfo | 與 header 同一條規則：只有在 body 情境下才是 contentinfo，且最多一個最高層級的。 |
<nav> | navigation | nav 不受巢狀影響，永遠是 navigation。這一頁有兩個：「主要導覽」與頁尾的「參考規範」。多個導覽地標各要有自己的名稱；但若兩個導覽包含的是同一組連結，就該用相同的名稱 —— 名稱不同會讓使用者以為是兩份不同的東西。 |
<search> | search | 提供搜尋功能的一組控制元件用這個，不要用 form。form 地標的意思是「這裡有一份表單要填」，而使用者找搜尋框時要找的是搜尋。 |
<form> + 名稱 | form | form 只有具備無障礙名稱時才是地標，沒有名稱就只是普通容器。名稱代表整份表單的用途，不是個別欄位的標籤。 |
<section> + 名稱 | region | 同樣只有具名時才是地標。region 用來標示其他具名地標沒涵蓋、但重要到值得跳過去的內容。面板上最後兩個 section 是對照組：一個有名字所以是 region，一個沒有所以是 generic。 |
<aside> | complementary | 與主要內容相關、但拿掉也能獨立理解的輔助區塊。這一頁沒有放 —— 內容與主要內容無關時就不該用它，該換成更通用的角色。 |
aria-labelledby / aria-label | 可見標題的 id / 文字 | 地標的名稱。有可見標題就指向它，沒有才用 aria-label。名稱裡不要重複角色名 —— 寫成 aria-label="導覽" 會被唸成「導覽，導覽」。 |
WCAG 對應
- 等級 A1.3.1 資訊及關聯性
頁面的區塊劃分用原生地標元素表達，而不只靠視覺上的分隔線與留白。
- 等級 A2.4.1 區塊跳過
地標讓輔助科技使用者直接跳到主要內容；略過連結提供同樣的出路給只用鍵盤的人。兩者缺一不可 —— 地標對不用螢幕閱讀器的鍵盤使用者沒有幫助。
- 等級 AA2.4.6 標題及標籤
重複出現的地標各有可區分的名稱，地標清單裡每一項都看得出是什麼。
- 等級 AA3.2.3 一致的導覽
同一組連結在每一頁用相同的地標與相同的名稱，使用者學會一次就能到處用。
APG 規則
- 頁面結構
地標的無障礙名稱有意義且不重複角色名稱
地標的標籤應透過 aria-labelledby 參照可見標題，或在必要時使用 aria-label 提供，且標籤內容不應重複地標的角色名稱。
- 頁面結構
主要地標位於最高層級且數量適當
每個頁面應有一個最高層級的主要地標用於主要內容；每個巢狀的文件或應用程式情境可以擁有自己的主要地標。
- 頁面結構
多個主要地標須有可區分的無障礙名稱
若同一文件或應用程式情境中有多個主要地標，每個須有唯一的無障礙名稱。
- 頁面結構
橫幅地標位於最高層級且數量適當
一個頁面最多只能有一個最高層級的橫幅地標；每個巢狀的文件或應用程式情境可以擁有自己的橫幅地標。
- 頁面結構
多個橫幅地標須有可區分的無障礙名稱
若同一文件或應用程式情境中有多個橫幅地標，每個須有唯一的無障礙名稱。
- 頁面結構
資訊地標位於最高層級且數量適當
一個頁面最多只能有一個最高層級的資訊地標；每個巢狀的文件或應用程式情境可以擁有自己的資訊地標。
- 頁面結構
多個資訊地標須有可區分的無障礙名稱
若同一文件或應用程式情境中有多個資訊地標，每個須有唯一的無障礙名稱。
- 頁面結構選做
補充地標包含相關輔助內容
補充地標是與主要內容相關的頂層輔助區塊，即使與主要內容分開也能獨立理解；不相關的內容應改用更通用的角色。
- 頁面結構選做
表單地標具有識別用途的無障礙名稱
表單地標須有無障礙名稱來說明其用途，優先使用可見標題提供。
- 頁面結構選做
表單地標用於正確的範圍與用途
表單地標代表整個表單而非個別欄位；若表單的用途是搜尋，應改用搜尋地標。
- 一致的識別、導覽與行為
導覽地標標籤保持一致
多個導覽地標各須有唯一標籤，但包含相同連結集合的導覽地標則使用相同名稱。
- 頁面結構
區域地標具有無障礙名稱
區域地標用於標示其他具名地標未涵蓋但足夠重要的內容，且必須提供無障礙名稱。
- 頁面結構
搜尋功能使用搜尋地標
提供搜尋功能的一組控制元件，應使用搜尋地標標示，而非表單地標。
- 頁面結構
頁面層級的 Header 與 Footer 揭露頁面地標
用於頁面層級內容的 header 或 footer 元素須位於 body 情境中，並正確揭露預期的橫幅或資訊地標。
- 頁面結構
用於建立區域地標的 Section 具有無障礙名稱
若 section 用於建立區域地標，它須提供有意義的無障礙名稱，並在 accessibility tree 中以 region 角色呈現。
- 頁面結構
頁面主要區塊使用地標
頁面中主要可感知的區塊，須使用適當的 HTML 區段元素或 ARIA 地標角色加以標示。
- 頁面結構
所有可感知內容都包含在地標中
頁面上所有可感知的內容都須包含在適當的地標區域內，以確保重要資訊不被輔助科技遺漏。
- 頁面結構
地標角色符合區塊用途
每個地標的角色語意須與其所包含內容的用途相符。
- 導覽機制選做
頁面避免過多地標
地標的數量應以實用為原則，不宜過多。一般建議一個頁面有七個以下的地標，除非有充分理由增加更多。
- 頁面結構
重複出現的地標角色須有可區別的名稱
當同一地標角色出現超過一次時，除非各實例的內容與用途完全相同，否則每個實例須有唯一的無障礙標籤。
- 頁面結構選做
對話框內容不重複包在地標中
對話框的內容不須重複包在地標區域中，因為對話框本身在開啟時已提供具名的容器與邊界。