焦點戒指的動畫位置

FocusOverlay，一款由Maurice Mahan創建的庫，用於在獲得焦點的元素上創建動畫焦點環。它與Flying Focus理念相似，通過動畫效果突出顯示焦點元素的移動。

該庫的實用性在輔助功能方面存在爭議：

• 優點：動畫效果清晰地指示焦點位置變化，尤其在頁面滾動時，能更有效地引導用戶注意焦點所在。
• 缺點：額外的動畫效果可能對部分用戶造成乾擾或不適，特別是那些對運動敏感的用戶。

此外，該庫需要通過數據屬性控制行為，這可能導致開發者需要在模板中添加額外代碼。為解決這個問題，建議根據用戶的“減少運動”偏好設置有條件地加載該庫。

FocusOverlay庫可在npm上獲取，也支持通過UNPKG直接鏈接。以下代碼演示瞭如何根據用戶偏好有條件加載庫：

<link href="//unpkg.com/focus-overlay@latest/dist/focusoverlay.css" media="prefers-reduced-motion: no-preference" rel="stylesheet">
<script>
const mq = window.matchMedia("(prefers-reduced-motion: no-preference)");

if (mq.matches) {
  let script = document.createElement("script");
  script.src = "//unpkg.com/focus-overlay@latest/dist/focusoverlay.js";
  document.head.appendChild(script);
}
</script>

需要注意的是，該庫的JavaScript文件大小為11.5 KB（壓縮後4.2 KB），CSS文件大小為453 B（壓縮後290 B）。 這需要考慮在性能方面的影響，因為性能和輔助功能是相互關聯的。

性能不僅僅取決於腳本大小。該庫通過向焦點元素追加一個具有高z-index和pointer-events: none屬性的<div>元素來創建焦點環，並使用絕對定位和CSS動畫來控制其位置和大小。 然而，頻繁地修改絕對定位元素的<code>top 、 left 、 width和height屬性可能會影響性能。建議未來版本可以考慮使用FLIP動畫技術來優化性能，只動畫變換屬性。