Spinbuttons (boutons fléchés) simulés en ARIA

Une mise à jour de la spécification ARIA est en cours d’officialisation : passage progressif de ARIA 1.0 (recommandation actuelle) à ARIA 1.1 (recommandation en cours d’homologation).

Cette fiche s’appuie sur les motifs de conception ARIA 1.0 issus du document WAI-ARIA Authoring Practices 1.0, et les recommandations ci-dessous pourront faire l’objet d’ajustements une fois la version ARIA 1.1 officialisée.

Pour plus d’informations sur les changements relatifs au passage à ARIA 1.1, consulter les WAI-ARIA Authoring Practices 1.1.

Sommaire

Principe

Les spinbuttons sont des éléments de formulaires qui permettent à l’utilisateur 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 « simulés en ARIA » 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.

Cette fiche s’appuie sur le motif de conception « Spinbutton » détaillé dans les WAI-ARIA 1.0 Authoring Practices du W3C.

Socle HTML


<p id="etiquette">Étiquette du spinbutton</p>
<div>
  <input type="text" role="spinbutton" aria-valumin="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

Interactions au clavier

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

Tab

Lorsque l’utilisateur 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 à l’utilisateur 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, incrémente la valeur du spinbutton à son maximum.

Fin

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

Page précédente

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

Page suivante

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

Comportements attendus

1 commentaire

  • Par Laurent Bracquart, le 10 juillet 2017 à 11h24.

    Ajout d’un encart informatif concernant la mise à jour de la spécification ARIA depuis la version ARIA 1.0 vers la version ARIA 1.1 en introduction de la fiche le 10/07/2017.

    Répondre

Ajouter un commentaire

Les champs avec astérisque (*) sont obligatoires.

Haut de page