Fatal编程技术网
  • html/
  • Html 辅助功能：输入元素辅助功能的帮助文本

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

html

Html 辅助功能：输入元素辅助功能的帮助文本,html,accessibility,Html,Accessibility,我有一个文本input，它要求用户输入带有特定约束的密码。这些约束的帮助文本在单独的DOM元素中指定 我希望屏幕阅读器在用户关注输入字段时阅读此帮助文本。我找到了两种方法： 在输入文本上使用aria descripeby=“help text id” <label for="password"> Password </label> <input type="text" aria-describedby="help-text" id="password" />

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

我希望屏幕阅读器在用户关注输入字段时阅读此帮助文本。我找到了两种方法：

  • 在输入文本上使用aria descripeby=“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 descripeby
    似乎不适用于ChromeVox扩展，也不适用于windows10屏幕阅读器

    参考资料：

    您可以始终在与
    输入
    元素关联的
    标签
    中包含帮助文本。这将保证与任何屏幕阅读器/浏览器组合100%兼容

    除了总体说明外，在表单控件的标签中提供相关说明也很重要。例如，在标签文本中指示所需的输入字段和数据格式。

    您甚至可以在
    标签中使用
    ，因为这是您在原始示例中提供的行为
    

    在您提供的两种解决方案之间，我将使用
    aria descripbedby
    ，因为它提供了更高级别的解决方案。
    感谢您的链接。对于这种特殊用法，我可以看到，当与input type=“text”一起使用时，aria labelledby具有更好的支持

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