From a47584de1bd47788cb5aa6178fa88b31977b2a8e Mon Sep 17 00:00:00 2001
From: tristantheb
Date: Sat, 19 Jun 2021 10:25:05 +0200
Subject: UPDATE: Update translation of the HTML elements — 🛠 Priority work
area (#500)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* UPDATE: Updating pages starting with A
* FIX: Update missing KS to html anchor
* Review HTML Element a
* Review HTML Element abbr
* Review HTML Element acronym
* Review HTML Element address
* Review HTML Element applet
* Review HTML Element area
* Review HTML Element article
* Review HTML Element aside
* Review HTML Element audio
* UPDATE: Updating pages wtarting with B
* Review HTML Element b
* Review HTML Element base
* Review HTML Element basefont
* Review HTML Element bdi
* Review HTML Element bdo
* Review HTML Element big
* Review HTML Element blink
* Review HTML Element blockquote
* Review HTML Element body
* Review HTML Element br
* Review HTML Element button
* Review HTML Element button - rm HTMLRef
* Review HTML Element button - lint link
* UPDATE: Updating pages starting with C
* UPDATE: Updating pages starting with D
* UPDATE: Refresh the reference page
* UPDATE: Updating pages starting with E
* Review HTML Element canvas
* Review HTML Element caption
* Review HTML Element center
* Review HTML Element cite
* UPDATE: Updating pages starting with F
* BCD: Update all updated pages with new BCD format
* FIX: add missing bracket
* Review - HTML element - code
* Review - HTML Element - col
* Review - HTML Element - colgroup
* Review - HTML Element - content
* Review - HTML Element - data
* Review - HTML Element - datalist
* Review - HTML Element - dd
* Review - HTML Element - del
* Review - HTML Element
* Review - HTML Element - dfn
* Review - HTML Element - dialog
* Review - HTML element - dir
* Review - HTML Element div
* Review - HTML Element - dl
* Review - HTML Element - dt
* Review - HTML Element - em
* Review - HTML Element - embed
* Review - HTML Element - fieldset
* Review - HTML Element - figcaption
* Review - HTML Element - figure
* Review - HTML Element - font
* Review - HTML Element - footer
* Review - HTML Element - form
* Review - HTML Element - frame
* Review - HTML Element - frameset
* Review updates since PR start - A
* Review updates since PR start - B
* Review updates since PR start - C
* Review updates since PR start - D
* Review updates since PR start - F
Co-authored-by: julieng
---
files/fr/web/html/element/button/index.html | 333 ++++++++++++----------------
1 file changed, 142 insertions(+), 191 deletions(-)
(limited to 'files/fr/web/html/element/button')
diff --git a/files/fr/web/html/element/button/index.html b/files/fr/web/html/element/button/index.html
index be7ad23143..93bffb8e99 100644
--- a/files/fr/web/html/element/button/index.html
+++ b/files/fr/web/html/element/button/index.html
@@ -3,253 +3,204 @@ title: '
+
+
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 du bouton comme partie des données du formulaire.
+
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.
-
Exemple
+
Notes
-
<button name="button">Cliquez sur moi :)</button>
-
+
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.
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.
+
Problèmes d'accessibilité
+
+
Boutons avec une icône
+
+
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.
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.
+
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.
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 moteur, celles qui utilisent des dispositifs de pointage peu précis (doigt ou stylet). La taille interactive minimale recommandée est de 44x44 pixels CSS.
+
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.
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 {{cssxref("margin")}}.
+
Un tel espacement peut être obtenu grâce à la propriété CSS margin.
Pour décrire l'état d'un bouton, le bon attribut ARIA à utiliser est aria-pressed et non 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{{cssxref("::-moz-focus-inner")}} { }.
+
Firefox
+
+
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.
Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une pull request sur https://github.com/mdn/browser-compat-data.
+
Spécifications
-
{{Compat("html.elements.button")}}
+
{{Specifications}}
-
Voir aussi
+
Compatibilité des navigateurs
-
-
Les autres éléments HTML utilisés pour créer des formulaires :
-