Всякий раз, когда на страницу добавляется новый контент, постарайтесь обеспечить, чтобы внимание пользователя было направлено на этот контент, чтобы он мог выполнить с ним действие.
Как проверить вручную
Одностраничные приложения важно тестировать, особенно когда речь идет об управлении вниманием пользователя к новому контенту.
Обычно в одностраничном приложении щелчок по ссылке не приводит к принудительному обновлению. Вместо этого изменение маршрута извлекает новые данные для области содержимого <main> .
Пользователи, использующие программу чтения с экрана или другие вспомогательные технологии, могут не знать, что на страницу добавлен новый контент. Нет никаких указаний на то, что им следует вернуться в область <main> .
В этом случае вам потребуется управлять вниманием пользователя, чтобы его воспринимаемый контекст синхронизировался с визуальным контентом сайта.
Как исправить
Чтобы сосредоточить внимание пользователя на свежем контенте на странице, найдите хороший заголовок во вновь загруженном контенте и направьте на него внимание. Самый простой способ добиться этого — присвоить заголовку tabindex -1 и вызвать его метод 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>
Вспомогательные технологии объявляют новый заголовок и основную область, в которой он содержится.
Ресурсы
Исходный код. Внимание пользователя направлено на новый контент, добавленный в аудит страницы .