如果选项卡永远无法访问，盲人用户将如何访问信息文本？答案

【问题标题】：How would blind users ever access informative text if tabbing never gets to it?如果选项卡永远无法访问，盲人用户将如何访问信息文本？
【发布时间】：2018-03-01 01:24:14
【问题描述】：

我正在尝试使我的 Web 应用程序符合 ADA 标准，并且我仍在学习它的基础知识。如果我要在向用户提供问题的页面上进行问卷调查，盲人用户将如何看到所提供的问题或信息？

例如，假设我有一个问题“你今天快乐吗”以及一个复选框或下拉菜单选择“是”或“否”。 Tab 键应该将您带到这些元素，屏幕阅读器会发现有复选框或下拉菜单，但他们永远不会到达“你今天快乐吗”，这意味着他们永远不会理解每个问题的上下文。

这也超出了问答场景。如果选项卡永远无法访问，盲人用户将如何访问我的 Web 应用程序上的免责声明或信息？

解决方案是什么都使用tabindex="0" 吗？

【问题讨论】：

屏幕阅读器软件有一个使用箭头键控制的“虚拟”光标。所以它可以通过这种方式获得不可聚焦的纯文本内容。

标签： html accessibility screen-readers tabindex ada-compliance

【解决方案1】：

对于单选按钮/复选框组，您可以将您的问题放在fieldset 的legend 中。

<fieldset>
    <legend>Are you happy today?</legend>
    <input type="radio" name="happy" value="yes" id="happy-yes">
    <label for="happy-yes">Yes</label>
    <input type="radio" name="happy" value="no" id="happy-no">
    <label for="happy-no">No</label>
</fieldset>

这是一篇描述fieldset 和legend 技术的文章：https://accessibility.blog.gov.uk/2016/07/22/using-the-fieldset-and-legend-elements/

对于下拉菜单，您只需使用 label 元素。

<label for="happy">Are you happy today?</label>
<select name="happy" id="happy">
    <option value="yes">Yes</option>
    <option value="no">No</option>
</select>

（您应该始终对所有表单字段使用标签元素）

在构建可访问的网站时，很少需要tabindex。如果 HTML 结构合理，您将永远不需要在任何地方使用 tabindex。

【讨论】：