屏幕阅读器跳过新插入的元素。
我正在构建一个反应网站，必须支持跨浏览器的可访问性。
在我的站点上，我有输入，如果输入无效，我只在模糊上执行验证--在输入后插入错误消息。
我的问题是，屏幕阅读器跳过这个新的错误元素并跳转到下一个错误元素--，当它专注于上一个(在我的例子中是输入)时，它似乎会计算下一个元素。因此，当我“选项卡”和模糊输入时，它会转到下一个可选项卡元素，并跳过新的错误。
被跳过的新错误元素具有所有必需的属性(如果我从输入后到达的下一个元素中移出+选项卡，它就会变得突出)。我也尝试过将aria-live="assertive"添加到新的错误消息元素中，但这并没有帮助。
有什么解决办法吗？
回答 2
Stack Overflow用户
发布于 2021-10-18 19:31:07
@jongibbons提出的aria-invalid和aria-describedby建议很好，但是添加错误消息时的实际通知应该由aria-live来处理。你说你试过aria-live，但它没有成功。这可能取决于你是如何使用它的。
如果您尝试在生成错误消息时动态添加该属性，那么它将无法工作。aria-live必须存在于页面中，然后才会向其添加文本。例如，以下内容不起作用：
在错误发生之前：
<input>错误发生后
<input>
<div aria-live="polite">this is the error message</div>如果<div>是动态添加的，那么即使它有aria-live，也不会发布。
相反，您的代码应该如下所示：
在错误发生之前：
<input>
<div aria-live="polite"> <!-- empty area for error message --> </div>错误发生后
<input>
<div aria-live="polite">this is the error message</div>在本例中，“这是错误消息”，当新文本注入页面时，屏幕阅读器将宣布。
正如@jongibbons所说，通过aria-describedby将错误消息与输入字段关联起来。
<input aria-describedby="foo">
<div id="foo" aria-live="polite"> <!-- empty area for error message --> </div>Stack Overflow用户
发布于 2021-10-14 19:28:11
对于您描述的可访问性行为，您需要查看如何使用aria-invalid和aria-describedby属性。
当字段出现错误时，将<input>上的<input>从false切换到true将导致屏幕阅读器宣布状态的变化。
在错误的<input>和包含错误消息的<input>元素之间添加一个<input>关系也会导致屏幕阅读器宣布错误消息。
<label for="email">Email address</label>
<input type="text" name="email" id="email" class="error"
aria-invalid="true" aria-describedby="email-error">
<p class="error-message" id="email-error">
Error: This doesn't look like a valid email address
</p>下面是MDN上的一个示例，它的代码可能与您需要的内容相匹配：使用aria-无效属性
https://stackoverflow.com/questions/69574174
复制相似问题
腾讯云开发者
