2

私はアクセシビリティの問題にかなり慣れていないので、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>

手伝ってくれますか?

4

2 に答える 2