私はアクセシビリティの問題にかなり慣れていないので、aria-label を 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 または span 内にある場合、一貫して成功しないことがわかりました。
https://www.w3.org/WAI/GL/wiki/Using_aria-label_to_provide_an_invisible_label
代替手段は何ですか?手伝ってくれますか?
ありがとう、
よろしく、
P.
編集:
私はいくつかの再作業を行い、現在「tl;dr」と表示されているため、aria ラベルが部分的にしか機能しないようにすることができました。これは、Chrome 54、IE 11、および Firefox 49 を搭載した Windows 7 でテストされており、すべて同じ問題が発生します。作り直したコードは次のとおりです。
<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>
手伝ってくれますか?