隱藏在頁面中的 101：讓頁面區域井然有序的地標設計(上)
地標是什麼？該如何看見與使用？
在頁面設計時，我們常會使用諸如空隙間距、線條邊框、深度和陰影、不同背景色、字體樣式等技巧將頁面內容分成不同的區塊以提高可讀性讓使用者能夠更容易地識別和理解不同的內容和功能。
- 空隙間距：是指不同區塊之間的間隔距離，利用頁面上的空白區域來區分不同的內容區塊。
- 線條邊框：會使用不同的邊框樣式、顏色和粗細度創造視覺上的分界線來劃分出不同的區塊。
- 深度和陰影：增加頁面的層次感
運用這些技巧，我們可以將頁面分成不同的區塊並將相近的內容或功能放在一個區塊中，進而幫助使用者更好的識別不同的區塊與理解頁面的結構。
例如，在一個電商網站上，可以將不同的產品分類展示在不同的區塊中，同時在每個區塊內使用相似的字體、顏色和樣式，以便用戶更容易找到他們需要的產品。同樣的，在一個新聞網站上，可以將不同的文章放在不同的區塊中，並使用相似的排版和樣式，以便用戶更容易找到他們感興趣的內容。
然而，上述提到的視覺化技巧雖然能夠有效地劃分頁面區塊，但對於輔助科技（例如螢幕閱讀器）的使用者來說，這些技巧都是無法感知的元素。這些使用者可能無法看清楚邊框、線條、顏色等視覺元素，那麼我們又該如何處理才好呢？
本篇要談的即是運用 HTML 地標/區域結構化頁面，使得輔助科技可以更好地理解頁面的佈局並傳達給使用者讀取與互動的內容。
地標/區域是什麼？
地標/區域可以幫助我們將網頁版面結構化，劃分出不同的區域，進而表現出語意化的頁面區塊。透過這種方式，我們可以為輔助技術提供程式化的結構資訊，讓其更容易讀取和處理網頁內容。
螢幕閱讀器可以利用地標/區域的資訊，為使用者提供相應的提示和功能，例如進入或離開地標/區域時給予提示、地標/區域間的快速跳轉、略過地標/區域、回到地標/區域開頭等等。正確的使用地標/區域角色，可以提高頁面佈局的可發現性和導覽性，讓使用者更有效率地瀏覽網頁內容。
在撰寫 HTML 時，若要為頁面加入地標/區域，可以使用 HTML5 中的一些元素，例如：<main> 、<nav>、<header>、<footer> 等，這些元素已經預定義了地標的角色。
此外，還可以使用 role 屬性來自定義，例如將一個 <div> 元素定義為 role=”region” ，就可以將其定義為區域的角色。
我們將以臺灣視障協會 — 愛幸福商品頁面為例，展示螢幕閱讀器的效果。這個頁面的地標結構如下圖所示：
螢幕閱讀器如何提示地標/區域？
螢幕閱讀器可在焦點進入或離開地標/區域時給予提示，以「臺灣視障協會 — 愛幸福商品」這個頁面的「麵包屑區域」為例。
- 在 NVDA 中，焦點進入麵包屑區域時會朗讀「麵包屑 區域」，離開這個區域時會朗讀「離開區域」。
- 在 Voiceover 中，焦點停駐在麵包屑區域的首個元素時會朗讀「麵包屑 片段 標記」，如果為最後一個元素時會朗讀「結尾 麵包屑 片段」
當使用者在瀏覽網頁時，讀到「麵包屑 區域」就可以知道接下來的這些元素是在麵包屑區域內且都是與麵包屑導覽有關的元素，而讀到「離開 區域」時，就能得知已離開區域，並了解後續讀到的內容是與麵包屑功能無關的元素。
螢幕閱讀器如何運用地標/區域進行導覽？
螢幕閱讀器可在頁面中的地標/區域間快速跳轉、略過地標/區域與回到地標/區域開頭，能讓使用者更有效率的在頁面間瀏覽。
地標/區域間的快速跳轉
此功能能讓使用者在進入頁面時，快速瀏覽頁面的區塊來掌握頁面的分區結構，以建立心理地圖。在 NVDA 中，使用者可按「d」鍵，在 VoiceOver 中，使用者可將轉輪選到「標記」項目後上下滑動。
當我們在頁首按下「d」鍵時，焦點會依序從「橫幅區地標」、「導航區地標」、「主要內容區地標」、「麵包屑區域」、「左側導覽區域」、「內容區域」、「資訊區地標」往下移動，如果焦點在最後一個地標/區域，則會提示沒有下一個地標，而按下「shift+,」鍵則可以反向移動。
略過地標/區域與回到地標/區域開頭
利用略過地標/區域功能，使用者可以直接跳過不感興趣的區塊，節省找尋元素與瀏覽頁面的時間；而回到地標/區域開頭功能通常在區塊內容較多時使用，例如當使用者瀏覽到區塊的後面時，忘記了該區塊的目的，或想重新閱讀該區塊時，可以使用此功能回到區塊的開頭重新閱讀。在 NVDA 中，使用者可按「d」鍵跳過地標/區域，按「shift+，」回到該地標/區域的開頭。
當我們在左側導覽區域時，按下「shift+,」 便會回到這個區域的開頭項目「手工皂」，第二次因已經在開頭，因此不會移動焦點，僅重複再報讀一次「手工皂」的連結，而按下「,」便會略過這個左側導覽區域直接移動焦點到「內容區域」。
如何視覺化檢視網頁的區域/地標呢？
如果想要參考其他網站的做法，設計師可以如何從視覺上檢視其他網頁的地標/區域呢？這邊想跟你分享一個十分好用的 Plugin — — Microsoft開發的Accessibility Insights for Web。這個插件除了可以讓你一鍵檢查地標/區域之外，也有其他常見 Accessbility 的檢查工具，如顏色，Heading 和鍵盤 Tab 操作順序等，支援 Chrome 和 Edge 瀏覽器，也有軟體版本，推薦所有人都可以下載的好用小工具！
那麼如何使用 Accessibility Insights for Web 來查看地標和區域呢？在安裝完之後點擊打開插件，可以看到裡面有一些常見項目與操作開關。
我們同樣以「臺灣視障協會 — 愛幸福商品」的頁面為例，在Plugin中找到「Landmarks」這個項目按下相應的開關按鈕，馬上就可以看到插件幫你在網站上標上地標和區域了！是不是很快速方便呢？
如何在設計稿上標識地標/區域呢？
那麼設計師在交付的時候要如何標識地標/區域呢？除了自己做標籤與拉框線之外，也可以活用 Community 裡面資源！其實很多公司都有推出自己的Accessibility Notation 工具來幫設計師更有效率地標示地標/區域、Heading 和鍵盤 Tab 操作順序等。
在標示地標/區域上，很推薦使用同是 Microsoft 推出的 Fluent Accessibility Notation，其中就有提供標示地標和區域的 Component 了。
適當的地標數量
我們應在頁面中僅使用適當的地標數量，過少的地標可能讓使用者無法快速的找到與前往想要的內容區域，而過多的地標則可能增加使用者的負擔和困惑，那麼地標的數量要多少會比較恰當呢？
我們可以根據魔術數字7、螢幕閱讀器對地標的處理方式與 HTML5區段元素的標籤類型這些面向來考量：
- 根據美國心理學家米勒的論文，人類大腦在同時處理多個訊息時有能力限制，每次只能同時處理 7項 （±2），這也被稱為「魔術數字 7 」。
- 從前面提到螢幕閱讀器處理地標的方式我們也可發現，地標有定位與組織頁面結構的功能，螢幕閱讀器使用者會依據地標在大腦中建立心裡地圖。
- HTML5 的標準中，可以建立不同類型地標的原生 HTML 標籤有7種。
綜合以上幾點，建議可以將地標的數量控制在五到九個之間，不但可以避免使用者因過多的地標感到負荷，也不會造成螢幕閱讀器操作時不易定位與建立心理地圖，更可以在開發上有較好的對應實做。
現在你應該對地標是什麼、螢幕閱讀器使用者如何利用地標以及如何在設計稿上標註地標有所了解。
在下一篇文章中，我們將更深入地探討開發過程中撰寫 HTML 時，應注意哪些地標相關知識。那麼我們就下一篇見了！
補充資料
- 米勒於 1956 年發表的論文：「The Magical Number Seven, Plus or Minus Two: Some Limits on Our Capacity for Processing Information」
本文作者：Woody
熱愛學習與開發程式的軟體工程師，對知識充滿好奇心，喜歡與人的互相分享。歡迎來一起協作開發各種 accessibility 專案。
