焦點的無障礙 — 焦點可見與樣式篇
焦點樣式有哪些規範標準？在實作焦點樣式時需要注意哪些事情？
簡介
當我們點選表單的文字輸入框，或是點擊連結、按鈕等互動元件時，時常會發現樣式發生了一些改變，來提醒我們目前正在與這個元素互動。對於滑鼠使用者來說，大部分的情況下指標可以很明顯地指出了我們正在與畫面中的哪個元素進行互動，然而，當我們只能使用鍵盤時，視覺提示當下的焦點元素就變的很重要了，否則使用者就像迷失在茫茫大海中，不知道自己的位置在哪。
以無障礙網路空間服務網為例，當我們使用鍵盤 tab 鍵在元素之間移動，會發現元素的周圍出現了一個矩形的框，且圍繞元素的矩形空間的背景顏色也改變了，示意著目前鍵盤焦點的位置。大多數的時候，我們會希望焦點的樣式能夠配合網站的設計，因此會對焦點樣式進行客製化。而在 CSS 中也提供了像是 :focus、:focus-visible 等偽元素讓開發者能方便的撰寫焦點樣式。
既然對鍵盤使用者來說，焦點就如同滑鼠指標般重要，那麼確保焦點樣式能夠正確且清楚的顯示在螢幕上，就是做好無障礙體驗的關鍵之一。可是，究竟怎樣才能算是一個「好的」焦點樣式呢？我們就來看看 WCAG 中與焦點樣式相關的規範，以作為設計與開發焦點樣式時的基本準則吧。
導讀 WCAG 焦點樣式標準
在 WCAG 中，一共有四個與焦點樣式相關的成功準則 (success criteria)，其中包含了 AA 級與 AAA 級的準則。
2.4.7: Focus Visible (AA) 焦點可視
說明：任何可由鍵盤操作的使用者介面都要有鍵盤焦點指示可見的操作模式。
首先，最重要也最基本的標準，就是在元素取得焦點時，必須出現焦點樣式。因此，在開發的時候請絕對不要！請絕對不要！將預設的焦點樣式移除！
* {
outline: none; /* 這樣非常不好! */
}在 Laura Carvajal 2018 年的 Common ways we break accessibility and how to avoid them 演講中，她提到， “you wouldn’t steal their cursor!”，表示對鍵盤使用者來說，沒有適當的焦點樣式等同於偷走了他們的’’游標’’。
2.4.11: Focus Not Obscured (Minimum) (AA) 焦點不遮蔽 (最小)
說明：當使用者互動介面元件收到鍵盤焦點時，該元件不因創作者創建內容之故，而不會被完全隱藏。
2.4.12: Focus Not Obscured (Enhanced) (AAA) 焦點不遮蔽 (加強)
說明：當使用者互動介面元件收到鍵盤焦點時，該元件沒有任何一部分因創作者創建內容之故，而被遮蔽。
這兩項成功準則都描述了當元素被聚焦時，必須是能被使用者所看見的，差別是無障礙的等級不同，對於可見的要求程度不同。這兩項對於能看見，但是卻需要依賴鍵盤操作的使用者尤其重要。
被擋住的情況常見於 sticky footers、sticky headers 或是非對話框型的彈出視窗(例如 Gmail 中撰寫新信的視窗)，當這些元素出現在畫面中時，時常會一不小心擋住了目前聚焦的元素，導致使用者不知道該如何進行互動，或是讓他們誤以為網頁故障了。
這兩項成功準則都描述了當元素被聚焦時，必須是能被使用者所看見的，差別是無障礙的等級不同，對於可見的要求程度不同。這兩項對於能看見，但是卻需要依賴鍵盤操作的使用者尤其重要。
被擋住的情況常見於 sticky footers、sticky headers 或是非對話框型的彈出視窗(例如 Gmail 中撰寫新信的視窗)，當這些元素出現在畫面中時，時常會一不小心擋住了目前聚焦的元素，導致使用者不知道該如何進行互動，或是讓他們誤以為網頁故障了。
https://www.w3.org/WAI/WCAG22/working-examples/css-padding-focus-not-obscured/
以這個例子來說，下方有個固定的 Banner，但是卻擋住了在 Footer 區域的連結，此時我們可以使用 CSS 的 scroll-padding 屬性來讓連結在獲得焦點時能完整的出現在畫面中。
2.4.13: Focus Appearance (AAA) 焦點外觀
在這一項 AAA 級成功準則中列出了除了焦點指示框線要是明顯可見的以外，其他一些更詳細的樣式要求。
- 焦點指示框線的區域至少要與未聚焦元素或子元素的 2 CSS 像素厚的周邊面積一樣大
- 焦點指示框線的區域在聚焦和未聚焦狀態下相同像素的對比度至少為 3:1
兩項要求都提到了「焦點指示區域」，而所謂的焦點指示區域，指的是元素未聚焦時與聚焦時「有發生樣式變化」的區域。如下圖所示，若一個藍色按鈕在聚焦時出現了 2px 粗的黑色邊框，那這塊 2px 邊框區域就是它的焦點指示區域。
因此，第二點所提到的色彩對比度，指的是焦點指示區域「原本」的顏色，與焦點出現後此區域的顏色的對比。以同一個按鈕的例子來說，按鈕本來周遭的背景是白色的，聚焦時出現了黑色邊框，而白色背景與黑色邊框的色彩對比度是 21:1。
如果按鈕在獲得焦點的時候改變了底色為黑色，那它的焦點指示區域就會是整個按鈕的區域。而對比度要看的則是藍色底色與黑色的對比度，為 4.86:1。
第一項要求描述了焦點指示區域的最小面積標準，但並不表示我們的焦點樣式一定要使用 2 CSS pixel 寬的 outline，但要符合此標準最簡單的做法確實是在元素的周圍設定一個 2px 寬的 outline。
.element {
outline: 2px solid #000; /* 這個 outline 符合最小面積標準 */
}若元素並非矩形時，圍繞著該元素形狀的 2px outline 也是可行的，如下圖的星形元素所示。
要注意的是，當 outline 設定為 dashed 時，因為有一半的面積不見了，所以若只設定 2px 的 outline 在此時是無法通過標準的，必須使用兩倍，4px 的 dashed outline 才能將原本消失的面積補足，並符合最小面積的標準。
在一些情況下，我們可能無法以 outline 的形式設定元素的焦點指示區域，例如下拉式選單的選項，或是堆疊起來的清單項目。這時候可以選擇使用 inner outline 來設定焦點樣式，例如下面的例子，我們在清單項目的左右兩端設定了具有一定寬度的 inner outline，確保清單項目取得焦點時能有明顯的焦點樣式。
簡而言之，雖然這兩項規定看似瑣碎，需要謹記在心的是，當你覺得焦點樣式不夠明顯時，將它變的更大更醒目就對了！
實作技巧
不要使用 outline: none !!!!!
前面已經有提過，因為瀏覽器預設焦點樣式並不符合設計美感等原因就將焦點樣式給移除，是非常糟糕的決定，因為這等同於偷走了非滑鼠使用者的游標，讓他們完全無法使用網站。
不要依賴瀏覽器的預設焦點樣式
雖然保留瀏覽器預設焦點樣式可以在一定程度上達到網頁的可訪問性，但由於網頁中的元素各式各樣，設計也不盡相同，若剛好元素的顏色與焦點樣式對比度並不理想時，還是會降低整體的可訪問性。因此，在理想的狀況中，與設計師討論不同元素的焦點樣式的設計會是較好的作法。
使用雙色的焦點指示區域
針對網頁上不同互動元素設計適當的焦點樣式是能兼顧設計美感與可訪問性的做法，然而，若今天專案因為時程或人力並沒有辦法這樣做時，有沒有一個更簡便的方式能確保每個互動元素的焦點樣式在淺/暗色模式都能符合對比度要求呢？
針對網頁上不同互動元素設計適當的焦點樣式是能兼顧設計美感與可訪問性的做法，然而，若今天專案因為時程或人力並沒有辦法這樣做時，有沒有一個更簡便的方式能確保每個互動元素的焦點樣式在淺/暗色模式都能符合對比度要求呢？
在 Erik Kroes 的文章 The universal focus state 中，他提出了一種他稱為 “oreo-focus”，由兩層黑色「夾」一層白色 outline 所組成的焦點樣式。這種夾心(就像 orea 一樣)的設計可以確保不管是在淺色或暗色背景、或是不同元素顏色的情況下，焦點樣式都能清楚的被看見。
由於在技術上沒辦法設定雙層的 outline，白色 outline 我們可以使用 box-shadow 來製作。根據網站的主題(深/淺)，我們也可以將顏色交換，變成白黑白的焦點樣式。
:focus-visible {
outline: 9px double black;
box-shadow: 0 0 0 6px white;
}Codepen 範例：
https://codepen.io/SaraSoueidan/pen/wvRaPwP/f712035239c58c1c3e7b9e8241c2fbd8
只在使用鍵盤導覽時出現焦點指示區域
眼尖的讀者們應該有注意到，在上一個例子中我們使用了 :focus-visible 偽元素而非 :focus 偽元素來設定焦點樣式。根據 MDN 文件，:focus-visible 只會在瀏覽器判斷使用者「需要」時，顯示元素的焦點樣式，例如使用鍵盤操作時。相反的，當使用者在使用滑鼠指標或手指觸控等指向操作方式與元素互動時，除非該元素需要使用者持續關注，否則就不會顯示焦點樣式。
https://codepen.io/kellychi/pen/dyLPgPy
在這個例子中有三組輸入框與按鈕，第一組只有預設的焦點樣式，第二組設定了 :focus 狀態時的焦點樣式，第三組設定了 :focus-visible 的焦點樣式。
如果使用滑鼠或手指依序點擊每個元素，會發現當使用 :focus 來設定焦點樣式時，瀏覽器會在使用者點擊按鈕時顯示焦點樣式。然而，當使用 :focus-visible 時，瀏覽器「不會」在使用者點擊按鈕時顯示焦點樣式，就像預設的情况一樣。
如果用鍵盤的 tab 鍵來導航，則會發現在預設、:focus 和 :focus-visible 三種情况下，當使用者導航至按鈕時，瀏覽器都會顯示焦點樣式。因此，使用 :focus-visible 可以讓我們在使用者真正需要焦點樣式時才顯示它。
參考資料：
A guide to designing accessible, WCAG-conformant focus indicators
https://www.sarasoueidan.com/blog/focus-indicators/
Indicating focus to improve accessibility
https://hidde.blog/indicating-focus-to-improve-accessibility/
The universal focus state
https://www.erikkroes.nl/blog/the-universal-focus-state/
focus-visible pseudo class MDN
https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
Focus or focus visible? A guide to make your focus state accessible
https://mayashavin.com/articles/focus-vs-focus-visible-for-accessibility
你的支持是我們的最大動力 💪
如果喜歡我們的文章，可以按下拍手👏來支持我們
也歡迎追蹤我們的medium跟Facebook粉絲專頁，讓我們提供你更多優質的無障礙知識跟新知！
本文作者：Kelly CHI
法文系畢業的前端工程師，致力於打造具有美感和良好用戶體驗的介面，同時也是個愛看冷門電影的骨灰級影迷。
