通過以下方式管理用戶焦點：焦點可見

這是有關可訪問形式設計的系列中的第二個。 如果您錯過了第一部分，請查看“帶有偽類的可訪問表格”。這篇文章重點介紹了偽級及其在Web開發中的有效使用。 :focus-visible

理解焦點

在潛入

>之前，讓我們在CSS中回顧一下

pseudo-class。 :focus-visible在視覺上指示使用元素的用戶交互（鍵盤，鼠標，觸控板或輔助技術）。 自然互動元素（例如鍊接，按鈕和表單字段）需要明確的焦點指標來維持用戶意識。 :focusfocus避免使用此css！

刪除默認的

概述刪除了所有用戶的關鍵視覺反饋。 始終保留焦點指標。 如果絕對需要刪除，請確保提供與視覺上的替代方案。 如果出現了設計涉及，請協作找到一個可訪問的解決方案。

<code>:focus {
  outline: 0;
}

/*** OR ***/

:focus {
  outline: none;
}</code>

>

:focus：focus-visible

pseudo-class提供了類似於的焦點指標，但具有改進的用戶體驗。 它的語法很簡單：

對於特定元素：:focus-visible :focus

>

<code>:focus-visible {
  /* ...styles... */
}</code>

>允許在鼠標咔嗒/敲擊上不必要的視覺雜亂無章的視覺焦點指示器。 如果未實施，則默認瀏覽器焦點環（通常認為是不受歡迎的）仍然存在。

>

<code>.your-element:focus-visible {
  /* ...styles... */
}</code>

：focus-visible

focus-visible的歷史記錄

>在

之前，默認的瀏覽器樣式廣泛，通常會導致不吸引人的“聚焦環”。 許多開發人員刪除了這枚戒指，無意中為鍵盤用戶創建可訪問性問題。 基於用戶輸入方法（鍵盤，鼠標等），現代瀏覽器使用啟發式方法（算法來查找良好的選擇）來確定焦點戒指何時是有益的。 這意味著瀏覽器智能地應用或省略了焦點環。 在官方規範之前，

早期實施（例如愛麗絲·布里恩（Alice Boxhall）和布萊恩·卡德爾（Brian Kardell）和莫齊拉（Mozilla）的

）依靠多填充。 羅布·多德森（Rob Dodson）的A11y演員提供了對這一進化的進一步見解。 :focus-visible> :focus>

為什麼焦點很重要

提供明確的焦點指標至關重要。 用戶，尤其是那些殘疾人，需要了解其網頁中的位置和互動。兩個盲兄弟網站（:moz-focusringhttps://www.php.cn/link/a21852bf267634b8db7f0633120e5620

>）是視覺線索如何對導航至關重要的有力示例。

演示和代碼

以下代碼在動作中演示:focus-visible。 僅在使用鍵盤導航時才會出現焦點戒指，展示瀏覽器的智能啟發式。

<code>:focus {
  outline: 0;
}

/*** OR ***/

:focus {
  outline: none;
}</code>

>瀏覽器支持和後備

瀏覽器支持各不相同。 在不支持的瀏覽器中使用

（功能查詢）作為後備樣式：> @supports

<code>:focus-visible {
  /* ...styles... */
}</code>

其他可訪問性注意事項

確保聚焦指示器顏色符合WCAG 2.2非文本對比度（級別AA）指南。

• >通過保持跨交互式元素的一致樣式來避免認知超負荷。 >
• >瀏覽器支持（來自caniuse.com）：

（將在此處使用更新的Caniuse數據重新創建表）

進一步讀取：

https://www.php.cn/link/fdac69c3eee7bd0427535354EAE235A4

>

• > https://www.php.cn/link/54bca824f5fa890e036fb9191bcdc324 >

以上是通過以下方式管理用戶焦點：焦點可見的詳細內容。更多資訊請關注PHP中文網其他相關文章！