熟悉 CSS
這篇文章並是教如何撰寫 CSS ，而是專注在 CSS 在無障礙技術上要注意的事項。
如果您還不清楚如何撰寫 CSS，可以透過 CSS 教育訓練學習，但這一篇觀念也可以以先閱讀，以暸解 CSS 跟無障礙的關係。
文字的大小單位
要使用 「 相對單位 」，通常網頁會有一個預設的基礎大小，而 「 相對 」 意思就是這個基礎大小的 「 倍數 」。
使用情境： 使用者因個人環境或條件，他會調整瀏覽器最適合的閱讀大小，此時文字的縮放結果，不能影響使用者閱讀。
例如您的 「 網站 」 文字基礎設定是 font-size: 120%; 意思就是 「 瀏覽器 」 基礎大小的 120%。
假設使用者調整 「 瀏覽器 」 的基礎文字大小，從 16px 調整成 20px，那麼瀏覽器上的文字大小就會從 19px 變成 24px。
常見的相對單位有：%、rem、 em
根據螢幕或容器的相對大小單位有：vw、vh、cqw、cqh、cqi、cqb
另外，在 AAA 等級，有一條是 「 寬度不可多於 80 個字元或字符(中日韓語系則是 40) 」，可以使用類似 ch 的單位，ch 的定義：
The CSS ch unit is defined as the width of the character 0 (zero, or U+0030) of the font.
所以當我們想要達成這件事時，必須要特別注意字體字型，因為當設定 60ch 時，根據不同字體字型，會比 60ch 寬度大或溢位，最好事先就實驗過你的字體字型，而且請注意要試兩～三款，避免使用者的電腦沒辦法顯示你最理想的字體字型。
在 What is the CSS ‘ch’ Unit? 的測試中提到，如果想要 80 字元，在不使用窄字體字型時，設置 60ch 可能是不錯的選擇，而下面的留言討論也很有趣，有人推 ex 單位，也有人喜歡 mcw，甚至是用一長串字詞當基準等等，建議大家可以讀一讀並思考。
另外中文可能比較單純，但如果遇到中英夾雜的情況呢？所以沒有最好的單位可以達成這個目的，只能藉由您實際測試才能得知，所以請記得測試：至少兩至三款(確保兩大作業系統預設文字)全中文、全英文、中英夾雜的情況。codepen 做了一個小測試，大家可以用來檢測。
只縮放文字大小
在 Firefox 的設定中有一項是 「只縮放文字」，當使用者使用此設定時，網頁必須至少要滿足文字的縮放 200% 也不造成破版，這項設定對於切版工程師而言相當棘手，因為這意味排版的要盡量依靠元素自身的空間擠壓以及使用相對單位，否則在空間固定的情況下，文字放大將會導致破版。
文字對齊
避免使用 text-align: justify;
這是因為文字不一樣的間距，會使得閱讀上更加困難，如果您看到的設計稿在內文使用了此項對齊方式，請記得跟設計師討論是否會影響閱讀體驗。
舉例來說：(文章來源：Time https://time.com/magazine/)
右邊的標題使用了 text-align: justify; ，造成了在閱讀上的困難。
超連結
超連結原始的樣子就有底線，所以非必要不要在其他地方使用底線。
focus-within 與 focus-visiable
focus-within
當該元素使用 focus-within 時，若其本身或其 children 有焦點的時候，就套用樣式，例如 MDN 的範例
focus-visiable
使用鍵盤獲取焦點時，才會出現效果。
顏色
無障礙網頁設計的前後顏色對比規範如下：
AA
文字及影像文字的視覺呈現，至少要有 4.5:1 的對比值，大尺寸的文字及大尺寸的影像文字至少要有 3:1 的對比。
AAA：
文字及影像文字的視覺呈現，至少要有 7:1 的對比值，大尺寸的文字及大尺寸的影像文字至少要有 4.5:1 的對比。
所謂大尺寸文字：
是約 24px 或 18.5px 粗體，但因為 px 沒有小數點，就以 19px為準。
非文字內容對比：
與相鄰顏色的對比度至少為 3:1，例如 Focus 時的樣式，如果相鄰顏色達不到 3:1 ，需要有另外的區隔，例如 Focus 後至少有 2px 寬的 border。
有出現以下變化時，不能破版
當行高至少為字體大小的 1.5 倍時
當段落間距至少是字體大小的 2 倍時
當字元間距至少為字體大小的 0.12 時，中文字元 0.14 時
當字間距至少為字體大小的 0.16 時
中文字距可比照出版業規範。
WCAG3.0
未來 WCAG 3.0 顏色部分可能使用 APCA 標準，目前推薦使用 oklch() ，因為在無障礙顏色的支援與使用彈性，未來都有發展性。
https://git.apcacontrast.com/documentation/WhyAPCA
https://ruitina.com/apca-accessible-colour-contrast/
動畫效果
閃爍
不要在一秒內閃爍三次。
hover
hover 效果範圍要大
避免要很精確的在某個東西上才有效果
目前主流大部分都不建議使用 hover 在主要動作， 因為這也跟在行動裝置上操作、以及好不好操作有關。
回饋
例如按鈕按下後，會有一個點擊效果， 所以任何需要互動的 :hover、:active、:visited、:focusd、:disabled、:readonly 等效果都要做足。
裝置限制
螢幕方向
除非有必要性，否則不能強制固定使用者要用哪個方向閱讀。 也就是要慎用 orientation: portrait / horizontal
RWD
善用 @media 與 @container
徹底暸解兩者個用法，並且由大至小或由小至大做設計，避免寫太多 @media 與 @container，善用流體排版原則，需要與 HTML 相輔相成。
其他有關 RWD 的資訊可以參照 CSS 教育訓練 RWD 篇
注意瀏覽器版本、行動裝置限制
一些比較新的 CSS 可能只能在比較新版本的瀏覽器中運作，若您的專案/產品需要支援較舊版本的瀏覽器，您可能需要做一些額外處理，或是就不使用比較新的 CSS。
參考來源
Last updated