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