如何为表单选择做可访问的内联错误？

Posted 2023-03-05

【中文标题】如何为表单选择做可访问的内联错误？

【英文标题】：How to do accessible inline errors for form selects?

【发布时间】：2018-06-21 06:56:53

【问题描述】：

我们需要更新我们的表单以符合可访问性。我正在寻找有关如何为表单选择编写内联错误的信息。我标记了表单字段并且有一个内联错误，但读者没有宣布错误。

这是我们正在使用的

<div class="select-wrapper">
   <label for="securityQuestion" class="control-label bolded">Security Question</label>
   <select id="securityQuestion" name="securityQuestion" class="form-control" aria-describedby="securityQuestion_error">
     <option value="0">Select a Question</option>
     <option value="10">What is your mother's maiden name?</option>
     <option value="9">What's your town of birth?</option>
     <option value="11">What is your father's middle name?</option>
     <option value="12">What street did you live on when you were 10 years old?</option>
   </select>
   <div class="clear form-error-msg" id="securityQuestion_error"><span class="shop-icon icon" aria-label="Attention">r</span><span id="error-msg-text">Please select a security hint question.</span></div>
 </div>

因此，如果用户没有选择选项并提交，我们会在表单字段之后动态注入错误，如上所示。这适用于输入和文本框，但对于选择，读者会跳过它。

我一直在阅读不同的博客和规范，并且已经阅读了很多次，不要使用选择，而是使用收音机或文本框。

所以有什么想法吗？

【参考方案1】：

您的问题可能与以下错误有关： JAWS does not announce aria-describedby on select box in IE

这也被描述为on WebAim mailing list。

这是一个错误，您有多种选择来避免这个错误：

在标签中包含错误文本

ARIA21: Using Aria-Invalid to Indicate An Error Field SCR18: Providing client-side validation and alert 重新显示带有错误摘要的表单 在用户输入信息时提供错误通知 在页面标题中包含错误通知信息

例如，您可以使用aria-labelledby 来定位标签和错误文本。

<div class="select-wrapper">
   <div id="securityQuestion_label">Security Question</div>
   <select id="securityQuestion" name="securityQuestion"
       aria-labelledby="securityQuestion_label securityQuestion_error">
     <option value="0">Select a Question</option>
     <option value="10">What is your mother's maiden name?</option>
     <option value="9">What's your town of birth?</option>
     <option value="11">What is your father's middle name?</option>
     <option value="12">What street did you live on when you were 10 years old?</option>
   </select>
   <div class="clear form-error-msg" id="securityQuestion_error">Error message</span></div>
 </div>

【讨论】：

谢谢亚当。我希望有一个很好的资源来显示浏览器对 aria 标签的支持，类似于 W3CSchool 对 js 和 css 的支持。

【参考方案2】：

好吧，得到我们的答案。屏幕阅读器/操作系统/浏览器组合不始终支持选择。该代码可与 Safari 和画外音一起正常工作。但是，chrome 和画外音不能 100% 播放。进一步的测试，遗憾的是使用带有 chrome 的 chrome vox 甚至不会读取文本输入内联错误。

经过一番研究，我们从 WebAim 发现了这个：

Firefox 最适合 NVDA Chrome 和 Internet Explorer 与 Windows 上的 JAWS 带有旁白功能的 Safari 旁白