W3C WAI Tutorials

關於 W3C WAI Tutorials

W3C WAI Tutorials 是網頁無障礙教學集合，以常見網頁任務說明如何讓身心障礙使用者存取內容。教材面向開發者、設計者、教學者、內容作者及專案管理者，將無障礙概念連到頁面結構、導覽選單、圖片、表格、表單與輪播等實際元件。

教學提供實作指引與範例，運用網頁標記、樣式及輔助技術相關屬性處理常見問題。各頁會列出採用的無障礙成功準則與技術，方便讀者了解做法的依據；官方也說明這些教材結合不同符合程度的建議，完整規範仍需參考對應標準。適合在建置元件或撰寫內容時，按任務查找可實作的方法與檢查方向。

功能特色

主要功能

• 頁面結構教學：涵蓋頁面區域、區域標示、標題與內容結構，附完整頁面範例。
• 導覽選單教學：說明選單結構、樣式、飛出式選單及應用程式選單，提供範例程式碼。
• 圖片替代內容：區分資訊、裝飾、功能、文字及複雜圖片，也涵蓋群組與影像地圖及替代文字判斷。
• 表格實作指引：介紹單層、雙層、不規則及多層標頭，並說明標題與摘要的使用。
• 表單無障礙：涵蓋標示、群組、填寫指示、驗證、通知、多頁表單與自訂控制項。
• 輪播元件教學：提供結構、操作、動畫及樣式指引，附可運作範例與完整程式碼。
• 準則與技術對照：各教學頁列出相關成功準則及技術，另連到完整的 WCAG 快速參考。
• 多角色實作教材：為開發者、設計者、教學者、內容作者與專案管理者提供常見任務指引。

使用情境

• 開發表單或導覽元件時，查閱對應教學的結構、標示與操作指引，加入無障礙實作。
• 內容作者準備圖片與資料表格時，依圖片類型及表格標頭情境選擇合適的替代內容與說明。

相似工具

• Adobe Color — 學習網站
• Adobe Learn — After Effects — 學習網站
• Apple Human Interface Guidelines — 學習網站
• Baymard Institute UX Knowledge Hub — 學習網站
• BP&O — 學習網站
• Brand New — 學習網站
• Butterick’s Practical Typography — 學習網站
• Color（Method of Action） — 學習網站
• DesignSystems.com — 學習網站
• Figma Learn — 學習網站
• Fonts In Use — 學習網站
• GoodUI — 學習網站

加入創作邦會員

收藏實用內容、下載免費模板，訂閱電子報。

精選工具

• Comet — Comet 是 Perplexity 的 AI 瀏覽器，整合搜尋與助理功能，可協助閱讀、比較網頁內容、準備郵件草稿與整理學習計畫。
• Lovable — Lovable 可透過對話介面建立軟體產品，協助把想法製作為網頁應用程式。
• Pexels — Pexels 是照片與影片素材資源平臺。
• DOTOWN — DOTOWN 提供像素插畫下載，官方標示可商用，可用於圖示、文件與其他創作。

新工具

• justfont blog — 分享中文字體基礎、字型排版應用與字體設計入門的繁中文章及教案。
• LottieFiles Tips and Tutorials — LottieFiles 官方教學文章，分享設計系統、狀態機、介面動畫與 Lottie 流程。
• Adobe Learn — After Effects — Adobe 官方 After Effects 教學，涵蓋文字動畫、視覺效果與動態模糊。
• Pentagram Work — Pentagram 官方作品集，分享品牌識別、策略、包裝與動態等專案案例。