目錄
===

{%hackmd @s6102161021/greenTheme %}

- [回到目錄](/s/HJMXllRq2)

<div class="info aStyle">

此筆記以[無障礙網路空間服務網](https://accessibility.moda.gov.tw/)培訓課程講義[01-無障礙網頁設計切版V1](https://accessibility.moda.gov.tw/Lectures/Detail/1040)為基底，搭配網路資源進行整合。
</div>

<div class="aStyle">

官方資源:
[數位發展部無障礙網路空間服務網 Youtube](https://www.youtube.com/channel/UCptgknJUkkMPJ0AncjJdPCQ/videos)
[附件-網站元件設計案例與操作問題V1](https://drive.google.com/file/d/1kPR_IHNzp1I0exK09RYiTHZJA8120kS3/view)

網路資源:
[無障礙網頁設計大叔日記](https://ithelp.ithome.com.tw/users/20152260/ironman/5614)
[無障礙網站是什麼？我的網站有需要嗎？](https://www.tsg.com.tw/blog-detail4-205-0-accessibility.htm)
[無障礙網頁祕技1 - 認識無障礙網頁與分級](https://ru-hsu916.medium.com/%E7%84%A1%E9%9A%9C%E7%A4%99%E7%B6%B2%E9%A0%81%E7%A5%95%E6%8A%80-%E5%9F%BA%E6%9C%AC%E4%BB%8B%E7%B4%B9%E8%88%87%E5%88%86%E7%B4%9A-e4c0c7344a50)
[無障礙網頁祕技2 - 介面設計大補丸](https://medium.com/as-a-product-designer/%E7%84%A1%E9%9A%9C%E7%A4%99%E7%B6%B2%E9%A0%81%E7%A5%95%E6%8A%80-%E4%BB%8B%E9%9D%A2%E8%A8%AD%E8%A8%88%E5%A4%A7%E8%A3%9C%E4%B8%B8-9640dc1fde2b)
[無障礙網頁祕技3 - 前端切版前要注意什麼細節呢？](https://ru-hsu916.medium.com/%E7%84%A1%E9%9A%9C%E7%A4%99%E7%B6%B2%E9%A0%81%E7%A5%95%E6%8A%80-%E5%89%8D%E7%AB%AF%E5%88%87%E7%89%88%E5%89%8D%E8%A6%81%E6%B3%A8%E6%84%8F%E4%BB%80%E9%BA%BC%E7%B4%B0%E7%AF%80%E5%91%A2-f1b5715a2c06)
[實踐無障礙網頁設計](https://ithelp.ithome.com.tw/articles/10215933)
[無障礙網站設計入門](https://www.e-show.tw/module/pageinfo/67.html)
</div>

第一步 - 什麼是無障礙網頁
---
- [認識無障礙網頁](/s/nJDkDl-JSaOjprrjClH1sw)

第二步 - 開始設計前
---
- [無障礙網頁設計要點](/s/6RdRWfKmT0GIDn01PqkyaA)

第三步 - 到了切版的時候
---
- [無障礙網頁切版](/s/G5vCcbSJS7mDWyGy5ZJR5A)
- [無障礙網頁切版 - 表格](/s/ftPQuu4QSMiAVPhxJo13Tw)
- [無障礙網頁切版 - WAI ARIA](/s/CkCRvihnQVm-1dnIN3zCZw)

第四步 - 其他人怎麼做
---
- [無障礙網站參考](/s/58nNDsOvRsaPRrcBxSZcyA)

第五步 - 檢測工具箱
---
- [無障礙網頁檢測與套件](/s/QKL9DkP2SLO7Fbdh1-NiHQ)