关于 aria-describedby 和表单域最佳实践的辅助功能问题
Accessibility Questions on best practices for aria-describedby and form fields
以下示例是用于收集名字的典型表单域。我在输入上有一个 aria-describedby 引用两个不同的 text-areas 来帮助描述输入函数。
- 第一个 aria-describedby 引用是我所说的 "Hint"，基本上是输入上的占位符属性文本（也就是您在文本框后面看到的阴影文本）。 “提示”文本区域是一个带有 class 的跨度，可以明显隐藏它，但仍会被屏幕 reader 读取。
- 第二个 aria-describedby 参考是我所说的 "Help"，它是信息气泡文本（在标签旁边，您可以单击蓝色 (i) 图标以获取帮助文本）。
我的困境！
使用屏幕 reader JAWS 并通过 tab 键浏览我的表单字段区域，它会读取 信息气泡 。然后，当我切换到输入时，它会读取 label、placeholder text、Hint text，这是我将占位符文本放在一个跨度中，最后是 Help text，这又是信息气泡文本。我觉得aria-describedby不需要，因为资料看了两遍！
另一方面，如果我取出 aria-describedby ，我也可能会根据我在网上阅读的内容引起问题。一些辅助技术不读取占位符文本，所以我应该把它放在那里以确保信息被读取。信息气泡只是放置在标签旁边，而不是标签的一部分（因此与“控制/标签”的关联可能会被意外忽略）。
（上面谈到的例子）
<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>
这是window显示
的信息
请记住我需要支持的用户类型以及他们将使用的 assistive-technology 类型。
- 盲人（屏幕 reader JAWS 或 NVDA 等产品）
- 视力受损（屏幕放大产品，如 ZoomText 或 SuperNova）
- 身体障碍（Dragon Natural Speak 等语音导航产品）
附加信息：关于信息气泡，它曾经是一个图标标签，上面设置了标题，但它只是鼠标功能，对 assistive-technology 不友好。
你离你需要的地方不远了。以下是一些注意事项/建议。
无障碍'Tips'
与其在提示上使用 aria-describedby，不如让提示键盘易于访问。您可能考虑过屏幕 readers，但是那些在没有屏幕 reader 的情况下使用键盘或其他辅助技术的人呢？目前他们无法访问您的 'tip'.
最简单的解决方法（虽然不完美）是显示 tooltip 焦点和悬停，并使提示成为带有 tabindex="0" 的可聚焦项目。这样做的缺点是您的屏幕 reader 用户仍然需要 aria-describedby
更好的解决方法是使提示本身可访问，并使其持久化/可切换。
因此，您可以使用 div 或跨度 display:none 作为内容，在 DOM 中的按钮旁边，然后使其激活并隐藏在 输入按键。
把它想象成一个 mini-modal（所以有一个关闭按钮，并确保它可以用 Escape 键关闭。与模式不同，你不必陷阱焦点，但是您应该使用 tabindex="-1" 和一些 JS 将焦点移至工具提示，并且 return 将焦点移至关闭时打开它的按钮）。
这个 article about tooltips and 'toggletips' 是一个很好的参考点，'toggletips' 是我建议的方法，因为它更符合您的 'i' 按钮的目的。
'Required'
的 Asterix
我注意到您在此处添加了一些屏幕 reader 文本，这很棒。但是，您没有考虑有认知障碍的人。星星不如写“（必填）”那么清楚。
通过使用“（必填）”（写在输入名称后的 <label> 中，例如 <label for="Textbox3836">First Name (required)</label>）而不是“*”，您就可以删除对“sr-only" 文本和对 font-awesome 字体的依赖（它们有自己的可访问性问题......请参阅最后的标题 'Final Considerations'）。
使用 aria-labelledby 将占位符文本显示给不支持它的 reader 屏幕。
这个问题没有正确或错误的答案。是的，有些屏幕 reader 不会公开此信息，而其他屏幕会公开，无论您做什么，都会给某些用户带来不尽如人意的体验。
我会坚持你的做法，让一些用户听到两次信息总比什么都听不到要好。
但是您可能会争辩说，因为您已经在第 1 点中正确地公开了提示信息，所以第二位信息就没有必要了，因此可以将其删除，将其保留为那些屏幕的占位符 reader 阅读它的人。
您可以在 'tip' 末尾添加信息“提示：请输入您的法定名字。（例如安德鲁）”
这里走极端了，不知道要不要用"e.g."或“Ex：”例如，我会去做一些研究，因为我总是使用“e.g.”但你让我思考。
最后的考虑
正如我之前提到的，如果最终用户更换字体，“font-awesome”和其他图标字体会使您的应用程序更难访问。
例如，患有阅读障碍的用户可能会使用自定义样式表来覆盖您页面上的所有字体。此时你的图标变成 'missing font squares of doom' 并失去所有意义。
改为使用内联 SVG，它们速度更快、更易于访问，减少了对超过 100kb 字体的需求，从而降低了初始页面呈现速度并允许您进行更多控制。
最后，在您显示的输入图像上，输入和背景之间的对比度可能不符合对比度要求（尚未检查）- 输入（边框或背景）的对比度应为3:1 到它在页面上的背景。
关于我建议如何处理图像上的 title 属性，您可能会发现这个 semi-related post 很有趣。它可能会帮助您为 'tips' 部分组合一个模式。
我会怎么做？
我会保持简单，首先将所有这些元素设计到页面中。
它使您的标记中的所有内容更清晰，更易于维护，为每个人提供提示信息，节省了对 font-awesome 的需求，并且可以通过一些摆弄看起来同样漂亮（我的示例有点粗糙）。
参见示例：
.input-container label, .input-container span{
display: block;
}
.input-container label{
font-weight: bold;
font-size: 1.2rem;
cursor: pointer;
}
.input-container span{
color: #555;
}
.input-container input{
display: block;
width: 94%;
margin-top: 10px;
padding: 2% 3%;
border: 1px solid #666;
border-radius: 5px;
}
.input-container {
width: 75%;
padding: 15px;
background-color: #f8f9fa;
border: 1px solid #333;
}
<div class="input-container">
<label for="ID1">First Name (Required)</label>
<span>Tip: Please enter your legal first name. For Example 'Andrew'</span>
<input id="ID1" placeholder="Your First Name"/>
</div>
以下示例是用于收集名字的典型表单域。我在输入上有一个 aria-describedby 引用两个不同的 text-areas 来帮助描述输入函数。
- 第一个 aria-describedby 引用是我所说的 "Hint"，基本上是输入上的占位符属性文本（也就是您在文本框后面看到的阴影文本）。 “提示”文本区域是一个带有 class 的跨度，可以明显隐藏它，但仍会被屏幕 reader 读取。
- 第二个 aria-describedby 参考是我所说的 "Help"，它是信息气泡文本（在标签旁边，您可以单击蓝色 (i) 图标以获取帮助文本）。
我的困境！
使用屏幕 reader JAWS 并通过 tab 键浏览我的表单字段区域，它会读取 信息气泡 。然后，当我切换到输入时，它会读取 label、placeholder text、Hint text，这是我将占位符文本放在一个跨度中，最后是 Help text，这又是信息气泡文本。我觉得aria-describedby不需要，因为资料看了两遍！
另一方面，如果我取出 aria-describedby ，我也可能会根据我在网上阅读的内容引起问题。一些辅助技术不读取占位符文本，所以我应该把它放在那里以确保信息被读取。信息气泡只是放置在标签旁边，而不是标签的一部分（因此与“控制/标签”的关联可能会被意外忽略）。
（上面谈到的例子）
<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>
这是window显示
的信息请记住我需要支持的用户类型以及他们将使用的 assistive-technology 类型。
- 盲人（屏幕 reader JAWS 或 NVDA 等产品）
- 视力受损（屏幕放大产品，如 ZoomText 或 SuperNova）
- 身体障碍（Dragon Natural Speak 等语音导航产品）
附加信息：关于信息气泡，它曾经是一个图标标签，上面设置了标题，但它只是鼠标功能，对 assistive-technology 不友好。
你离你需要的地方不远了。以下是一些注意事项/建议。
无障碍'Tips'
与其在提示上使用 aria-describedby，不如让提示键盘易于访问。您可能考虑过屏幕 readers，但是那些在没有屏幕 reader 的情况下使用键盘或其他辅助技术的人呢？目前他们无法访问您的 'tip'.
最简单的解决方法（虽然不完美）是显示 tooltip 焦点和悬停，并使提示成为带有 tabindex="0" 的可聚焦项目。这样做的缺点是您的屏幕 reader 用户仍然需要 aria-describedby
更好的解决方法是使提示本身可访问，并使其持久化/可切换。
因此，您可以使用 div 或跨度 display:none 作为内容，在 DOM 中的按钮旁边，然后使其激活并隐藏在 输入按键。
把它想象成一个 mini-modal（所以有一个关闭按钮，并确保它可以用 Escape 键关闭。与模式不同，你不必陷阱焦点，但是您应该使用 tabindex="-1" 和一些 JS 将焦点移至工具提示，并且 return 将焦点移至关闭时打开它的按钮）。
这个 article about tooltips and 'toggletips' 是一个很好的参考点，'toggletips' 是我建议的方法，因为它更符合您的 'i' 按钮的目的。
'Required'
的 Asterix我注意到您在此处添加了一些屏幕 reader 文本，这很棒。但是，您没有考虑有认知障碍的人。星星不如写“（必填）”那么清楚。
通过使用“（必填）”（写在输入名称后的 <label> 中，例如 <label for="Textbox3836">First Name (required)</label>）而不是“*”，您就可以删除对“sr-only" 文本和对 font-awesome 字体的依赖（它们有自己的可访问性问题......请参阅最后的标题 'Final Considerations'）。
使用 aria-labelledby 将占位符文本显示给不支持它的 reader 屏幕。
这个问题没有正确或错误的答案。是的，有些屏幕 reader 不会公开此信息，而其他屏幕会公开，无论您做什么，都会给某些用户带来不尽如人意的体验。
我会坚持你的做法，让一些用户听到两次信息总比什么都听不到要好。
但是您可能会争辩说，因为您已经在第 1 点中正确地公开了提示信息，所以第二位信息就没有必要了，因此可以将其删除，将其保留为那些屏幕的占位符 reader 阅读它的人。
您可以在 'tip' 末尾添加信息“提示：请输入您的法定名字。（例如安德鲁）”
这里走极端了，不知道要不要用"e.g."或“Ex：”例如，我会去做一些研究，因为我总是使用“e.g.”但你让我思考。
最后的考虑
正如我之前提到的，如果最终用户更换字体，“font-awesome”和其他图标字体会使您的应用程序更难访问。
例如，患有阅读障碍的用户可能会使用自定义样式表来覆盖您页面上的所有字体。此时你的图标变成 'missing font squares of doom' 并失去所有意义。
改为使用内联 SVG，它们速度更快、更易于访问，减少了对超过 100kb 字体的需求，从而降低了初始页面呈现速度并允许您进行更多控制。
最后，在您显示的输入图像上，输入和背景之间的对比度可能不符合对比度要求（尚未检查）- 输入（边框或背景）的对比度应为3:1 到它在页面上的背景。
关于我建议如何处理图像上的 title 属性，您可能会发现这个 semi-related post 很有趣。它可能会帮助您为 'tips' 部分组合一个模式。
我会怎么做？
我会保持简单，首先将所有这些元素设计到页面中。
它使您的标记中的所有内容更清晰，更易于维护，为每个人提供提示信息，节省了对 font-awesome 的需求，并且可以通过一些摆弄看起来同样漂亮（我的示例有点粗糙）。
参见示例：
.input-container label, .input-container span{
display: block;
}
.input-container label{
font-weight: bold;
font-size: 1.2rem;
cursor: pointer;
}
.input-container span{
color: #555;
}
.input-container input{
display: block;
width: 94%;
margin-top: 10px;
padding: 2% 3%;
border: 1px solid #666;
border-radius: 5px;
}
.input-container {
width: 75%;
padding: 15px;
background-color: #f8f9fa;
border: 1px solid #333;
}
<div class="input-container">
<label for="ID1">First Name (Required)</label>
<span>Tip: Please enter your legal first name. For Example 'Andrew'</span>
<input id="ID1" placeholder="Your First Name"/>
</div>