HTML 語意化結構與無障礙設計

什麼是語意化（Semantic HTML）？

語意化 HTML 是使用能清楚表達內容「意義」的標籤（Tag），讓程式碼對人與機器都更易於理解，例如搜尋引擎與輔助工具（如螢幕閱讀器）。

優點：

• 提升 SEO（搜尋引擎更容易理解內容）
• 改善可維護性與可讀性
• 讓輔助技術能正確理解結構（提升無障礙性）

常用語意化 HTML 標籤整理

• header：頁首
• nav：導航鏈結區
• main：主要內容區，每頁僅可出現一次
• section：有標題的內容區塊（搭配 <h2> 等）
• article：獨立的資訊（如部落格文章、留言）
• aside：側欄，次要內容（如推薦連結、廣告）
• footer：頁腳
• h1 ~ h6：結構化標題層級
• figure / figcaption：圖文區塊，有描述文字的圖像
• time：時間，用來標註時間資訊
• address：聯絡資訊，例如 email、公司地址

什麼是無障礙設計（Accessibility / a11y）?

無障礙設計是為了讓網站能讓身心障礙者也能正常使用，例如視障者使用螢幕閱讀器。

基礎知識：

• ARIA（Accessible Rich Internet Applications）：補充語意的屬性 常見屬性如：aria-label、aria-hidden、role、 aria-expanded
• 對比與文字清晰度：顏色對比需足夠（建議使用 WCAG 標準）
• 替代文字（alt）：所有圖片都應有對應的描述
• 語意化 HTML 本身已經有助於無障礙！不要過度依賴 div 和 span

常見錯誤與注意事項