Как я могу заставить VoiceOver сообщать об изменениях радиокнопок в React?

Question

В обычном HTML создать доступную кнопку-переключатель довольно просто.Когда пользователь использует программу чтения с экрана и проверяет переключатель, программа чтения с экрана объявляет об изменении.

Однако в настоящее время я использую управляемый компонент в React.Он запускает запрос синхронизации, и когда этот запрос возвращается, переключатель проверяется.Кажется, эта задержка сбивает с толку VoiceOver и не сообщает об изменении.

Я пытался добавить атрибут aria-busy в течение периода загрузки и затем установить его обратно в false в конце.Это иногда заставляет VoiceOver объявлять об изменении, но поведение очень прерывистое и, как правило, все еще дает сбой.

Вот генерируемый HTML:

<input aria-checked="true" aria-busy="false" role="radio" type="radio" value="some_value">

Есть ли более надежный способ, которым я могуоповестить пользователя о том, что переключатель теперь отмечен?

Answer 1

Вы можете попытаться отправить сообщение в область aria-live при возврате запроса синхронизации и объединить его с переключателем aria-busy.

Более экстремальный способ гарантировать, что сообщения будут прочитаны,использовать role="alert", который предназначен для объявления ошибок в определенных ситуациях проверки, но будет работать.

aria-live - это «вежливая» версия объявления, о которой я знаю в данный момент, что означает, чточитатель будет ждать, пока он не закончит чтение всех операторов в очереди, прежде чем читать живое объявление.

role="alert" - это «грубая» версия объявления, о которой я знаю, которая немедленно прочитает сообщение, нотакже удалите все сообщения, которые были до него, из очереди - поэтому они вообще не будут прочитаны.

Надеюсь, это поможет.