今天中秋節，早上想了想還是在家烤肉最有味道，
所以就跟家人們跑去大賣場買東西，
可是感覺好像沒有烤肉專區，奇怪，
這樣子體驗相當不 OK 啊，還要我到處慢慢挑，
應該弄個大大的專區才對啊，還是因為今天是中秋節，
所以覺得沒有人需要當天買食材？
不過後來也是沒挑幾樣，因為想到要收拾跟吃光食材很麻煩，
尤其是小孩也沒辦法吃太多，頂多給他嚐鮮而已。

買完食材回家，因為實在是太熱了，
所以衣服就脫光光，
突然想起了以前在教學 CSS 的時候是用穿衣服來比喻的，
現在可能無法這樣比喻了，因為 CSS 已經強大到能夠伸縮自如，
想到這邊大叔我顆顆顆的笑惹，
自娛沒有娛人。

我們在講無障礙網頁設計的時候，
如果是跟 CSS 有關的，最大的重點與困難，都和 RWD 有關，
例如畫面放大，或是僅文字放大，至少放大到 200%，畫面都不能跑版，
所以今天內容應該會是講 RWD ，抓一些重點，
不過我也不知道寫完這篇文章會長怎樣，
就來看看故事會怎樣發展吧。

font-size
font-size，文字大小，要用相對單位，
相對單位有：%、rem、 em，
也可以根據寬高來制定： vw、vh、cqw、cqh、cqi、cqb
也因為 font-size 完全不能有絕對單位 px，
所以我都是以瀏覽器目前的大小作為基準 1rem。
另外是最小最好不要小於 12px，因為再小下去會看得很吃力，
建議至少 18px 甚至更大會比較好。

text-align
如果是 AAA 等級，不要使用 justify，因為字距會不一樣大小，造成體驗不好。

非連結不要用底線
因為預設連結是有底線的，盡量不要把底線用做其他用途。

focus-within 與 focus-visiable
前者是當該元素使用 focus-within 時，
若其本身或其 children 有焦點的時候，就套用樣式。
例如 MDN 的範例
後者則是可以使用在如果使用是使用鍵盤的時候才會出現效果。

順序
螢幕報讀軟體，會根據 HTML DOM Tree 順序報讀，
所以在排版時一定要慎重考慮 HTML 標籤前後順序，
一來這會影響報讀，二來也會影響畫面前後順序。
所以真的沒有辦法的時候，
最爛的方法就是寫兩個功能一樣的東西，
然後用@media、.visually-hidden 以及 display:none 互相搭配，
達成什麼時候要顯示、隱藏跟報讀。

如果是使用 flex ，可以使用 order 來達成，
如果是用 grid，可以使用 template 或是 改變 grid 範圍，
但要切記螢幕報讀軟體會根據 HTML DOM Tree 順序這件事去考慮。

顏色
這其實應該歸類到設計的部分才說明，
但這裡先提的沒差，
無障礙網頁設計的前後顏色對比規範如下
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 時。

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

閃爍
不要在一秒內閃爍三次。

螢幕方向
除非有必要性，否則不能強制固定使用者要用哪個方向閱讀。
也就是要慎用 orientation: portrait/horizontal

hover
在網頁上蠻常會看到 hover 出現的效果，
記住，您的 hover 效果範圍要大，避免要很精確的在某個東西上才有效果。
目前主流大部分都不建議使用 hover 在主要動作，
因為這也跟在行動裝置上操作、以及好不好操作有關。

回饋
例如按鈕按下後，會有一個點擊效果，
所以任何需要互動的 :hover、:active、:visited、:focusd、:disabled、:readonly 等效果都要做足。

善用 @media 與 @container
這個應該已經講到爛了，最近 Chrome 推出的 105 版應該可以支援 @container 了，建議大家都要玩看看。

以上，能把這些 CSS 都做到，應該就有很不錯的體驗了，
能達成 AAA 的標準，希望大家都能盡力去做，不吃虧。
剩下更細節的東西，直接看規範吧。

最重要的是，跟設計師緊密的溝通，
尤其是設計稿有時候在 RWD 之間的變化非常困難達成，
另外是這有助於切版時間的掌握，以便跟 PM 交代。

大叔我身兼設計＋前端切版（剛入行時的潮流），
所以當我在設計的時候，
就會在腦海裡先初步規劃 HTML DOM tree 與 CSS ，
有好有壞啦，有時候會被切版的想法限制住設計的創意，
但只要拿捏好就好了，就當作一種修煉。

下午四點了，等等還要帶小孩出去走走看看夕陽，順便看能不能看到又大又圓的月亮。

2023-06-13 更新
目前大叔正式將 oklch() 應用在專案裡，
並且遵循未來可能的顏色規範 APCA，
建議大家可以也可以把你的顏色規範拿出來改囉！

2023-07-09 更新
活到老學到老，之前沒有注意單位"ch"的定義：
The CSS ch unit is defined as the width of the character 0 (zero, or U+0030) of the font.
所以當我們想要達成 AAA 等級中「寬度不可多於 80 個字元或字符(中日韓語系則是 40)」這件事時，使用這個單位必須要特別注意字體字型，因為當設定 60ch 時，根據不同字體字型，會比 60ch 寬度大或溢位，最好事先就實驗過你的字體字型，而且請注意要試兩～三款，避免使用者的電腦沒辦法顯示你最理想的字體字型。
在 What is the CSS ‘ch’ Unit? 的測試中提到，如果想要 80 字元，在不使用窄字體字型時，設置 60ch 可能是不錯的選擇，而下面的留言討論也很有趣，有人推 ex 單位，也有人喜歡mcw，甚至是用一長串字詞當基準等等，建議大家可以讀一讀並思考。另外中文可能比較單純，但如果遇到中英夾雜的情況呢？所以沒有最好的單位可以達成這個目的，只能藉由您實際測試才能得知，所以請記得測試：至少兩至三款(確保兩大作業系統預設文字)全中文、全英文、中英夾雜的情況。codepen 做了一個小測試，大家可以用來檢測。

請注意到，英文先於中文和中文先於英文是兩回事，前者在網頁裡，英、數字會是英文字型，後者因為中文字型都會有做英文和數字，所以中、英、數字都是套用中文字型。可以參考這篇中英字型研究文章，為您的網站做出最適當的決定。