Spinbuttons personnalisés

Sommaire

• Principe.
• Socle HTML.
• Rôles, états et propriétés ARIA.
• Interactions au clavier.
• Comportements attendus.

Principe

Les spinbuttons sont des éléments de formulaires qui permettent de renseigner une valeur numérique. Ils se présentent sous la forme d’un champ de texte associé à deux boutons permettant respectivement d’augmenter et de diminuer d’un pas la valeur du champ.

Les spinbuttons sont dits « personnalisés » lorsqu’ils ne sont pas construits sur la base du code HTML standard prévu pour ces éléments par la spécification : <input type="number" />, mais par l’intermédiaire d’un champ de texte associé à deux images, polices d’icônes ou styles spécifiques, pour afficher les « boutons » d’incrémentation et de décrémentation.

Le suivi des recommandations ci-dessous permet de reproduire le comportement par défaut des spinbuttons HTML standards, dans les cas où ces derniers ne peuvent être utilisés.

Socle HTML

<p id="etiquette">Étiquette du spinbutton</p>
<div>
  <input type="text" role="spinbutton" aria-valuemin="0" aria-valuemax="10" aria-valuenow="8" aria-labelledby="etiquette" />
  <img aria-hidden="true" src="plus.png" alt="+" />
  <img aria-hidden="true" src="minus.png" alt="-" />
</div>

Rôles, états et propriétés ARIA

• role="spinbutton" doit être appliqué sur le spinbutton.
• L’attribut aria-valuemin doit être appliqué sur le spinbutton. Cet attribut doit être renseigné avec la valeur minimale autorisée pour le spinbutton.
• L’attribut aria-valuemax doit être appliqué sur le spinbutton. Cet attribut doit être renseigné avec la valeur maximale autorisée pour le spinbutton.
• L’attribut aria-valuenow doit être appliqué sur le spinbutton. Sa valeur doit être renseignée dynamiquement en reprenant celle du spinbutton.
• Le spinbutton doit être rattaché à son étiquette via l’attribut aria-labelledby :
  • L’étiquette du spinbutton doit posséder un attribut id renseigné avec une valeur unique.
  • Le spinbutton doit posséder un attribut aria-labelledby renseigné avec la valeur de l’attribut id de l’étiquette du spinbutton.
• aria-hidden="true" doit être appliqué sur chaque image simulant un bouton d’incrémentation ou de décrémentation.

Interactions au clavier

Les interactions au clavier sont les mêmes que pour les spinbuttons HTML classiques.

Tab

Lorsque l’on accède en tabulant au spinbutton, le focus est positionné au niveau du champ de texte. Lorsque le focus est positionné sur le champ de texte, la prochaine tabulation permet de quitter le spinbutton.

Maj + Tab

Même comportement qu’avec la touche Tab, mais cette fois dans l’ordre inverse de lecture.

Flèche haut

Lorsque le focus est positionné dans le champ de texte, incrémente la valeur du champ de texte d’un pas.

Flèche bas

Lorsque le focus est positionné dans le champ de texte, décrémente la valeur du champ de texte d’un pas.

Origine

Lorsque le focus est positionné dans le champ de texte, décrémente la valeur du spinbutton à son minimum.

Fin

Lorsque le focus est positionné dans le champ de texte, incrémente la valeur du spinbutton à son maximum.

Comportements attendus

• Le focus clavier est positionné dans le champ de texte lors de l’utilisation du spinbutton et y reste jusqu’à l’utilisation de la touche Tab.
• Lorsque le focus clavier est positionné dans le champ de texte, il est possible de modifier la valeur du spinbutton à la fois en la renseignant directement au clavier ou en utilisant les touches Flèche haut, Flèche bas, Origine et Fin.
• Les boutons d’incrémentation et de décrémentation ne sont pas atteignables au clavier, mais sont fonctionnels à la souris.
• La valeur de l’attribut aria-valuenow doit être modifiée dynamiquement à chaque mise à jour du spinbutton et doit être identique à la valeur du spinbutton.
• La valeur du spinbutton ne peut être supérieure à la valeur renseignée dans l’attribut aria-valuemax.
• La valeur du spinbutton ne peut être inférieure à la valeur renseignée dans l’attribut aria-valuemin.

Commentaires

Haut de page