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标记将字段与错误消息链接。

Answer 2

不要使用内联错误消息，这始终会产生焦点问题并遇到失败的成功标准。级别A 2.4.3焦点顺序和1.3.2有意义的顺序。而不是使用内联错误消息使用提交摘要消息在窗体的开头提供相同的错误消息。这对于辅助技术来说可能很方便，并且可以用相同的代码解决您的问题。

可访问的错误消息

2 个答案: