[英]Accessibility: Help text for input elements accessibility
我有一个文本input
,要求用户输入具有特定约束的密码。 这些约束的帮助文本在单独的DOM元素中指定。
我希望屏幕阅读器在用户关注输入字段时阅读此帮助文本。 我找到了两种方法:
在输入文本上使用aria-describedby="help-text-id"
。
<label for="password"> Password </label> <input type="text" aria-describedby="help-text" id="password" /> <span id="help-text"> The password should at least be 8 characters</span>
在输入文本上使用aria-labelledby="label-id help-text-id"
来读取相应的标签以及帮助文本作为标签
<label id="password-label"> Password </label>
<input type="text" aria-labelledbyby="password label help-text" />
<span id="help-text"> The password should at least be 8 characters</span>
我喜欢第一个,因为在语义上这个帮助文本是描述输入的东西,而不是标记输入的东西。 我只是不确定这是否是处理这个问题的正确方法。 是否有其他模式用于宣布帮助文本?
此外, aria-describedby
似乎不适用于ChromeVox扩展,也不适用于Windows 10屏幕阅读器。
参考文献: https : //developer.paciellogroup.com/blog/2018/09/describing-aria-describedby/
您始终可以在与input
元素关联的label
中包含帮助文本。 这将保证与任何屏幕阅读器/浏览器组合100%兼容。
除了整体说明之外,在表单控件的标签内提供相关说明也很重要。 例如,在标签文本中指示所需的输入字段和数据格式。 https://www.w3.org/WAI/tutorials/forms/instructions/
您甚至可以使用CSS仅向 label
内的屏幕阅读器用户提供此文本,因为这是您在原始示例中提供的行为。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.