一、為什麼標題層級是無障礙的基礎

在無障礙設計中，標題層級代表了網頁的文件結構。使用者不一定透過滑鼠閱讀，有些人依靠螢幕閱讀器（如 NVDA、VoiceOver）來瀏覽。若標題順序混亂，輔助工具就無法判斷內容層次，使使用者迷失方向。清楚的標題層級能幫助所有人理解頁面組織，也有助於SEO優化。

 

二、正確使用 <h1> 至 <h6> 的原則

整個頁面應該只使用一個 <h1> 作為主標題，代表整體主題。接著依內容層次使用 <h2>、<h3>……等標籤形成巢狀結構。例如：

<h1>：網站或頁面主題

<h2>：主要段落

<h3>：子段落或補充說明
不要僅為了視覺大小而亂用標題，樣式可用 CSS 調整，而語意應留給標籤本身表達。

 

三、常見錯誤與改善方式

許多網頁只用 <div> 加粗文字代替標題，或在同一層級中跳號（如 <h1> 後直接 <h4>），這些都會造成無障礙閱讀困難。改善方式是：

檢查每段文字是否屬於主題、子主題或說明。

按層級遞進使用標題，不跳級。

若只想改變文字大小，請改用 CSS 樣式（如 font-size）。

 

四、輔助工具如何運用標題層級

螢幕閱讀器會將所有標題列成清單，讓使用者快速跳轉。例如一位視障者可按「H」鍵依標題瀏覽段落。若標題結構混亂，這些快捷操作將失效。因此，巢狀標題不只是語法規範，而是導覽地圖。良好的層級讓內容更易被理解與搜尋，提升整體使用體驗。

 

五、建立良好結構的最佳實踐

設計與開發團隊應在初期就規劃標題架構，並在編輯階段透過檢查工具（如 WAVE、axe DevTools）確認層級正確。清晰的標題層次不僅利於無障礙，也能讓維護人員更輕鬆管理內容。記住：結構清楚的頁面，才是人人都能閱讀的好設計。