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

Question

所以我一直试图添加适当的咏叹调标记和HTML到一些自定义复选框和切换，但发现他们没有正确阅读JAWS在IE浏览器，但他们阅读罚款与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：有几样事情：

使用角色时

1. = “开关”，你也必须使用咏叹调，选中属性设置为true或错误。 （https://www.w3.org/TR/wai-aria-1.1/#switch）
2. 当前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'>开关无效。

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

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

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