前端開發
消除 Chrome 按鈕的黑色外框
記錄 Chrome 更新後點擊按鈕會出現黑色外框，當時用全域 outline none 消除它的做法。這個外框其實是瀏覽器的無障礙焦點指示器，全域關掉會讓鍵盤使用者完全看不到目前的焦點在哪，是應該避免的做法，現在的替代方案整理在新的一篇。
W
Chrome 更新後，點選按鈕會出現一圈黑色外框，跟原本設計稿的樣子不一樣。
當時的做法
*,
*:focus,
*:hover {
outline: none !important;
}
全域把所有元素的 outline 關掉，外框確實消失了。
這個外框其實是什麼
這圈外框不是 Chrome 的 bug，是瀏覽器的無障礙焦點指示器（focus indicator）。 元素被「聚焦」（focus）時——不管是滑鼠點擊，還是用 Tab 鍵在頁面上切換——瀏覽器會畫出這圈外框，讓使用者知道「目前操作的對象是這個元素」。這對只靠鍵盤操作的使用者（螢幕閱讀器使用者、行動不便無法精準操作滑鼠的使用者，也包含單純不想用滑鼠、圖快用鍵盤操作表單的人）是必要的視覺線索——沒有它，Tab 鍵按到第幾個欄位、目前選到哪個按鈕，完全無從得知。
*, *:focus, *:hover { outline: none !important; } 把這個指示器整個關掉，代價是所有人都看不到焦點在哪，包含真正需要它的鍵盤使用者。 這是網頁無障礙裡一個很常見、也很容易在不知情的狀況下犯的錯誤——單純覺得「這圈框很醜」就整個關掉，卻沒意識到它承擔的是可用性上的責任，不是裝飾。
現在的做法
只想拿掉滑鼠點擊時出現的框、但保留鍵盤導覽時的框，現在有專門為這個情境設計的 CSS 偽類別 :focus-visible，整理在《:focus-visible：只在鍵盤導覽時顯示焦點框》。