無障礙網頁

設計稿

無障礙越早做越好

在項目規劃時就將無障礙納入考量，付出的成本最低，就好比為什麼要使用 functional map、ui flow、wireframe 一樣，提早發現問題就提前治療，並進行預防性措施。

越晚做無障礙，需要改的東西就越多，而且還可能會一直朔源到需求層面，等於是將一個功能重新規劃、重新設計，換句話說，之前的都做白工了。

設計師要注意的項目

因為要越早做無障礙越好，所以設計師也要暸解無障礙網頁設計的規範，從設計端就開始著手，對之後開發的工程師們就越有利、越能銜接，成本才能下降。

以下是常見碰到要注意的問題：

  • 符合 AA 級的規範，一般文字與背景在 WCAG 2.2 規範下，需要有 4.5:1 對比值(未來 WCAG 可能會改成 APCA 對比標準)

  • 大尺寸文字與背景則是要有 3:1 對比值

  • 所謂大尺寸文字，是約 24px 或 18.5px 粗體，但因為 px 沒有小數點，就以 19px為準

  • 任何需要互動的 :hover、:active、:visited、:focusd、:disabled、:readonly 等效果都要做足。

  • 非文字對比內容的視覺呈現與相鄰顏色的對比度至少為 3:1，例如 Focus 時的樣式

  • Focus 時的樣式至少要有 2px 寬度

  • 有出現以下變化時，不能破版

    • 當行高至少為字體大小的 1.5 倍時

    • 當段落間距至少是字體大小的 2 倍時

    • 當字元間距至少為字體大小的 0.12 時，中文字元 0.14 時

    • 當字間距至少為字體大小的 0.16 時

    • 中文字距可比照出版業規範

  • 在不同頁面間，如果有相同的功能，盡量設計在同個位置，除非有特殊考量或特殊設計。 擁有一致性將會幫助容易記憶。

  • 資訊必須有階層性

其餘規範則請參考 WCAG

設計稿因為是靜態的，所以大部分都是注重在大小、顏色、間隔是否恰當，若更進一步的話就會製作出Design System，並在檔案中附上各種數據與命名，方便後續與工程師對接。

參考來源

Previous認證與職缺Next熟悉 HTML

Last updated