Jaws 屏幕阅读器跨浏览器不一致答案

【问题标题】：Jaws Screen Reader Cross Browser InconsistencyJaws 屏幕阅读器跨浏览器不一致
【发布时间】：2017-04-15 02:44:06
【问题描述】：

所以我一直在尝试为一些自定义复选框和切换添加适当的 aria 标记和 html，但发现它们在 IE 上的 JAWS 中没有被正确读取，但在带有 chrome 的 JAWS 上却可以正常读取。

有没有其他人遇到过这些问题并知道原因？

问题 1：这应该读作开关，但在 IE 上读作按钮，chrome 读作开关。

代码 1：

<div class="field">
  <input class="toggle-input" id="styleguide-toggle-demo" type="checkbox" name="Option Demo" value="option Demo" role="switch">
  <label class="toggle-label" for="styleguide-toggle-demo">
    <span class="toggle-message">Demo</span>
    <span class="toggle">
      <span class="knob"></span>
    </span>
  </label>
</div>

问题 2：复选框应读取标签。目前在 IE 中它只读取复选框的选中状态，而在 chrome 中它读取标签和选中状态。

代码 2：

<label for="styleguide-checkbox-A">
  <input id="styleguide-checkbox-A" class="input-checkbox" type="checkbox" name="styleguide-checkbox-A" value="styleguide-checkbox-option-A">
  <span>Option A</span>
</label>

【问题讨论】：

我遇到了带有孩子的标签元素的问题...使用 label 设计模式。我没有安装 JAWS。 w3c 验证器只允许标签元素使用一个子元素。

标签： google-chrome internet-explorer accessibility internet-explorer-11 jaws-screen-reader

【解决方案1】：

问题 1：几件事：

使用 role="switch" 时，您还必须使用设置为 true 或 false 的 aria-checked 属性。 (https://www.w3.org/TR/wai-aria-1.1/#switch)
当前 JAWS 无法识别切换角色。

问题 2：使用嵌套元素进行标记可能会造成严重破坏。我假设您正在使用 span 来设置标签的样式。试试这个并设置标签元素的样式：

<div class="form-row">
  <input id="styleguide-checkbox-A" class="input-checkbox" type="checkbox" name="styleguide-checkbox-A" value="styleguide-checkbox-option-A" />
  <label for="styleguide-checkbox-A">Option A</label>
</div>

【讨论】：

【解决方案2】：

使用 role=switch on <input type='checkbox'> 无效。

https://www.w3.org/TR/html51/sec-forms.html#checkbox-state-typecheckbox

允许的 ARIA 角色属性值： 复选框（默认 - 不设置）或 menuitemcheckbox。

如果您要创建自己的由<div> 或<span> 标签组成的开关组件，则可以使用role=switch。

【讨论】：