Twitter bootstrap 关于aria描述人和表单字段最佳实践的可访问性问题

以下示例是用于收集名字的典型表单字段。我在输入上有一个aria describedby，它引用了两个不同的文本区域，帮助描述输入函数

• 通过引用描述的第一个aria是我称之为“Hint”的，基本上是输入上的占位符属性文本（也就是您在文本框后面看到的阴影文本）。“提示”文本区域是一个跨度，有一个类可以明显地隐藏它，但仍然会被屏幕阅读器读取
• 通过引用描述的第二个aria是我所说的“帮助”，是信息气泡文本（在标签旁边，您可以单击蓝色（I）图标以获取帮助文本）

我的困境 使用屏幕阅读器钳口并通过“我的表单”字段区域中的选项卡，它将读取信息气泡。然后，当我对输入进行制表时，它会读取标签，占位符文本，提示文本，这是我放置在跨距中的占位符文本，最后是帮助文本，这也是信息气泡文本。我觉得不需要这些咏叹调，因为这些信息已经读了两遍
另一方面，如果我去掉上面描述的咏叹调，我可能也会从网上读到一些问题。一些辅助技术不读取占位符文本，所以我应该将其放在那里以确保信息被读取。信息气泡只是放在标签旁边，而不是标签的一部分（因此与“控件/标签”的关联可能会被意外忽略）

（上面讨论的示例）

要求的
名字
安德鲁的例子

这是信息窗口，显示

记住我需要支持的用户类型以及他们将使用的辅助技术类型

• 盲人（屏幕阅读器产品，如JAWS或NVDA）
• 视力受损（屏幕放大产品，如ZoomText或SuperNova）
• 身体损伤（语音导航产品，如Dragon Natural Speak）

---

附加信息：关于信息气泡，它过去是一个图标标签，上面有一个标题，但这是一个鼠标功能，对辅助技术不友好

你离你需要的地方不远了。以下是一些考虑/建议

可获取的“提示” 与其在提示上使用

aria descripeby

by，为什么不让提示键盘可以访问呢。你可能考虑过屏幕阅读器，但是那些使用键盘或其他辅助技术而没有屏幕阅读器的人呢。目前，他们无法访问您的“提示”

最简单的解决方法（虽然不是完美的）是在焦点上显示

工具提示以及悬停，并使用
tabindex=“0”
将提示设置为可焦点项目。这样做的缺点是，屏幕阅读器用户仍然需要
aria描述

更好的修复方法是使提示本身可以访问，并使其持久/可切换

因此，您可以在DOM中的按钮旁边为内容使用带有
display:none
的div或span，然后使其在按Enter键时激活和隐藏

把它想象成一个迷你模式（因此有一个关闭按钮，并确保它可以用Escape键关闭。与模式不同，你不需要捕捉焦点，但是你应该使用
tabindex=“-1”
和一些JS将焦点移动到工具提示，并将焦点返回到关闭时打开它的按钮）

这是一个很好的参考点，“toggletips”是我建议的方法，因为它更适合“I”按钮的用途

“必需”的Asterix
我注意到你在这里添加了一些屏幕阅读器文本，这很好。然而，你没有考虑过有认知障碍的人。星星没有写“必选”那样清晰

通过使用“（必选）”（写在输入名称后的
中，例如
名字（必选）
）而不是“*”，您就不再需要“仅限sr”文本，也不再依赖字体很棒的字体（它们有自己的可访问性问题……请参阅最终标题“最终考虑”）

使用
aria labelledby
向不支持占位符文本的屏幕阅读器公开占位符文本。
在这个问题上没有正确或错误的答案。是的，有些屏幕阅读器不公开这些信息，有些则公开，不管你做什么，你都会给一些用户带来不太理想的体验

我会坚持你的做法，让一些用户听到信息两次总比完全不听到要好

但是，您可能会争辩说，因为您已经在第1点中正确地公开了提示信息，所以第二位信息是不必要的，因此可以删除，将其保留为确实阅读它的屏幕阅读器的占位符

您可以做的是在“提示：请输入您的法定名。（例如安德鲁）”结尾处的“提示”中包含信息

在这里走极端，不确定你是否应该使用“e.g.”或“Ex:”例如，我会去做一些研究，因为我总是使用“e.g.”，但你让我思考

最后考虑
正如我前面提到的，“字体很棒”和其他图标字体会使您的应用程序在最终用户替换字体时变得不易访问

例如，患有阅读障碍的用户可能会使用自定义样式表覆盖页面上的所有字体。在这一点上，你的图标变成了“丢失的命运字体方块”，失去了所有的意义

取而代之的是使用内联SVG，它们更快、更易访问，减少了对超过100kb字体的需求，降低了初始页面渲染的速度，并允许您进行更多的控制

最后，在您显示的输入图像上
   <div class="form-group">
        <span class="required" aria-required="true"><i title="Required" class="fas fa-asterisk fa-cl" aria-hidden="true"></i><span class="sr-only">Required</span></span>
        <label for="Textbox3836">First Name</label>
        <span tabindex="0" role="button" class="text-info help-icon" data-balloon-pos="down" data-balloon-length="large" id="Textbox3836_Help_desc" aria-label="Tip: Please enter your legal first name."><i class="fas fa-info-circle fa-lg" aria-hidden="true"></i></span>
        <input class="form-control" type="text" id="Textbox3836" name="Textbox3836" maxlength="250" placeholder="Ex: Andrew" data-identifier="Text box" aria-describedby="Textbox3836_Hint_desc Textbox3836_Help_desc">
        <span class="sr-only" id="Textbox3836_Hint_desc">Example Andrew</span>
    </div>