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"是我所知道的公告的“粗鲁”版本，它将立即读取该消息，但也会从队列中删除该消息之前的所有消息-因此将根本不会读取它们

希望这会有所帮助。