ボタンのULリストを作成するにはどうすればいいですか？

Question

私のコードでは、ボタンのリストが順序付けられていないリストに格納されています。スクリーンリーダーを有効にして、li要素のタブをタップすると、ほとんどの読者は、リストに表示されている要素のうちどれが表示されているかを読み上げます（たとえば、「リスト項目1、項目2/4」）。

私が興味があったのは、あなたがタブをタップするとボタンにタブするが、スクリーンリーダーが読み込んだリストアイテムの情報も取得できるように、2つをマージすることができるということです。以下は

は私の現在のコード（最初）のコード例であり、第二は、ちょうどあなたがこのような何かをしようとするかもしれ4.

<div> 
 
    This example shows that you tab straight to the button but don't get the list information 
 
    <ul> 
 
    <li><button onClick="alert('Button 1')">Button 1</button></li> 
 
    <li><button onClick="alert('Button 2')">Button 2</button></li> 
 
    <li><button onClick="alert('Button 3')">Button 3</button></li> 
 
    <li><button onClick="alert('Button 4')">Button 4</button></li> 
 
    </ul> 
 
</div> 
 
<div> 
 
    This example shows that if you add tab index on a list item you get the count of items in the list 
 
    <ul> 
 
    <li tabindex="0"><button onClick="alert('Button 1')">Button 1</button></li> 
 
    <li tabindex="0"><button onClick="alert('Button 2')">Button 2</button></li> 
 
    <li tabindex="0"><button onClick="alert('Button 3')">Button 3</button></li> 
 
    <li tabindex="0"><button onClick="alert('Button 4')">Button 4</button></li> 
 
    </ul> 
 
</div>

Answer 1

の2を表明スクリーンリーダーを説明することです。

<ul role="toolbar"> 
 
    <li><button aria-setsize="4" aria-posinset="1">Button 1</button></li> 
 
    <li><button aria-setsize="4" aria-posinset="2">Button 2</button></li> 
 
    <li><button aria-setsize="4" aria-posinset="3">Button 3</button></li> 
 
    <li><button aria-setsize="4" aria-posinset="4">Button 4</button></li> 
 
</ul>

また、ツールバーの代わりに役割のリストボックスを試して、意味的にあなたの特定のケースに最も適したものを選択することもできます。

どちらの場合でも、タブを押すと、すべてのボタンにタブするのではなく、ツールバー/リストボックスに入力して次のタブに移動することが期待されます。 同じツールバーまたはリストボックス内でボタン間を移動するには、矢印キーを使用します。