無障礙：使用 headingMaps 檢視網站標題結構

視障人士瀏覽網站時，會配合不同的工具使用，當中可以通過快速選擇頁面上的各層級標題，來在網頁的不同位置間移動。

注：使用這個招數，不止用在改善無障礙，亦同時可以用在 SEO 搜尋引擎優化上。即無障礙其實不僅僅是對視障人士有幫助，對搜尋器及文章分析算法也是。

平常我們製作網站，大標題（<h1>）會用到這頁上最重要的文字標題上。

嗯，對，其實 h1 不是用到最頂的網站名稱上，首頁還好，首頁最重要的字句可能就是最頂的名稱或 LOGO，但其他頁面，網站名稱其實不及網站主內容中的標題來得重要。所以在其他頁， h1 應為該頁內容的主標題，或再就每一頁進行思考。

以下例子就是在中間使用了大標題。

確定第一級標題後，在不同的分段及不同的排版側內容的標題，我們會逐級遞減地使用 h2, h3, h4, h5, h6 等。

要注意的是我們不能跳級使用。例如 h1 之後，不能跳過 h2 不用而直接使用 h3。

而如果你跳級使用不同級數標題的原因是因為出來的標題大小，那麼就是搞亂了 HTML 和 CSS 的目的。HTML 是說明所標記內容的性質、群組、及重要性，和樣式的考慮是分開的。（當然，也不能完全分割，於 HTML 考慮樣式，可以保有一定的開發效率平衡，這個可以另立文章探討）

所以標題大小的考慮純屬 CSS 樣式及設計師的考量，在內容重要層級表達上，我們應遵從遞減原則。

以下例子是一個正常由上向下的遞減層級。注意中途不會跳級。

通過 headingsMap 插件，我們可以檢視任何一個網站的標題層級分佈，從而可以判斷出此網站的標題有沒有遺漏、跳級、甚至缺少 h1 等。

嗯，有為數不少的網站，其實是缺 h1 大標的，又或者視覺上最大最像標題的文字，實際不是任何標題標籤，在瀏覽器看來，只是一句普通的文字。

一個網頁連大標題也沒有，SEO 想好也難吧？

實作時間

首先，我們安裝 headingsMap 插件，視乎你所使用的瀏覽器：

• Firefox: https://addons.mozilla.org/es/firefox/addon/headingsmap/
• Chrome: https://chrome.google.com/webstore/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi
• Microsoft: https://microsoftedge.microsoft.com/addons/detail/headingsmap/bokekiiaddinealohkmhjcgfanndmcgo

安裝後，在瀏覽網站時，就可以按右上角插件列中的 (h/) 來啟動 headingsMap。左面會出現標題列表。

以以下網站為例：https://accessibility.princeton.edu/how/content/headings

可以看出這個網站的標題層級結構分明，逐級遞減（這當然，這是一個示範使用標題的網頁），而當中有一個紅色標注，是一個刻意錯誤的 h5 標題跳級。

例子：澳門電力公司

網站：https://www.cem-macau.com/zh/

打開了澳門電力公司網站，啟動 headingMaps 插件，可見這首頁是沒有任何 h1 大標題的。而且其「資訊」標題下，有若干空白的標題。可以猜想，這是 HTML 為了妥協樣式而作的犧牲，但其實通過適當的 HTML 及 CSS 技巧，是可以既符合標題層級要求、內容定義、及滿足設計樣式的。

接下來，我們再看看另一個頁面，客戶登入頁。視覺上，這頁的「客戶服務」可以判斷為這頁最重要的標題。但結果這頁仍然是沒有大標題的，「客戶服務」也只是和其他細標題一樣，被定義為 h2 同級。

接著我們再瀏覽澳門電力公司的另一頁，這次可以看到有大標題了。但定義的大標題和視覺上的大標題是不同的，OK，是可以的，設計樣式不一定要跟隨內定層級定義，只要讓人有合理期望便可以，但這裏是否合理就值得商榷了。

更多例子：馬特市 Matters.news 的文章

再多看一個例子，馬特市。我取其中一篇好文來看。可以見到 h1, h2, h3 等層級結構分明。

再看看關聯作品及留言回應，其標題層級也是有細心定義好的。

以後製作網站，或者查看其他網站時，不妨多檢查一下標題結構分佈如何，我們可以從好作品中學習，亦可以從其他網站學習改善空間，既能優化無障礙瀏覽體驗，亦能改善 SEO 搜尋引擎分析內容。

— 麥誠 Makzan，2021-11-25。

我是麥誠軒（Makzan)，除了正職外，平常我要麼辦本地賽與辦世界賽，要麼任教編程與網站開發的在職培訓。現正轉型將面授培訓內容寫成電子書、網上教材等，至今撰寫了 7 本書， 2 個視頻教學課程。

我逢星期四會不定期推出 #無障礙星期四，介紹網站無障礙的檢測工具及應用貼士。

如果我的文章有價值，請訂閱贊助我持續創作分享。

訂閱贊助：https://liker.land/thomasmak/civic