<button> : l'élément représentant un bouton

Cet élément peut utiliser les attributs universels.

autofocus

Cet attribut booléen, qui ne doit être défini qu'une fois par document, indique au navigateur que cet élément doit automatiquement avoir le focus lorsque la page est chargée.

autocomplete Non standard

Pour l'élément <button>, cet attribut, propre à Firefox, n'est pas standard. Par défaut et à la différence des autres navigateurs, Firefox conserve l'état de désactivation d'un <button> au fur et à mesure des chargements d'une page. Utiliser cet attribut avec la valeur off (i.e. autocomplete="off") désactive cette fonctionnalité (cf. bug 654072 pour plus d'informations).

disabled

Cet attribut booléen empêche l'utilisateur d'interagir avec le bouton : il ne peut pas être pressé ou ciblé.

Firefox, contrairement aux autres navigateurs, persiste l'état désactivé dynamique d'un <bouton> à travers les chargements de page. Utilisez l'attribut autocomplete pour contrôler cette fonctionnalité.

form

L'élément <form> auquel associer le bouton (son formulaire rattaché). Cet attribut contient l'attribut id de l'élément <form> auquel celui-ci est rattaché. Par défaut, le bouton est rattaché à l'élément <form> qui est son plus proche ancêtre. Cet attribut permet à un bouton d'être placé n'importe où dans le document et pas seulement comme un descendant d'éléments <form>. Il permet également de rattacher le bouton à un autre formulaire que son élément parent.

formaction

L'URL qui traite les informations soumises par le bouton. Remplace l'attribut action du formulaire rattaché au bouton. Il ne fait rien s'il n'y a pas de formulaire rattaché.

formenctype

Lorsque l'attribut type possède la valeur submit, cet attribut définit le type MIME qui sera utilisée pour encoder les données envoyées au serveur. C'est un attribut à valeur contrainte qui peut prendre les valeurs suivantes :

• application/x-www-form-urlencoded : La valeur par défaut.
• multipart/form-data : Utilisé pour soumettre des éléments <input> dont les attributs type sont définis sur file.
• text/plain : Spécifié comme une aide au débogage ; ne doit pas être utilisé pour la soumission réelle du formulaire.

Si cet attribut est spécifié, il remplace l'attribut enctype du formulaire rattaché au bouton.

formmethod

Lorsque l'attribut type possède la valeur submit (explicitement ou comme valeur par défaut), cet attribut définit la méthode HTTP qui sera utilisée pour envoyer les données au serveur. C'est un attribut à valeur contrainte qui peut prendre les valeurs suivantes :

• post : Les données du formulaire sont incluses dans le corps de la requête HTTP lorsqu'elles sont envoyées au serveur. À utiliser lorsque le formulaire contient des informations qui ne devraient pas être publiques, comme les identifiants de connexion.
• get : Les données du formulaire sont ajoutées à l'URL action du formulaire, avec un ? comme séparateur, et l'URL résultante est envoyée au serveur. Utilisez cette méthode lorsque le formulaire n'a pas d'effets secondaires, comme les formulaires de recherche.
• dialog : Cette méthode permet d'indiquer que le bouton ferme l'élément <dialog> auquel il est associé, et n'envoie pas de données du formulaire.

S'il est spécifié, cet attribut remplace l'attribut method du formulaire rattaché au bouton.

formnovalidate

Si le bouton est un bouton de soumission (type non défini ou défini avec la valeur "submit"), cet attribut booléen spécifie que le formulaire ne doit pas être validé lorsqu'il est soumis. Si cet attribut est spécifié, il remplace l'attribut novalidate du formulaire rattaché au bouton. Cet attribut est également disponible sur les éléments <input type="image"> et <input type="submit">.

formtarget

Lorsque l'attribut type possède la valeur submit, cet attribut indique le contexte de navigation (onglet, fenêtre, frame) associé avec le formulaire, sa cible. Outre un attribut id valide du document, il peut prendre l'une de ces valeurs particulières:

• _self : Charge la réponse dans le même contexte de navigation que le contexte actuel. Il s'agit de la valeur par défaut si l'attribut n'est pas spécifié.
• _blank : Charge la réponse dans un nouveau contexte de navigation sans nom — généralement un nouvel onglet ou une nouvelle fenêtre, selon les paramètres du navigateur de l'utilisateur.
• _parent : Charge la réponse dans le contexte de navigation parent de celui en cours. S'il n'y a pas de parent, cette option se comporte de la même manière que _self.
• _top : Charge la réponse dans le contexte de navigation de niveau supérieur (c'est-à-dire le contexte de navigation qui est un ancêtre du contexte actuel, et qui n'a pas de parent). S'il n'y a pas de parent, cette option se comporte de la même manière que _self.

name

Le nom du bouton, soumis en tant que paire avec la valeur (value) du bouton comme partie des données du formulaire.

popovertarget

Transforme un <button> en un élément de contrôle d'un popover ; il prend comme valeur l'id de l'élément popover à contrôler. Voir la page sur l'API Popover pour plus de détails.

popovertargetaction

Définit l'action à effectuer sur l'élément popover cible lorsqu'un bouton est activé. Les valeurs possibles sont :

"hide"

Le bouton masquera l'élément popover cible. Si l'élément popover cible est déjà masqué, rien ne se passera.

"show"

Le bouton affichera l'élément popover cible. Si l'élément popover cible est déjà affiché, rien ne se passera.

"toggle"

Le bouton affichera l'élément popover cible s'il est masqué, ou le masquera s'il est affiché. Si popovertargetaction n'est pas défini, le bouton se comportera comme s'il avait la valeur "toggle".

type

Le comportement par défaut du bouton. Les valeurs possibles sont :

• submit : Le bouton soumet les données du formulaire au serveur. C'est la valeur par défaut si l'attribut n'est pas spécifié pour les boutons associés à un <form>, ou si l'attribut est une valeur vide ou invalide.
• reset : Le bouton réinitialise tous les contrôles à leur valeur initiale, comme <input type="reset">. (Ce comportement a tendance à agacer les utilisateurs).
• button : Le bouton n'a pas de comportement par défaut et ne fait rien lorsqu'il est pressé par défaut. Les scripts côté client peuvent écouter les événements de l'élément, qui sont déclenchés lorsque les événements se produisent.

value

Définit la valeur associée au name du bouton lorsqu'il est soumis avec les données du formulaire. Cette valeur est transmise au serveur en paramètres lorsque le formulaire est soumis.

Un bouton de soumission avec l'attribut formaction défini, mais sans formulaire associé ne fait rien. Vous devez définir un formulaire rattaché, soit en l'enveloppant dans un <form>, soit en définissant la valeur de l'attribut form avec l'identifiant du formulaire.

Les éléments <button> sont beaucoup plus faciles à styliser que les éléments <input>. Vous pouvez ajouter du contenu HTML interne (pensez à <i>, <br>, ou même <img>), et utiliser les pseudo-éléments ::after et ::before pour un rendu complexe.

Si vos boutons ne servent pas à soumettre des données de formulaire à un serveur, assurez-vous de définir leur attribut type à bouton. Sinon, ils tenteront de soumettre des données de formulaire et de charger la réponse (inexistante), détruisant éventuellement l'état actuel du document.

Bien que <button type="button"> n'ait pas de comportement par défaut, on peut utiliser des gestionnaires d'évènements scriptés pour déclencher certaines actions. Un bouton pourra déclencher des actions grâce à JavaScript, par exemple pour retirer un élément d'une liste.

Les boutons qui reposent uniquement sur une icône pour représenter une fonctionnalité n'ont pas de nom accessible. Un nom accessible permet à un outil d'assistance (un lecteur d'écran par exemple) de générer un arbre d'accessibilité correct lors de l'analyse du document. Les outils d'assistance utilisent cet arbre d'accessibilité pour permettre aux utilisateurs de naviguer et d'utiliser le contenu de la page.

Afin de fournir un nom accessible pour un bouton, on fournira un contenu texte dans l'élément qui décrit, de façon concise, la fonctionnalité offerte par le bouton.

Exemples

<button name="favorite" type="button">
  <svg aria-hidden="true" viewBox="0 0 10 10">
    <path d="M7 9L5 8 3 9V6L1 4h3l1-3 1 3h3L7 6z" />
  </svg>
  Ajouter aux favoris
</button>

Résultat

Si on souhaite que le texte du bouton ne soit pas visible, on peut le faire de façon accessible grâce à une combinaison de propriétés qui permettent de le masquer visuellement mais qui permet toujours aux technologies d'assistance de l'analyser.

Toutefois, on notera que laisser le texte visible permettra aux personnes qui ne sont pas familières avec l'application de comprendre le rôle du bouton. Cela vaut particulièrement pour les personnes qui utilisent peu la technologie ou dont la culture apporte une autre interprétation aux images utilisées.

• Qu'est-ce qu'un nom accessible ? The Paciello Group (en anglais)
• Comprendre les règles WCAG 4.1
• Understanding Success Criterion 4.1.2 - W3C Understanding WCAG 2.0 (en anglais)

Dimensionnement

Les éléments interactifs tels que les boutons doivent fournir une surface suffisamment grande pour qu'il soit facile de les activer. Cela facilitera la tâche à une variété de personnes : celles qui ont des problèmes moteurs, celles qui utilisent des dispositifs de pointage peu précis (doigt ou stylet). La taille interactive minimale recommandée est de 44×44 pixels CSS.

• Comprendre le critère d'accessibilité 2.5.5 sur la taille des cibles - Comprendre WCAG 2.1 (en anglais)
• Taille des cibles et critère 2.5.5, billet en anglais d'Adrian Roselli
• Test rapide : cibles tactiles suffisamment grande — Projet A11Y (billet en anglais)

Proximité

Lorsque plusieurs contenus interactifs (y compris les boutons) sont placés les uns à côté des autres, il est nécessaire de les espacer suffisamment pour minimiser le risque d'activer le mauvais contenu lors de la navigation.

Un tel espacement peut être obtenu grâce à la propriété CSS margin.

• Les tremblements de la main et le problème du bouton géant — Axess Lab (en anglais)

Pour décrire l'état d'un bouton, le bon attribut ARIA à utiliser est aria-pressed et pas aria-checked ou aria-selected. Pour en savoir plus, lisez les informations sur le rôle ARIA de bouton.

Firefox ajoute une bordure en pointillés sur le bouton qui a le focus. Cette bordure est ajoutée via la feuille de style du navigateur et il est possible de la surcharger avec son propre style via button::-moz-focus-inner { }.

Si ce comportement est surchargé, il est nécessaire de vérifier que le changement de focus est clairement perceptible, y compris lorsque la vision ou les conditions d'éclairage réduisent la visibilité du document.

Le ratio de contraste est calculé en comparant la luminosité de la couleur du texte et celle de l'arrière-plan. Afin de respecter les préconisations d'accessibilité sur le Web (WCAG), un ratio minimal de 4.5:1 est obligatoire pour le contenu textuel normal et un ratio minimal de 3:1 est obligatoire pour grands textes ou les titres. Un grand texte est défini comme un texte qui mesure 18.66px et qui est en gras ou comme un texte qui mesure 24px ou plus.

• Vérificateur de contraste WebAIM (en anglais)
• Comprendre les règles WCAG 1.4
• Understanding Success Criterion 1.4.3 - W3C Understanding WCAG 2.0 (en anglais)

Le clic sur un élément <button> ou sur un élément <input type="button"> peut, selon le navigateur et l'OS, lui donner le focus. Il s'agit du comportement par défaut le plus courant, mais ce n'est intentionnellement pas le cas de Safari.