系統會將使用者焦點導向加入網頁的新內容'

當頁面出現新內容時，請嘗試確保將焦點導向該內容，讓使用者能對內容採取行動。

如何手動測試

單頁應用程式非常適合測試，尤其是在管理使用者對新內容的焦點時。

一般來說，在單頁應用程式中，點選連結不會導致硬重新整理。而是，路徑變更會擷取 <main> 內容區域的新資料。

使用螢幕閱讀器或其他輔助技術進行瀏覽時，使用者可能不會注意到新內容已加到網頁中。沒有任何指示說明他們應返回 <main> 區域。

在這種情況下，您需要管理使用者的焦點，讓使用者感知的內容與網站的視覺內容保持一致。

如何修正

如要管理使用者對網頁上新內容的焦點，請在新載入的內容中找出合適的標題，並將焦點直接導向該標題。如要將其移除，最簡單的方法是為標題提供 -1 的 tabindex，並呼叫其 focus() 方法：

<main>
  <h2 tabindex="-1">Welcome to your shopping cart</h2>
</main>
<script>
  // Assuming this gets called every time new content loads...
  function onNewPage() {
    var heading = document.querySelector('h2');
    heading.focus();
    // You can also update the page title :)
    document.title = heading.textContent;
  }
</script>

輔助技術會朗讀新的標頭，以及所屬的主要地標區域。

資源

「使用者的焦點會導向新增至網頁的新內容」原始碼