每當在網頁中加入新內容時,請嘗試確保使用者的焦點移到該內容,以便他們採取行動。
如何手動測試
單頁應用程式十分重要,特別是在管理使用者的焦點對於新內容方面。
一般來說,在單頁應用程式中點選連結不會導致強制重新整理。而會改為擷取 <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>
輔助科技宣布了新方向和主要地標區域
另請參閱管理無障礙焦點。