提到html5網頁設計，多數討論還是停留在「支援哪些新標籤」、「跑不跑得動特效」這類技術能力清單。但語意標籤真正被設計出來的初衷，其實跟一群經常被忽略的使用者有很密切的關係——那些倚賴螢幕閱讀器瀏覽網頁的視障或弱視使用者。當網頁的骨架只是一堆看起來長得一樣的區塊，對螢幕閱讀器使用者來說，等於是在一片沒有路標的空間裡摸索。這篇文章要談的，是html5網頁設計裡語意標籤與無障礙輔助技術之間，那個經常被略過卻非常關鍵的搭配關係。
html5語意標籤真正解決的問題
傳統做法習慣用大量通用容器堆疊版面，畫面看起來沒問題，但對機器（包含瀏覽器與輔助技術）而言，這些容器彼此之間沒有語意上的區別。html5引入header、nav、main、article、aside、footer等具名的區塊元素，讓頁面結構第一次有了機器能理解的「角色標籤」。
這種語意化的價值，在一般視覺瀏覽時其實不太容易被感受到，因為畫面看起來跟過去沒有太大差異。真正的差異發生在使用者看不到畫面、只能依賴語音或點字裝置理解頁面的情境裡：語意標籤等於是把「這是導覽列」「這是主要內容」「這是附屬資訊」這些訊息，直接寫進網頁的骨架裡，讓輔助技術可以忠實轉譯出來。
在實際規劃html5網頁設計時，值得先盤點頁面上有哪些「角色明確」的區塊，再對應到適合的語意標籤，會比先寫好版面再回頭補標籤來得順暢，也比較不容易漏掉：
- 整體導覽選單所在的區域
- 頁面真正承載主要內容的區域
- 跟主內容相關、但屬於輔助性質的側邊資訊
- 版權宣告與聯絡資訊等頁尾內容
螢幕閱讀器怎麼「聽」語意結構
螢幕閱讀器使用者瀏覽網頁的方式，跟一般人用滑鼠捲動畫面完全不同。多數輔助技術會提供「依區塊跳轉」的功能，使用者可以透過快速鍵，在頁面各個語意區塊之間直接跳躍，而不需要逐字逐句從頭聽到尾。
這代表如果一個html5網頁設計裡的語意標籤用得完整，使用者可以直接跳到主要內容、略過反覆出現的導覽選單，大幅縮短找到目標資訊的時間；反過來說，如果整頁都是通用容器，螢幕閱讀器能提供的跳轉線索就非常有限，使用者只能被迫從頭聽起。
這也是為什麼在討論html5網頁設計的無障礙品質時，語意標籤的完整度跟正確性，往往比視覺呈現本身更該被重視——標籤用對地方，等於是幫看不到畫面的使用者畫了一張導覽地圖。
ARIA地標角色與語意標籤怎麼搭配不衝突
html5的語意標籤本身，多數已經內建對應的地標角色，例如nav區塊本身就隱含導覽用途、main區塊本身就代表主要內容。這代表在多數情況下，只要語意標籤用得正確，並不需要額外疊加role屬性去重複宣告同樣的角色。
但實務上仍有一些狀況需要靠role屬性補強，例如頁面中出現多個nav區塊（像是主導覽跟頁尾的次要連結區），這時候額外補上能區分用途的描述，可以幫助螢幕閱讀器使用者分辨「這是哪一個導覽」。
需要提醒的是，重複或錯誤疊加role屬性，有時反而會造成輔助技術判讀混亂，例如在一個語意標籤上硬加一個意義相反或重複的角色宣告。html5網頁設計如果想兼顧無障礙，理解語意標籤本身已經表達了什麼，往往比盲目堆疊額外屬性更重要。
標題階層與跳段瀏覽的邏輯
除了大區塊的語意標籤，頁面內部的標題階層（從最上層標題依序往下）也是螢幕閱讀器使用者仰賴的重要導覽依據。許多輔助技術提供「依標題跳轉」的功能，讓使用者可以先瀏覽整頁的標題大綱，再決定要深入哪一段。
如果標題階層跳躍混亂，例如中間跳過好幾層，或者純粹為了視覺大小而選用標題層級、而非依照內容的邏輯關係，會讓螢幕閱讀器使用者建立起錯誤的頁面心智地圖，誤以為某段內容的重要性跟實際不符。
在html5網頁設計流程中，建議把標題階層規劃視為跟語意標籤同等重要的一環，先確認內容的邏輯層次，再決定畫面上的標題該落在哪一層，而不是反過來先決定字級大小、再回頭套用標題標籤。
表單與互動元件的語意標記重點
表單是網頁上互動最頻繁、卻也最容易在無障礙上出問題的元件類型。每一個輸入欄位，都應該要有明確關聯的文字說明，讓螢幕閱讀器在使用者聚焦到欄位時，能同步讀出這個欄位是要填什麼。
除了單一欄位的說明文字之外，如果表單裡有邏輯上該被歸為一組的欄位，也建議透過語意化的分組方式，讓螢幕閱讀器可以先告知使用者接下來是哪一組欄位，再逐一朗讀個別欄位，減少使用者需要自行拼湊上下文的負擔。
錯誤訊息的呈現方式同樣值得留意：如果驗證錯誤只靠顏色或圖示表示，螢幕閱讀器使用者完全無法察覺；比較穩妥的做法，是讓錯誤說明本身也能被輔助技術讀出來，而不是只呈現在視覺畫面上。
圖片與非文字內容的替代文字判斷原則
html5網頁設計裡另一個常被簡化處理的細節，是圖片與圖示的替代文字。替代文字的目的，是讓看不到圖片的使用者，也能理解這張圖片在頁面脈絡裡想傳達的意思，而不是機械式地描述畫面裡有什麼物件。
純裝飾性質、不帶任何額外資訊的圖片，其實不需要冗長的替代文字描述，甚至應該明確標示為裝飾用途，避免螢幕閱讀器逐一朗讀一堆對理解內容毫無幫助的描述，反而增加使用者的聽覺負擔。
相對地，如果圖片本身承載了重要資訊，替代文字就必須具體傳達出這些資訊的意義，讓螢幕閱讀器使用者不會因為看不到圖片而漏掉關鍵內容。這一點在html5網頁設計的實務檢核中，經常是最容易被遺漏的一環。
常見問題
html5網頁設計如果沒有特別處理無障礙，會有什麼實際影響？
最直接的影響，是仰賴螢幕閱讀器等輔助技術的使用者，很難有效率地理解頁面結構、找到自己需要的資訊，可能需要花費比一般使用者多出許多的時間才能完成同樣的瀏覽目的。
語意標籤跟一般的排版容器，實際差異只在於名稱不一樣嗎？
不只是名稱差異。語意標籤帶有機器可以理解的角色訊息，瀏覽器與輔助技術會依據這些角色提供對應的功能，例如跳轉與朗讀順序，這是純排版用的通用容器無法提供的。
是不是每個網頁都需要額外加上大量ARIA屬性，才算是無障礙友善？
不一定。html5語意標籤本身已經內建不少對應的角色語意，多數情況下正確使用語意標籤就已經涵蓋基本需求，額外的ARIA屬性應該用在語意標籤無法完整表達、或畫面上出現特殊互動情境的地方，而不是不分情況大量堆疊。
無障礙相關的調整，是不是要整個網站重新設計才能做？
不一定需要全面重做。多數無障礙相關的調整，是針對既有頁面結構逐步檢視語意標籤、標題階層、表單標記與替代文字等細節進行修正，可以分階段調整，不需要一次性推翻整體設計。
如果不確定自己的網站在html5語意結構與無障礙細節上做得夠不夠完整，與其自己反覆猜測，不如透過免費網站健診，實際盤點目前的頁面結構有哪些地方值得優化。對於想更進一步當面討論調整方向的業主，也可以善用全台免費到府諮詢的服務，讓專人依照網站現況給出具體可執行的建議。