Jaws Screen Reader 크로스 브라우저 불일치

Question

일부 맞춤 체크 박스 및 토글에 적절한 태그 추가 및 HTML 추가를 시도했지만 IE에서 JAWS에서 제대로 읽지 못하고 있지만 JAWS에서 크롬으로 잘 읽었습니다.

다른 누구도 이러한 문제를 경험하고 원인을 알고 있습니까?

문제 1 : 이것은 스위치로 읽어야하지만 IE에서는 버튼으로 읽습니다. 크롬은 스위치를 읽습니다.

코드 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에서는 체크 박스의 체크 상태 만 읽으며 크롬에서는 레이블과 체크 상태를 읽습니다.

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

ISSUE 1 : 몇 가지 :

1. 역할을 사용 = "스위치가"당신은 또한 아리아-checked 속성을 사용해야합니다 사실로 설정 또는 거짓. (https://www.w3.org/TR/wai-aria-1.1/#switch)
2. 현재 JAWS는 스위치 역할을 인식하지 못합니다.

문제점 2 : 중첩 된 요소로 레이블을 붙이면 혼란이 초래 될 수 있습니다. 나는 당신이 라벨을 스타일링하기 위해 스팬을 사용하고 있다고 가정합니다. 대신이 시도하고 label 요소의 스타일 : 역할을 사용

<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.

<div> 또는 <span> 태그로 만들어진 스위치 구성 요소를 직접 만들려면 role = switch를 사용하십시오.