辅助功能:帮助输入元素的文本

时间:2019-06-05 12:55:01

标签: html accessibility

我有一个文本input,要求用户输入具有特定限制的密码。这些约束的帮助文本在单独的DOM元素中指定。

我希望屏幕阅读器在用户关注输入字段时阅读此帮助文本。我发现这样做的两种方法:

  1. 在输入文本上使用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>
    
  2. 在输入文本上使用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/

1 个答案:

答案 0 :(得分:3)

您总是可以在与label元素相关联的input中包含帮助文本。这样可以保证与任何屏幕阅读器/浏览器组合都具有100%的兼容性。

  

除了总体说明外,在表单控件的标签内提供相关说明也很重要。例如,在标签文本中指示所需的输入字段和数据格式。   https://www.w3.org/WAI/tutorials/forms/instructions/

您甚至可以在labeluse CSS to offer this text only to screen reader users,因为这是您在原始示例中提供的行为。

在您提供的两种解决方案之间,我会选择aria-describedby,因为它提供了更高级别的supported usage across browsers