Прочитайте этикетку арии-живого региона

Question

У меня есть список определений, где один из элементов может измениться:

// Update dynamic content
setInterval(function() {
  document.getElementById('dynamic-info').textContent++;
}, 3000);

<dl>
  <dt>Static information</dt>
  <dd>Value 1</dd>
  
  <dt>Static information 2</dt>
  <dd>Value 2</dd>
  
  <dt id="dynamic-info-def">Dynamic number</dt>
  <dd id="dynamic-info" aria-live="polite" aria-labelledby="dynamic-info-def">1</dd>
</dl>

я положил aria-live на содержание, потому что оно должно быть прочитано для чтения с экрана, который работает, но только число читается. Нужно сказать "Динамическое число: 2", чтобы у пользователя был контекст.

Я не могу поставить aria-live на <dl> потому что это было бы слишком много контента для чтения. Я попытался положить обёртку div вокруг последнего dt/dd пара, но это нелегальный HTML.

Я пытался с помощью aria-labelledby (показано выше), но это не имело никакого эффекта (в Chrome с VoiceOver).

Как я могу заставить живой регион читать связанный контент?

Answer 1

Область, указанная в качестве живого региона ARIA, будет читать только его содержимое. Это будет игнорировать aria-labelledby а также aria-describedby,

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

Если вы не хотите, чтобы этот дополнительный текст был виден, используйте скрытую технику CSS.

Answer 2

Ты играл с Aria-Atomic? Он пройдет по дереву предков, поэтому его нужно установить на родительском элементе

. Установка его на

не будет работать, потому что это брат. Но потенциально у вас может быть скрытый , который является родительским для

с "динамическим числом" в качестве текста. wuold нужно скрыть, установив его высоту в 1px, вместо того, чтобы действительно его скрывать (видимость), потому что действительно скрытые вещи не читаются программой чтения с экрана. Но тогда, если всего 1px в высоту, тогда все дети тоже будут скрыты. Облом.

Вы также можете попробовать метод грубой силы и получить 1px aria-live , который вы обновите с помощью "динамического числа 2". Полный текст будет прочитан, но не будет отображаться. Вы также обновите свой

, но он не обязательно должен быть в арии.