Question

所以我一直在尝试将一些自定义的复选框和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>

Answer 1

问题1：有几点：

使用role =＆＃34; switch＆＃34;您还必须使用aria-checked属性设置为true或false。（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>

Answer 2

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

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

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

如果您要使用<div>或<span>标记创建自己的切换组件，则可以使用role = switch。

大白鲨屏幕阅读器跨浏览器不一致

2 个答案: