web-dev-qa-db-fra.com

Pouvez-vous parcourir tous les boutons radio?

J'ai une liste de boutons radio. lorsque je les passe en revue, il semble que seul le premier bouton radio ou que celui qui est sélectionné se concentre, les autres boutons sont ignorés. case à cocher n'a pas eu ce problème.

http://jsfiddle.net/2Bd32/

J'ai du mal à expliquer à mon QA ce n'est pas un bug. Quelqu'un peut-il m'expliquer pourquoi cela se produit?.

Soccer: <input type="checkbox" name="sports" value="soccer"  tabindex="1" /><br />
Football: <input type="checkbox" name="sports" value="football"  tabindex="2" /><br /> 

<input type="radio" name="num" value="3" tabindex="3">3<br>
<input type="radio" name="num" value="4" tabindex="4">4<br>
<input type="radio" name="num" value="5" tabindex="5">5<br>
<input type="radio" name="num" value="6" tabindex="6">6<br>
<input type="radio" name="num" value="7" tabindex="7">7<br>

Baseball: <input type="checkbox" name="sports" value="baseball"  tabindex="8"  /><br /> 
Basketball: <input type="checkbox" name="sports" value="basketball"  tabindex="9"  />
htmlradio-button
47
qinking126

Vous pouvez citer le W3C comme source, ici et ici .

Un bouton radio est essentiellement un groupe qui fonctionne comme un seul élément car il ne conserve qu'une seule valeur. La tabulation à un groupe radio vous amènera au premier élément, puis à l'aide des touches fléchées vous permettant de naviguer dans le groupe.

  • Focus peut passer à un groupe de radio via: 
    • La touche Tab
    • Une clé d'accès ou un mnémonique ciblant l'étiquette 
    • Activation de l'étiquette (via le mécanisme de technologie d'assistance)
  • La touche Tabulation déplace le focus entre les boutons radio groupes et autres widgets. 
  • Lorsque l'accent est mis sur le groupe et quand aucun bouton radio n'est sélectionné: 
    • Une pression sur la touche de tabulation déplace le focus au premier bouton radio du groupe, mais ne sélectionne pas la radio bouton. 
    • Appuyez sur la touche Maj + Tab pour déplacer le focus sur la dernière radio dans le groupe, mais ne sélectionne pas le bouton radio. 
  • Lorsque la mise au point se déplace vers le groupe dans lequel un bouton radio est sélectionné, en appuyant sur les touches Tab et Maj + Tab déplacent le focus sur la radio bouton qui est coché. 
  • Les touches fléchées haut et bas permettent de déplacer focus et sélection. 
    • Appuyez sur la flèche vers le haut pour déplacer la mise au point et sélection de la sélection via les boutons radio du groupe. Si le premier Le bouton radio a le focus, puis le focus et la sélection passent au dernier bouton radio dans le groupe. 
    • Appuyez sur la touche fléchée vers le bas pour déplacer la mise au point. et sélection en arrière à travers les boutons radio du groupe. Si la le dernier bouton radio a le focus, puis le focus et la sélection se déplacent vers le premier bouton radio du groupe. * Appuyer sur la barre d'espace pour vérifier le bouton radio qui a actuellement le focus. 
  • Quand en réintégrant le groupe, la focalisation revient au point de focalisation précédente (l'élément avec le jeu de sélection). 
  • Appuyez sur la touche Tab pour quitter le groupe et déplace le focus vers le contrôle de formulaire suivant. 
  • Pressage les touches Shift + Tab quittent le groupe et déplacent le focus sur le précédent contrôle de forme. 
81
j08691

Les boutons radio avec un nom ressemblent à un contrôle unique (comme une entrée ou une sélection), vous pouvez modifier sa valeur avec les touches fléchées, la touche de tabulation déplace le focus sur un autre contrôle.

10
antejan

Si vous utilisez angularjs, vous pouvez contrôler le bouton radio directement avec ng-model en utilisant le même ng-model et en supprimant name.

<input type="radio" value="0" ng-model="status">
<input type="radio" value="1" ng-model="status">

Maintenant, un autre avantage à côté de la touche de tabulation est que vous pouvez d’abord faire la mise au point via le bouton radio sans le sélectionner. Vous pouvez ensuite sélectionner en appuyant sur space.

1
vusan

Si vous utilisez Matériel angulaire pour votre application, vous pouvez activer la tabulation du bouton radio de manière compatible avec sur plusieurs navigateurs en ajoutant une tabindex à chaque <mat-radio-button>:

<mat-radio-button [tabindex]="0">

Sinon, vous ne pourrez pas passer aux boutons radio de Safari (car il s’agit du comportement par défaut du navigateur - cliquez sur ici pour une discussion).

0
David Partyka

Je ne sais pas si cela reste un problème pour quiconque mais j'ai trouvé une solution. Comme indiqué ci-dessus, ce n'est pas un bug, c'est un comportement par défaut. Nous devons simplement réfléchir à la manière dont nous interagissons avec un site Web différemment. Lorsque vous faites un onglet dans un groupe d'objets radio, vous devez utiliser les touches fléchées pour naviguer dans cet ensemble d'entrées, puis utiliser la touche tabulation ou la touche Maj + tabulation pour sortir de cet ensemble d'entrées.

https://www.w3.org/TR/wai-aria-practices/examples/radio/radio-1/radio-1.html

0
Mike Dinder