html - 可访问的错误消息

Question

在我的应用程序中，很少有在模糊时触发的字段验证。错误消息容器用具有 role=alert 的 DIV 包装。因此，当用户输入无效输入然后按 Tab 键时，屏幕阅读器会向用户宣布错误消息，但这会切断用户当前正在阅读的标签和相关信息。

此场景已被确定为可访问性问题。解决此问题的任何帮助都会非常有帮助。

示例标记如下。

<label class="label" for="view-184">Payment amount</label>
<input id="view-184" type="text" autocomplete="off" placeholder="Please enter a dollar value" aria-describedby="form-input-text-error-view166-required">

<div class="error" role="alert" aria-live="polite" style="">        
            <span id="form-input-text-error-view166-custom-format" class="error-custom-format" style="display: none;">Enter a valid dollar value</span>           
            <span id="form-input-text-error-view166-required" class="error-required">Dollar value is required.</span>

    </div>

Answer 1

我遇到了无障碍顾问并得到了答案。他的回答是我们不需要为在模糊/更改时触发的错误消息添加 role="alert"。我们所要做的就是当用户单击提交按钮时，将焦点放在第一个无效字段上。我们还可以使用 aria-describedby 标签将字段与错误消息链接起来。