aria-labelledby가 NVDA/Firefox에서 작동하지 않습니다.

Question

NVDA 스크린 리더가 내 index.html에 작성한 수학 표현에 대한 사용자 정의 설명을 읽도록 도움이 필요합니다. 수학 표현식은 문장 안에 있습니다. 그래서 거의 같은 같습니다

<div> 
    some text here... 
    &epsilon;<sub>x</sub> = -200(10<sup>-6</sup>), 
    &epsilon;<sub>y</sub> = 550(10<sup>-6</sup>), 
    &gamma;<sub>xy</sub> = 150(10<sup>-6</sup>) 
    some more text here... 
<div> 

문제는 그 화면 판독기가 첨자도 마이너스 기호를 읽지 않는 것입니다. 이 문제를 해결하려면

나는 사용자 정의 설명을 추가 할 aria-labelledby 추가 :

그것은 부분적 문제 (전용 통한 음성/맥 OS)를 고정

<label id="label">Formula description here</label> 
<div> 
    some text here... 
    <span aria-labelledby="label"> 
    &epsilon;<sub>x</sub> = -200(10<sup>-6</sup>), 
    ... 
    </span> 
<div> 

. 그러나 Windows/NVDA/Firefox는 작동하지 않습니다. 그냥 무시합니다.

나는 aria-label과 aria-describedby을 사용해 보았지만 제대로 작동하지 않는 것 같습니다. 미리 감사드립니다.

Answer 1

브라우저/스크린 리더 콤보는 <span>에서 aria-label 및/또는 aria-labelledby을 무시해야합니다. 여기에 어떤 속성이 포함 된 요소가 지원되는지 조금 더 알 수 있습니다. ARIA support by user agent

대신 가장 좋은 방법은 오프 스크린 기술을 사용하는 것입니다. 첫째로 CSS 시각적으로 일을 숨길 여전히 스크린 리더 페이지에두고 :

.visually-hidden { 
    position: absolute !important; 
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ 
    clip: rect(1px, 1px, 1px, 1px); 
    padding:0 !important; 
    border:0 !important; 
    height: 1px !important; 
    width: 1px !important; 
    overflow: hidden; 
    } 

그런 다음 당신은 <span class="visually-hidden">로 대안을 넣을 수 있습니다 아무도 그것을 볼 수 없습니다. 그런 다음 을 조각이 말을 화면 판독기를 원하는 아닌 aria-hidden 가져옵니다 당신을 위해 무엇을해야

<p> 
    some text here... 
    <span class="visually-hidden">Formula description</span> 
    <span aria-hidden="true"> 
     &epsilon;<sub>x</sub> = -200(10<sup>-6</sup>), 
     ... 
    </span> 
    <p> 

합니다.

Answer 2

더 나은 방법은 HTML에 포함 된 MathML에 방정식을 작성하는 것입니다.이 방정식은 MathPlayer를 사용하는 NVDA 및 JAWS의 최신 버전과 VoiceOver에서 읽을 수 있습니다. 간단한 방정식을 감안할 때 이들 중 어느 것도 올바르게 읽는 데 어려움이 없으며 손으로 MathML로 표현하는 것도 쉽습니다. 가능한 한 완벽하게 MathML을 만들 수 있지만 많은 편집자들 중 몇 명과 익숙해지기를 권합니다.

또한, 나는 @aardrian하여이 문을 명확히하거나 수정하고 싶었 :

브라우저/스크린 리더 콤보 aria-label 및/또는 aria-labelledby<span> A의를 무시해야합니다.

이것은 사실이 아닙니다. aria-label 및 aria-labelledby 속성은 ARIA 1.0 spec의 모든 요소에서 유효합니다. 테스트를 거치지 않고 요소에 텍스트가 포함되어 있거나 해당 코드가 <label>을 잘못 사용하기 때문에 액세스 가능 이름을 계산할 때 NVDA가 혼란스러워했다고 생각합니다. 나는 모두 <span>에 성공적으로 사용했습니다.