Есть ли способ сообщить читателю экрана о переходе на новый раздел на той же странице?

Question

У меня есть страница, которая имеет 2 шага, чтобы зарегистрировать пользователя.

После того, как пользователь заполнил все поля первой секции, ему необходимо подтвердить «Условия использования» и нажать кнопку, чтобы подтвердить это. После того, как он нажал кнопку, первая секция становится прочитанной, а вторая часть (больше полей для заполнения) появляется внизу страницы, а на странице выполняется прокрутка к этому новому разделу.

Мне нужно сообщить читателю о том, что на той же странице есть новый раздел, но я не знаю, кто я могу это сделать.

Я ценю вашу помощь!

Answer 1

В вашем html есть пустой span/div с aria-live = "assertive". В функции нажатия кнопки добавьте текст, который вы хотите, чтобы читатель объявил об этом диапазоне.

(Это та же функция, где вы будете принимать фокус в этот раздел.)

Не забудьте очистить его вне функции, чтобы сделать это правильно объявить следующий раз также.

Aria-настойчивый текст будет объявлен каждый раз, когда он будет изменен.

Например. В HTML

<span id="announce" aria-live="assertive"></span> 
<button id="btn">Click</button> 

В JavaScript

$("#btn").click(function(){ 
$("#announce").text("Scrolled to a new section"); 
}); 

Answer 2

Речь идет об управлении фокусом. Вам нужно где-то привязать фокус, который имеет смысл для пользователя, и вам нужно будет переместить этот фокус.

Это не идеальное решение в целом, но отсутствие контекста для большей цели. Я дам вам бит, чтобы эта часть была функциональной/полезной.

Во-первых, добавьте этот стиль, так что вы можете увидеть, где основное внимание будет (вы можете удалить/изменить его позже):

*:focus { 
    outline: 2px solid #f00; 
} 

Теперь, как вы вкладке через страницу вы можете увидеть, где фокус жизни.

Затем в вашем скрипте, где вы создаете новую форму (я рекомендую вам просто скрыть этот раздел и отобразить его вместо того, чтобы записывать его через JS, но я понимаю, что это может быть демонстрация), обновите <h3> для фокусировки добавив атрибут id, а затем tabindex, чтобы можно было сфокусироваться на нем. Я использую <h3>, который у вас уже есть, так как он предоставляет контекст для пользователя и в этом случае переопределяет мое общее отвращение к использованию tabindex для неинтерактивных элементов.

<h3 id="second" tabindex="0"> 

Затем добавить немного скрипта после вашего setTimeout(), который перемещает фокус к этому элементу (обеспечивая тем самым оно было вынесено, и может получить фокус):

var secondForm = document.getElementById('second'); 
secondForm.focus(); 

Теперь при нажатии на кнопку «Продолжить! " кнопка, свитки страниц и заголовок получат фокус, объявляются (вы можете добавить текст инструкции и т. д.), и пользователь может продолжить.

Вам, вероятно, потребуется немного помассировать сценарий, возможно, наполнить его собственной функцией таймера, чтобы убедиться, что он срабатывает только тогда, когда вы хотите, но в целом общая концепция находится там.

I made a pen to demo it.