Attribut HTML autofocus
Découvrez l'attribut HTML autofocus : syntaxe, éléments compatibles, utilisation dans un dialog et considérations d'accessibilité.
L'attribut HTML autofocus est un attribut boolean qui indique au navigateur de déplacer automatiquement le focus clavier vers un élément dès que la page (ou la boîte de dialogue qui le contient) est chargée. L'utilisateur peut alors commencer à saisir du texte ou interagir avec cet élément immédiatement, sans avoir à cliquer dessus ni à y accéder par la touche Tab.
L'attribut autofocus a été introduit dans HTML5 et est désormais pris en charge par tous les navigateurs modernes (Chrome, Firefox, Safari et Edge le proposent largement depuis environ 2020).
Cette page couvre la syntaxe, les éléments auxquels il s'applique, le cas d'utilisation moderne le plus courant (un <dialog>), ainsi que les compromis en matière d'accessibilité à peser avant de l'utiliser.
Syntaxe
autofocus est un attribut boolean ; sa simple présence suffit à l'activer — aucune valeur n'est nécessaire.
<input autofocus>| S'applique à | Tout élément HTML pouvant recevoir le focus. Il est le plus souvent utilisé sur des contrôles de formulaire tels que <input>, <button>, <select> et <textarea>. Un élément <dialog> ouvert avec showModal() et un élément <details> ouvert participent également à la gestion de l'autofocus. |
|---|
Un seul autofocus par document
L'attribut autofocus ne peut être défini que sur un seul élément par document. Si vous l'ajoutez à plusieurs éléments, les navigateurs l'appliquent au premier élément portant l'attribut dans l'ordre du document et ignorent les autres. Il est donc impossible d'utiliser autofocus pour focaliser plusieurs champs simultanément — le focus est, par définition, un point unique.
Exemple de base
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title of the document.</title>
</head>
<body>
<h1>Example of the HTML "autofocus" attribute.</h1>
<form action="#">
Name: <input type="text" name="fname" autofocus /><br />
Surname: <input type="text" name="lname" /><br />
<input type="submit" />
</form>
</body>
</html>Lorsque la page se charge, le champ « Name » reçoit le focus et le curseur y clignote, prêt pour la saisie.
Autofocus sur d'autres éléments
autofocus ne se limite pas aux champs de texte. Il fonctionne sur tout contrôle pouvant recevoir le focus. Le navigateur place le focus sur l'élément ; pour un <select> ou un <button>, cela signifie qu'il est mis en surbrillance et prêt pour le clavier, et pour un <textarea> le curseur est placé à l'intérieur.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Autofocus on different controls</title>
</head>
<body>
<!-- A button can receive autofocus -->
<button type="button" autofocus>Start here</button>
<!-- A select can receive autofocus -->
<label>Country:
<select name="country">
<option>United States</option>
<option>Germany</option>
<option>France</option>
</select>
</label>
<!-- A textarea can receive autofocus -->
<label>Message:
<textarea name="message" rows="4"></textarea>
</label>
</body>
</html>N'oubliez pas la règle d'autofocus unique : seul le <button> ci-dessus recevra le focus, car c'est le premier élément portant l'attribut.
Autofocus dans un <dialog> (utilisation moderne la plus courante)
L'utilisation la plus claire et la plus justifiée de autofocus se trouve à l'intérieur d'un <dialog> modal. Lorsqu'un utilisateur ouvre délibérément une boîte de dialogue, envoyer le focus vers le premier contrôle pertinent à l'intérieur est un comportement attendu — cela maintient l'utilisateur au clavier à l'intérieur de la boîte de dialogue, prêt à agir.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dialog with autofocus</title>
</head>
<body>
<button id="openBtn">Open dialog</button>
<dialog id="myDialog">
<form method="dialog">
<p>
<label>Your name:
<input type="text" name="name" autofocus />
</label>
</p>
<button value="ok">OK</button>
<button value="cancel">Cancel</button>
</form>
</dialog>
<script>
const dialog = document.getElementById("myDialog");
document.getElementById("openBtn")
.addEventListener("click", () => dialog.showModal());
</script>
</body>
</html>La boîte de dialogue s'ouvrant en réponse à une action de l'utilisateur, déplacer le focus à l'intérieur n'est pas désorientant — c'est exactement ce que l'utilisateur a demandé. C'est pourquoi autofocus sur un contrôle de dialogue est bien plus sûr que autofocus sur un champ d'une page fraîchement chargée.
Quand utiliser (ou ne pas utiliser) l'autofocus
L'autofocus évite un clic et indique où commencer, mais il prend aussi le contrôle du clavier à l'utilisateur. Utilisez-le lorsque :
- La page ou la vue existe dans le seul but de cet unique champ — une page de recherche dédiée, un écran de connexion, ou une étape à question unique.
- Le focus se déplace en réponse à une action de l'utilisateur, comme l'ouverture d'un
<dialog>modal.
Évitez-le lorsque :
- L'élément se trouve en dessous du pli ou à mi-chemin d'une page à contenu dense. Le focaliser force le navigateur à défiler, ce qui est désagréable et saute le contenu situé au-dessus.
- La page comporte un contenu significatif que l'utilisateur devrait lire en premier (un article avec une zone de commentaires, par exemple). Focaliser automatiquement la zone de commentaires fait passer le lecteur directement au-delà de l'article.
Considérations d'accessibilité
autofocus affecte directement les utilisateurs de technologies d'assistance ; à manier avec précaution.
- Perturbation des lecteurs d'écran. Les lecteurs d'écran commencent normalement à lire depuis le haut du document. Lorsque le focus est forcé sur un élément en milieu de page, le lecteur peut sauter directement à ce contrôle et passer silencieusement sous silence l'en-tête, la navigation et l'introduction — l'utilisateur se retrouve « au milieu de la page » sans aucun contexte sur sa position.
- WCAG 2.4.3 (Ordre du focus). Ce critère de succès exige que l'ordre du focus préserve la signification et l'opérabilité. Déplacer le focus vers un contrôle arbitraire au chargement peut enfreindre l'ordre de lecture et de tabulation attendu par l'utilisateur. Réservez l'autofocus aux cas où l'élément focalisé est véritablement le point de départ logique.
- Changement de contexte inattendu. Déplacer soudainement le focus et faire défiler le viewport peut désorienter les utilisateurs souffrant de handicaps cognitifs ou de faible vision, qui peuvent ne pas remarquer que la page a bougé.
Une règle pratique : ne focalisez automatiquement un élément que lorsque cette action ne fait pas défiler la page et que cet élément est incontestablement la première chose que l'utilisateur souhaite faire.
Mise en garde sur mobile
Plusieurs navigateurs mobiles ignorent intentionnellement autofocus au chargement de la page. Sur iOS, Safari mobile ne fait pas apparaître le clavier à l'écran ni ne déplace le focus automatiquement lors du chargement d'une page, et Chrome sur Android se comporte de façon similaire. Il s'agit d'une décision UX au niveau du système d'exploitation : l'ouverture automatique du clavier virtuel couvrirait le contenu, modifierait la mise en page et surprendrait l'utilisateur avant qu'il ait décidé de saisir du texte.
Il n'existe pas de contournement fiable pour « forcer » ce comportement sur ces plateformes, et tenter de le simuler avec JavaScript (element.focus() au chargement) est également bloqué, sauf si cela se produit dans un gestionnaire d'événements utilisateur. L'approche acceptée consiste à focaliser en réponse à un appui — par exemple, appeler .focus() lorsque l'utilisateur ouvre une boîte de dialogue ou appuie sur un bouton « rechercher » — ce qui correspond exactement au modèle de dialogue illustré ci-dessus.
Compatibilité des navigateurs
autofocus fait partie du standard HTML Living Standard et bénéficie d'un large support : Chrome, Edge, Firefox et Safari l'ont implémenté depuis de nombreuses années, avec le comportement moderne (pour tout élément) disponible dans ces navigateurs depuis environ 2020. La restriction du clavier mobile décrite ci-dessus est un comportement délibéré de la plateforme, et non un manque de support.