NVDA не объявляет весь текст внутри role = "alert" на Firefox

Question

У меня есть div с role="alert", который добавляется в DOM при отправке формы, он содержит h3 и описание. В момент выбора варианта оба текста объявляются VoiceOver (Apple), но при использовании NVDA на Firefox (Win10) объявляется только текст описания, а текст h3 никогда не слышен. В чем может быть проблема здесь?

Answer 1

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

1. 2 aria-live области в предупреждении, вероятно, являются причиной этой проблемы, вместо этого добавьте aria-live к <div class="block-list"> div. Атрибуты

2. null id могут иногда мешать вашему дереву доступности, поэтому я бы осмотрел их и посмотрел, что происходит в дереве доступности. Удалите их в любом случае, поскольку у вас никогда не должно быть нулевого id. Маловероятно, но все же что-то нужно исправить.

3. Что не ясно, так это то, что оба они изменяются одновременно. aria-live будет читать только изменения внутри NVDA, поэтому, если <h3> не обновляется, это также может вызвать проблему.

4. Возможно, вам придется изменить В настройках NVDA может быть включена настройка, которая подавляет множественные объявления aria-live, которые происходят одновременно. У вас нет NVDA на этом P C для проверки, но проверим этот момент позже.

Answer 2

Добавьте идентификатор ко всему, что вы хотите объявить при открытии оповещения, скажем, мы добавим id="foo" к вашим <h3> и id="bar" к вашему описанию div.

Затем добавьте aria-describedby="foo bar" к Div с ролью оповещения. Затем он должен объявить все это при открытии. (Хотя он может объявлять некоторые вещи более одного раза, в зависимости от AT, но это не нарушение WCAG).