Comment rendre accessible une liste de boutons UL?

Question

Dans mon code j'ai une liste de boutons stockés dans une liste non ordonnée. Si vous activez un lecteur d'écran et que vous placez un onglet dans un élément li, la plupart des lecteurs liront l'élément dont vous disposez par rapport au nombre figurant dans la liste (par exemple, «Élément de liste 1, élément 2 de 4»). Ce qui m'intéressait, c'est qu'il est possible de fusionner les deux pour que lorsque vous tabulez, vous appuyiez sur le bouton mais que vous obteniez également les informations de la liste lues par le lecteur d'écran.

est Ci-dessous un exemple de code de mon code actuel (premier) et le second est juste pour illustrer le lecteur d'écran voicing 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

Vous pouvez essayer quelque chose comme ceci:

<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>

Vous pouvez également essayer la liste de rôles à la place de la barre d'outils, en fonction de laquelle vous correspondez le mieux à votre cas particulier. Notez que, dans les deux cas, lorsque vous appuyez sur tabulation, l'utilisateur s'attend à entrer dans la barre d'outils/listbox et à en sortir dans l'onglet suivant, plutôt que d'appuyer sur tous les boutons. Le passage d'un bouton à l'autre dans la même barre d'outils ou dans la même liste se fait à l'aide des touches fléchées.