Блог

Главная - Вопросы по программированию - Проблема доступности при прокрутке

Проблема доступности при прокрутке

#javascript #html #accessibility

Вопрос:

 $("#onReviewClick").click(function()
{ $('html, body').animate({
scrollTop: ($("#scrollHere").offset().top)-100 },
1000); });

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

Комментарии:

1. Можете ли вы предоставить код, который вы используете для своего onclick мероприятия?

2. $(«#onReviewClick»). нажмите(функция() { $(‘html, тело’).анимировать({ Вершина прокрутки: ($(«#scrollHere»).смещение().вверху)-100 }, 1000); });

3. можете ли вы обеспечить работу в stackblitz.com , для удобства?

Ответ №1:

Я бы использовал функцию animate обратного вызова для запуска вашего кода после завершения анимации.

Затем, я полагаю, вы добавляете aria-live="polite" атрибут к элементу, который вы хотите, чтобы ваш читатель экрана говорил.

 $("#onReviewClick").click(function() {
  $('html, body').animate({
    scrollTop: ($("#scrollHere").offset().top) - 100
  }, 1000, function() {
    // Animation complete.
    $("#scrollHere").attr('aria-live', 'polite');
  });
});

Комментарии:

1. Спасибо за помощь, это не сработало. Не могли бы вы, пожалуйста, предоставить какой-нибудь другой способ

2. Вам нужно будет предоставить дополнительную информацию. Ваш HTML, подробная информация о том, как вы используете программу чтения с экрана, что вы пробовали, что не сработало.

Ответ №2:

Самый простой и безопасный способ прокрутить экран и заставить программу чтения с экрана читать в нужном месте-это использовать старые добрые якоря в качестве основы:

 <a href="#more">More</a>
.
.
.
<p id="more">More text</p>

Немного менее простым и безопасным, но все еще очень хорошо работающим является немедленное наведение фокуса на элемент, который можно сфокусировать естественным образом или сделать фокусируемым с помощью tabindex=-1:

 <a href="#" onclick="document.getElementById('more').focus();">More</a>
.
.
.
<p id="more" tabindex="-1">More text</p>

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

Этот ответ не обрадует дизайнеров, но в идеале вы должны взять за основу шаблон ancohr или немедленный фокус, а затем, если сможете, создать свою анимацию поверх него, а не наоборот. С точки зрения доступности, это будет намного надежнее. Кстати, обратите внимание, что пользователь может настроить свое устройство на отключение анимации или ее уменьшение, и вам тоже следует это учитывать.

Метки: