ariaを使用してキーボード入力のみで表示するドロップダウンボックスを表示できません

Question

私はariaを初めて使用しましたが、これは部分的に動作します。私はフィールドにタブすることができますが、ドロップダウン内の個々の項目を見ることはできません。任意の提案が高く評価されました。

<div id="list1" class="dropdown-check-list" tabindex="0"> 
    <span id="anchor" class="anchor" aria-haspopup="true">Select Color</span> 
    <ul id="items" class="items" aria-label="submenu"> 
    <li><input type="checkbox" role="checkbox" aria-checked="false" tabindex="0"/><label>red </label></li> 
    <li><input type="checkbox" role="checkbox" aria-checked="false" tabindex="0"/><label>blue </label></li> 
    <li><input type="checkbox" role="checkbox" aria-checked="false" tabindex="0"/><label>yellow</label></li> 
    <li><input type="checkbox" role="checkbox" aria-checked="false" tabindex="0"/><label>green </label></li> 
</ul>      
</div> 

Answer 1

私はちょうど働いて、それを持って、JS $("#list1").focusで答えを共有し、

あなたのラベルは任意のfor属性を持っていないとinputチェックボックスを同封していないブロックするように表示を設定したいです。

冗長性を持つrole="checkbox" aria-checked="false" tabindex="0"属性を削除し、name属性を指定する必要があります。

span要素は、あなたがbutton要素を使用する（またはスパンがフォーカス可能、それに適切なroleを与えるためにtabindex=0属性を追加）する必要がtabindexを持っていません。

ulには、リストの内容を正しく記述していないような、「サブメニュー」というアリアラベルがあります。

外側のdivから他のフォーカス可能な要素を囲むようにtabindexを削除する必要があります。

有効コード：

<div id="list1" class="dropdown-check-list"> 
    <button id="anchor" class="anchor" aria-haspopup="true">Select Color</button> 
    <ul id="items" class="items"> 
     <li><label><input type="checkbox" name="red" />red </label></li> 
     <li><label><input type="checkbox" name="blue" />blue </label></li> 
     <li><label><input type="checkbox" name="yellow" />yellow</label></li> 
     <li><label><input type="checkbox" name="green" />green </label></li> 
    </ul> 
</div>