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

每當在網頁中加入新內容時,請嘗試確保使用者的焦點移到該內容,以便他們採取行動。

如何手動測試

單頁應用程式十分重要,特別是在管理使用者的焦點對於新內容方面。

一般來說,在單頁應用程式中點選連結不會導致強制重新整理。而會改為擷取 <main> 內容區域的新資料。

對視障使用者而言,這種做法沒有問題。但是,透過螢幕閱讀器或其他輔助技術導覽的使用者,可能不知道網頁添加了新的內容。您沒有指示應返回 <main> 區域。

在這種情況下,建議您管理使用者的焦點,確保使用者感知的結構定義與網站的視覺內容保持同步。

如何修正

如要管理使用者的焦點前往網頁上的新內容,請在新載入的內容中找出適當標題,然後將焦點移至該標題。如要這麼做,最簡單的方法是為標題提供 -1tabindex,並呼叫其 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>

輔助科技宣布了新方向和主要地標區域

另請參閱管理無障礙焦點

資源

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