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

Makzan
·
·
IPFS
·
嗯,有為數不少的網站,其實是缺 h1 大標的,又或者視覺上最大最像標題的文字,實際不是任何標題標籤,在瀏覽器看來,只是一句普通的文字。一個網頁連大標題也沒有,SEO 想好也難吧?

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

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

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

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

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

Credits: https://www.w3.org/WAI/tutorials/page-structure/headings/

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

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

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

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

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

Credits: https://www.w3.org/WAI/tutorials/page-structure/headings/

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

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

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

實作時間

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

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

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

標題示範網頁,當中有一個刻意錯誤的 h5 標題跳級。

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

例子:澳門電力公司

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

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

澳門電力公司網站首頁:沒有大標題兼有空白標題

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

澳門電力公司網站:應為大標題的文字設定了為 h2

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

澳門電力公司網站:有大標題了,但和期望的不匹配,但總比沒有來得好。

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

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

馬特市的文章有良好的標題結構層級

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

文章底部的關聯作品及留言回應也定義清晰明確

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

— 麥誠 Makzan,2021-11-25。


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

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

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

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


CC BY-NC-ND 2.0 授权

喜欢我的作品吗?别忘了给予支持与赞赏,让我知道在创作的路上有你陪伴,一起延续这份热忱!

logbook icon
Makzan我管理世界職業技能競賽之網站技術項目、舉辦本地設計與開發賽事、開課分享技術心得。一個用網頁來表達自己的作家。
  • 来自作者
  • 相关推荐

期望與放下

甚麼是世界職業技能競賽

【最後兩天】買《所謂「我不投資」,就是 all in 在法定貨幣》親身體驗擁有 NFT