如何使输入帮助文本易于访问？

Question

我有一个文本

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

Answer 1

您始终可以在与

label

元素关联的

input

中包含帮助文本。这将保证与任何屏幕阅读器/浏览器组合 100% 兼容。

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

您甚至可以在 label 中

使用 CSS 仅向屏幕阅读器用户

提供此文本，因为这是您在原始示例中提供的行为。

在您提供的两种解决方案之间，我会选择

aria-describedby

，因为它提供了更高级别的跨浏览器支持的使用。