aria-live прерывается другими лейблами, как остановить это поведение?

Question

В настоящее время у меня есть этот div с aria-live = assertive:

<div id="accesibility__ready" aria-live="assertive" aria-atomic="true"></div>

В настоящее время в моем js-файле у меня есть метод установки всего на странице с помощью tabindex (первые заголовки), а затем <p>«s.Как только этот метод закончен, я хочу уведомить пользователя через мой aria live, что он теперь может перемещаться с помощью вкладки:

  var ariaAlert = document.getElementById('accesibility__ready');
  ariaAlert.setAttribute('aria-label','Content updated tab navigation ready'); 

Я заметил, что иногда aria-live читается, но затем он прерывается всемидругие метки (которые не являются aria-live), которые каким-то образом программа чтения с экрана решает прочитать.

Я использую расширение Chrome и ChromeVox.

Итак, как мне остановить использование aria-liveпрервана какими-то другими ярлыками?

Answer 1

Не похоже, что aria-live используется правильно.aria-live предназначен для использования в элементе, если содержимое / потомки этого элемента изменятся.Это включает добавление / удаление / изменение текста на самом элементе (например, textContent) или добавление / удаление элементов DOM, вложенных в элемент.Подробности см. В спецификации W3 aria-live.

aira-live - это , а не , используемый для указания того, когда атрибут элемента изменился.То есть, используя aria-live для <div> и затем изменяя aria-label этого div, будет объявлено , а не .

aria-atomic контролирует, сколько считывается при изменении.Должна ли читаться только определенная измененная вещь (aria-atomic="false" - по умолчанию) или должен читаться весь элемент (aria-atomic="true").

Например,

<div aria-live="polite">
  this message will self destruct in 
  <span id="counter">X</span> 
  seconds
</div>

Без указания aria-atomic (и поэтому используется значение по умолчанию false), если вы обновите counter до '5', тогда только будет объявлено значение счетчика "5".Однако, если вы используете aria-atomic="true" на <div>

<div aria-live="polite" aria-atomic="true">
  this message will self destruct in 
  <span id="counter">X</span> 
  seconds
</div>

, тогда, когда вы измените counter на '5', вы услышите, что "это сообщение самоуничтожится через 5 секунд".

Как несколько примечаний стороны.Вы всегда должны пытаться использовать aria-live="polite", если только у вас нет очень важного сообщения, которое должно прерывать все, что еще читается.Редко бывают случаи, когда необходимо использовать aria-live="assertive".Использование assertive может также очистить другие сообщения, ожидающие чтения.

https://www.w3.org/TR/wai-aria/#aria-live

"Пользовательские агенты или вспомогательные технологии МОГУТ выбрать очиститьизменения в очереди, когда происходит напористое изменение "

И, наконец, вся предпосылка вашего вопроса звучит так, как будто у вас есть опция, которая делает все заголовки и абзацы вкладками (tabindex =" 0 ").Я не знаю цели этого варианта, и у вас может быть законная причина для этого, но если цель состоит в том, чтобы «помочь» пользователям программы чтения с экрана перейти ко всем элементам на вашей странице, вы бы сделали экранчитатель пользователя disservice .У пользователей программы чтения с экрана уже есть замечательные механизмы навигации, встроенные в программу чтения с экрана.Например, на ПК пользователь JAWS или NVDA может перейти ко всем заголовкам с помощью клавиши быстрого доступа «H».Или они могут отобразить диалог, который показывает все заголовки.Они могут перемещаться к различным другим элементам с помощью аналогичных горячих клавиш («B» для перехода к следующей кнопке, «T» для перехода к следующей таблице, «R» или «D» для перехода к следующему ориентиру, «L» дляперейти к следующему списку и т. д.).VoiceOver на iOS имеет ротор, который позволяет осуществлять навигацию схожего типа с заголовками, кнопками, таблицами и т. Д. До тех пор, пока ваша страница использует семантически правильный HTML (например, <h2> для заголовка, а не просто стиль для увеличения шрифта)и жирным шрифтом), тогда у вас должно быть все в порядке без возможности сделать все фокусируемым.