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

Question

我们需要将表单更新为符合辅助功能.我正在寻找有关如何为表单选择编写内联错误的信息.我有标签的表单字段并有内联错误,但读者不会宣布错误.

这是我们正在使用的

<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>

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

我一直在阅读不同的博客和规格并多次阅读,不要使用选择,而是使用无线电或文本框.

那么任何想法？

Answer 1

您的问题可能与以下错误有关： JAWS 不会在 IE 中的选择框上宣布 aria-descriptedby

WebAim 邮件列表上也对此进行了描述。

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

• 在标签中包含错误文本
• ARIA21：使用 Aria-Invalid 指示错误字段
• SCR18：提供客户端验证和警报
• 重新显示带有错误摘要的表单
• 当用户输入信息时提供错误通知
• 在页面标题中包含错误通知信息

例如，您可以使用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>