我们需要更新我们的表单以符合可访问性。我正在寻找有关如何为表单选择编写内联错误的信息。我标记了表单字段并有一个内联错误，但读者没有公布错误。
这是我们正在使用的
<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>
因此，如果用户没有选择一个选项并提交，我们会在表单字段之后动态注入(inject)一个错误，如上所示。这对输入框和文本框很有效，但对于选择，读者会跳过它。
我一直在阅读不同的博客和规范，并且已经阅读了很多次，不要使用选择，而是使用单选框或文本框。
有什么想法吗？
最佳答案
您的问题可能与以下错误有关: 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>
关于html - 如何为表单选择做可访问的内联错误？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48215648/