NVDAがスパンでaria-labelを読み込んでいない - 代替方法は何ですか？

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.

EDIT：

私はいくつかの再作業を行っていると私はARIAのラベルが部分的にしかそれとして働いて持って管理"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> 

としてARIA-labelledbyの=「mytexttoberead」を使用することができ、唯一のスクリーン・リーダーは次のようになりますその存在を認識している。

あなたはどのようなブラウザを使用しているあなたのCSSに

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