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を追加しました：

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

それは部分的問題（唯一のボイスオーバー/ MacOSの）に固定。しかし、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>上を無視すべきです。

これは当てはまりません。 aria-labelおよびaria-labelledbyの属性は、ARIA 1.0 specごとの任意の要素で有効です。テストなしでは、要素にテキストが含まれているか、問題のコードが<label>を無効に使用しているため、アクセス可能な名前を計算するときにNVDAが混乱していたと推測しています。私は両方とも<span>に使っています。