Я пытаюсь сделать приложение React максимально доступным. Однако я замечаю какое-то странное поведение с NVDA - у меня есть два активных региона, которые я просто не могу заставить NVDA правильно объявить. На закадровом озвучивании с ними все работает плавно.
Во-первых, есть компонент уведомления, который сгенерировал HTML-код, подобный этому. NVDA не объявляет уведомления, Voiceover делает:
<div aria-live="polite" aria-hidden="true/false">
<article> <-- There might be many of these if there's multiple notifications, and there's none of these if there's no notifications
<div>
<div type="alert">
<div>
<div>The text here should be announced when shown</div>
</div>
</div>
</div>
</article>
</div>
Если я удалю aria-hidden из первого div, NVDA прочитает его, но он станет ненадежным в Voiceover. Внутри первого div есть компонент PoseGroup, который просто не отображается в сгенерированном HTML.
РЕДАКТИРОВАТЬ: Мне удалось заставить это работать, обернув все это в еще один div с aria-live = polite. Небольшое хакерское решение, но то, что вы знаете ... Если у кого-то есть лучшее решение, я слушаю.
Затем есть живой чат с таким HTML:
<div>
<ul aria-live="polite"> <-- There are multiple of these depending on number of elements, but always at least one
<li aria-hidden="true/false"> <--- There are many of these, some hidden from screen reader depending on the component, these are messages, timestamps etc, some of them should be read
<div>
<span>
<div>
<p aria-hidden="true">Visible message text</p>
<p aria-hidden="false">Hidden visibility, but contains additional information to screen reader and should be read always</p>
</div>
</span>
</div>
</li>
</ul>
</div>
Здесь я использую несколько контейнеров aria-live, которые создаются, когда в первом достаточно сообщений, это связано с тем, что Voiceover останавливает чтение, когда элементов слишком много, и это решение работает с этим. Следует также отметить, что есть компонент PoseGroup, обертывающий элементы li, он не отображается в сгенерированном HTML. Элементы li должны только читать сообщения, без отметок времени и т. Д., Поэтому они имеют aria-hidden. Что бы я ни пробовал, NVDA ничего из этого не читает. Закадровый голос отлично работает с таким кодом. Я безуспешно пытался преобразовать ul и li в div.
Затем есть компонент ввода формы, который имеет метку ошибки в качестве активной области, выглядит следующим образом:
<label>
<span>Some text</span>
<input/>
<div aria-live="polite">
<span>This span is conditionally shown if there's an error.</span>
</div>
</label>
Однако этот компонент отлично работает как с Voiceover, так и с NVDA, и я просто не могу понять, почему два других этого не делают. Конечно, они более сложные, но разве это не должно работать и на NVDA, поскольку Voiceover делает это без каких-либо проблем?
Я до сих пор считаю себя новичком в области доступности и уже пару дней бьюсь головой о стену.
