Есть ли способ сообщить программе чтения с экрана о переходе в новый раздел на той же странице?
У меня есть страница, которая имеет 2 шага, чтобы зарегистрировать пользователя.
После того, как пользователь заполнил все поля первого раздела, ему необходимо подтвердить "Условия" и нажать кнопку для подтверждения. После того, как он нажал кнопку, первый раздел становится доступным только для чтения, а второй раздел (дополнительные поля для заполнения) появляется внизу страницы, и страница выполняет прокрутку до этого нового раздела.
Мне нужно сообщить программе чтения с экрана, что на той же странице есть новый раздел, но я не знаю, кому я могу это сделать.
Я ценю вашу помощь!
2 ответа
В вашем html есть пустой span/div с aria-live="assertive". В вашей функции нажатия кнопки, добавьте текст, который вы хотите, чтобы читатель объявил к этому промежутку.
(Это та же функция, где вы будете фокусироваться на этом разделе.)
Не забудьте очистить его за пределами функции, чтобы в следующий раз он также правильно объявил.
Текст, подтверждающий арию, будет объявляться при каждом изменении.
Например. В HTML
<span id="announce" aria-live="assertive"></span>
<button id="btn">Click</button>
В JavaScript
$("#btn").click(function(){
$("#announce").text("Scrolled to a new section");
});
Это касается управления фокусом. Вам нужно где-то закрепить фокус, который имеет смысл для пользователя, и затем вам нужно переместить этот фокус.
В целом, это не идеальное решение, но не хватает контекста для более широкой цели. Я дам вам немного, чтобы эта часть была функциональной / полезной.
Сначала добавьте этот стиль, чтобы вы могли видеть, куда направлен фокус (вы можете удалить / изменить его позже):
*:focus {
outline: 2px solid #f00;
}
Теперь, когда вы переходите по странице, вы можете видеть, где находится фокус.
Затем в вашем скрипте, где вы создаете новую форму (я рекомендую вам на самом деле просто скрыть этот раздел и отобразить его вместо записи через JS, но я понимаю, что это может быть демо), обновите <h3> быть сфокусированным, добавив id атрибут, а затем tabindex так что вы можете сосредоточиться на этом. Я использую <h3> у вас уже есть, так как он предоставляет контекст для пользователя и в этом случае отвергает мое общее отвращение к использованию tabindex на неинтерактивных элементах.
<h3 id="second" tabindex="0">
Затем добавьте немного скрипта после вашего setTimeout() который перемещает фокус на этот элемент (таким образом гарантируя, что он был визуализирован и может получить фокус):
var secondForm = document.getElementById('second');
secondForm.focus();
Теперь при нажатии "Продолжить!" Кнопка, страница прокручивается и заголовок получает фокус, получает объявление (вы можете добавить текст инструкции и т. д.), и пользователь может продолжить.
Вам, вероятно, придется немного помассировать скрипт, возможно, вставив его в собственную функцию таймера, чтобы быть уверенным, что он запускается только тогда, когда вы хотите, но в целом общая концепция там присутствует.