NVDA가 스팬에서 아리아 라벨을 읽지 않습니다 - 대안은 무엇입니까?

Question

나는 접근성 문제가 처음 생겼고 NVDA에서 아리아 레이블을 읽으려고합니다.

이

내 HTML입니다 :

<div class="myClass"> 
      <input type="checkbox" name="mycheckbox" id="toggle" onclick="togglelongText()"aria-label="tldr"> 
      <label for="toggle" aria-label="tldr"><span class="active" aria-label="tldr">tl;dr</span> 
      <span class="toggleshape"></span><span class="inactive" aria-hidden="true">tl;dr</span></label> 
    </div> 

레이블은 Windows에서 NVDA를 읽을 수없고 요소가 내부에 있다면 나는 그것을 지속적으로 성공적인 아니라는 것을 발견했다 div 이하 범위 :

https://www.w3.org/WAI/GL/wiki/Using_aria-label_to_provide_an_invisible_label

대안은 무엇입니까? 도울 수 있니?

감사합니다,

감사합니다,

P.

편집 :

좀 재 작업을 수행하고 난 아리아 라벨 만 부분적으로 작동하도록 관리 이제 "tl; dr"이라고 읽습니다. 이 문제는 Windows 7 (Chrome 54, IE 11 및 Firefox 49)에서 모두 동일한 문제가 발생하여 테스트되었습니다. 여기에 수정 된 코드 :

<div class="myClass"> 
    <input type="checkbox" tabindex="0" name="mycheckbox" id="toggle" onclick="toggleLongText()" 
    aria-label="TL;DR switch"> 
    <label for="toggle" aria-label="TL;DR switch"><span class="active" tabindex="0" 
    aria-label="TL;DR switch">tl;dr</span><span class="toggleshape"></span> 
    <span class="inactive">tl;dr</span></label> 
</div> 

도와 주시겠습니까?

Answer 1

title 속성을 사용해보세요. 실 거예요 최종 사용자가 볼 수 있도록

아니면 클래스에 대해 "hidemefromUsers의"CSS를 추가하는 속성

<span class="hidemefromUsers" id="mytexttoberead">This text will be read</span> 

로 아리아 - labelledby = "mytexttoberead"를 사용할 수 있습니다 만 스크린 리더가 될 것입니다 그것의 존재를 인식.

당신의 CSS에서

.hidemefromUsers { 
     position: absolute; 
     left: -99em; 
     height: 0; 
    }