隱藏在頁面中的 101：讓區域佈局井然有序的地標開發（下）
具體在開發時，是如何實做的呢？有哪些該留意的事呢？
複習：地標/區域是什麼？
在上一篇文章中，我們提到了地標/區域可以將網頁版面結構化，並劃分出不同的區域，提高了頁面佈局的可發現性和導覽性，協助螢幕閱讀器的使用者在心中建立起頁面的心理地圖，讓使用者更有效率地瀏覽網頁內容。
例如使用者可以在地標/區域間快速跳轉或是略過地標/區域/回到地標/區域開頭等方式來迅速的找到感興趣的內容開始閱讀。
那麼具體在開發時，是如何實做的呢？有哪些該留意的事呢？
如何在 HTML 上製作出區域及地標呢？
使用 HTML 中的原生標籤
工程師在編寫網頁開發時，可以利用 HTML5 中的區塊元素來實現設計稿上的區塊標示。特定的 HTML 區塊元素會自動創建相應的地標，以下是地標與其 HTML 區塊元素之間的關係：
根據頁面的內容，我們會優先使用以上這些標籤。通常最簡單的頁面包括< header>、<main>、<footer>三個標籤。其中，<main>標籤用於標記頁面的主要內容，如部落格的文章區或電商的產品說明區。另外，<header>標籤通常用於標記網頁上方的標誌或選單，而<footer>標籤則用於標記網頁底部的聯絡資訊、電話號碼、條款等內容，讓使用者更容易找到相關的訊息。
如果頁面再複雜一些，有選單區或其他相關內容時，則可以使用<nav>、<aside>。其中 <nav>標籤可用於標記網頁上的主要選單或次要選單，這有助於使用者更快地找到選單進行操作。而<aside>標籤則用於標記與該頁面相關的其他內容，但不是該頁主要內容。
大部分的地標都有相應的 HTML5 區塊元素可供使用，唯獨「搜尋地標」沒有對應的標籤。因此要在搜尋功能上添加「搜尋地標」時，只能透過直接指定元素角色(`div role=”search”`)的方式來完成。
現今多數螢幕閱讀器和瀏覽器能很好的搭配並辨認 HTML5 區塊元素為地標。然而，仍有一些瀏覽器和螢幕閱讀器的组合可能無法辨識。因此，雖然可以使用 HTML5 區塊元素（例如<nav>）代替直接設定角色的方式，但仍建議同時使用兩種方式（例如：`<nav role=”navigation”>`）以提高相容性。
當沒有合適的地標來表示該區塊怎麼辦？
如果在上述所列的地標中找不到合適的來標記時，可以使用區域角色。區域角色可以透過 <section> 元素，或是使用 <div role=”region”> 的方式來創建，此外需要通過 aria-label 或是 aria-labelledby 的方式指定區域的可訪問名稱，使得螢幕閱讀器移動到此區域時可以報讀出來。
- <section aria-label=”廣告區域”>…</section>
- <div role=”region” aria-labelledby=”ad-label”><span id=”ad-label”>廣告區域</span>…</div>
在 Google 搜尋結果頁面中的關鍵字廣告區塊即是使用第二種 `<section>` 的方式來標記。
對於螢幕閱讀器使用者來說，區域角色和地標提供相同的使用體驗，唯一的區別在於朗讀時，區域角色會被讀為「XX區域」，而非「XX地標」。
💡 6 個小撇步，讓你標示好頁面的區塊
- 使用 banner, main, complementary, contentinfo 這四個頂層地標來覆蓋頁面的全部内容。
- 找到導覽功能的區域並標記為 role=”navigation”，在外包一層 <nav> 或 <div role=”navigation”>。
- 找到搜尋功能的區域並標記為 role=”search”，在外包一層 <div role=”search”>
- 檢查是否有重複使用相同地標的情況，若有，請使用 aria-label 或 aria-labelledby 為每個地標命名，命名時應簡要描述用途或目的。此情況常出現於頁面中有主要/次要等多個導航列，或是網頁全站關鍵字/特定標的等多種搜尋。
- 當找不到適當的地標時，可以使用區域角色來標記區塊。
- 根據上篇提到的適當的地標數量，使用 5~9 個地標來標記頁面。
不好的地標使用案例
兩個地標含蓋範圍完全重疊
在這個例子中，左側的補充區與導覽區地標包含的項目完全重疊，因此螢幕閱讀器上不會提供更多額外的區塊結構資訊，快速跳轉和略過功能實際上與只有一層地標時操作體驗相同。此外，因為兩個地標範圍重疊，螢幕閱讀器中進入此區塊時將會報讀「補充區地標」、「平台書庫導覽區地標」，使用者第一時間會認知這個區塊有二層嵌套關係，容易感到困惑與難以建立頁面結構。
這個例子有關於地標頁面的 HTML 原始碼結構是這樣的：
<header>
...
<nav>...</nav>
...
</header>
<main>
<section>...</section>
<aside>
<nav>...</nav>
</aside>
<section>...</section>
</main>
<footer>...</footer>我們可以這樣調整：
解法(1) ：將左側導覽 nav 外的 aside 移除
<header>
...
<nav>...</nav>
...
</header>
<main>
<section>...</section>
<nav>...</nav>
<section>...</section>
</main>
<footer>...</footer>
移除 <aside> 的做法對螢幕閱讀器使用者的體驗確實會更好，但實際上也存在一些小爭議，因為從語意上來看，移除 <aside> 會減損一些表達意思的能力，特別是如果這個區域內容確實是補充資訊的話，移除 <aside> 就會失去這樣的語意。此外，這種修改也可能會影響 SEO 機器人對頁面資訊的解讀方式。
解法(2) ：相關聯導覽 — 將 aside 往上提到與 main 同層
<header>
...
<nav>...</nav>
...
</header>
<aside>
<section>...</section>
<nav>...</nav>
</aside>
<main>
...
</main>
<footer>...</footer>
這個做法將麵包屑和導覽區放入補充區地標內或許更符合語意也避免了地標完全重疊的問題。
頂層地標未完全覆蓋頁面
在這種情況中，某些頁面區塊未被地標覆蓋，這對於使用螢幕閱讀器的使用者而言是不利的，因為游標在移入與離開時，不會有任何提示，同時也無法使用快速鍵略過/回到這個區塊開頭，造成頁面整體操作的不一致，會影響使用者體驗。
這個例子有關於地標頁面的 HTML 原始碼結構是這樣的：
<header>...</header>
<main>...</main>
<div>...</div>
<aside>...</aside>
<footer>...</footer>
我們可以依照 div 內的資訊，將其移到 main 或 aside 內，這樣可以確保頁面的全部內容都被覆蓋，也有助於螢幕閱讀器的快速鍵使用，修改後如下結構：
<header>...</header>
<main>...</main>
<aside><div>...</div></aside>
<footer>...</footer>看完這兩篇文章你應該能感受到地標和區域對於使用輔助科技的人來說是非常重要的元素，它可以提高頁面佈局的可發現性和導覽性。
透過建立地標和區域來結構化頁面，可以使得輔助科技（例如螢幕閱讀器）更好地理解網頁結構並傳達給使用者。因此，在網頁設計時，除了使用視覺技巧來劃分頁面區塊之外，別忘了加上 HTML 地標和區域，這樣使用輔助科技的使用者就能更方便地查找感興趣的內容並在不同的頁面區塊間進行瀏覽喔。
本文作者：Woody
熱愛學習與開發程式的軟體工程師，對知識充滿好奇心，喜歡與人的互相分享。歡迎來一起協作開發各種 accessibility 專案。
