iT邦幫忙

2026 iThome 鐵人賽

DAY 6
0

事情是這樣的,大約在 2021 年 4 月,當公司團隊興致勃勃的學習無障礙時,
無障礙網路空間服務網發佈了 2.1 AA 新版規範,審核也開始變得嚴格,
我就跟公司提出了想要自己做一個基於 Vue Component 的 CSS 框架(因為評估過 Vue 是比較能讓之前沒使用過前端框架的人更容易上手),將專案中常用元件包成 Vue Component 使用,並且搭配設計師的 Figma,
意圖從設計端就符合網頁無障礙規範,透過 Figma variable 和 SCSS 變數同步,完成從設計到前端程式都符合台灣無障礙法規的產出,以降低專案成本與期末違約風險。

這是當初要做的一些理由:

  • 不可能要求所有參與的人都懂無障礙網頁設計規範
  • 工程師每次都要處理很多額外的任務,例如:鍵盤事件
  • 套件、前端框架不符合規範,可能必須修改原始碼,造成鎖死版本問題
  • 每次機器掃描後心都很累、改得很煩、不知道解法
  • 很大機率被退件,增加專案被罰錢的風險
  • 公司需要一套 UI 準則。
  • 沒有認真研究的話,有需要的人真的會感到困擾

初期很順利,因為我本身是提倡者且也會切版,
就從設計稿一路做到前端切版再交給工程師補強互動層面,完美銜接。

做完之後我們想要開源並推廣無障礙觀念,
總共做了以下事情:

  1. Figma Components/Community 以及以下提到 UI 層面的所有設計稿
  2. Vue Component
  3. 專案 Nuxt Init Template
  4. 開源到 Github
  5. 寫開源文件
  6. 上 npm
  7. 到 CodeSandbox 網站製作 Demo (這樣不管官網怎麼換,都可以使用 embed,不用再重做一次)
  8. 官方網站建立,嘗試過 Github Pages、headless CMS、Wordpress
  9. 經營電子報
  10. 經營社群Instagram 帳號

我也在這期間繼續累積了很多原本不知道的技術與知識,
也有幸跟軟協、A11y新手村做過交流收穫滿滿,
期許著有使用者使用我們做的 CSS 框架之後降低開發成本,
進而實現公、私部門的網站都能符合無障礙,
甚至能推廣到國外,讓全世界都能享用成果,
當時因為加密貨幣有一波熱潮,我們還想要 Duo 的方式經營,一切看起來都很美好。

但美夢在完成第一版第一波宣傳後,戛然而止。


上一篇
技術狂熱時期:在公司裡推廣無障礙網頁
下一篇
自我懷疑時期:網頁無障礙為什麼不容易維護
系列文
從「得過且過」心態到建立無障礙生態系:Accesserty8
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言