Présentation de l'élément HTML <geolocation>

Mari Viana

Minh Le

Thomas Steiner

Publié le 13 janvier 2026

À partir de Chrome 144, vous pouvez utiliser le nouvel élément HTML <geolocation>. Cet élément représente un changement majeur dans la façon dont les sites demandent les données de localisation des utilisateurs. Il s'éloigne des invites d'autorisation déclenchées par script pour une expérience déclarative et axée sur l'action de l'utilisateur. Il réduit le code récurrent nécessaire pour gérer les états et les erreurs d'autorisation, et fournit un signal plus fort de l'intention de l'utilisateur, ce qui permet d'éviter les interventions du navigateur (comme les blocages silencieux).

Ce lancement est le résultat de tests approfondis en conditions réelles et de discussions rigoureuses avec la communauté des normes Web. Pour comprendre l'utilité de cet élément, il est important d'examiner l'historique de son développement et les données qui ont guidé sa conception.

De l'interface générique <permission> à l'interface spécifique <geolocation>

L'élément <geolocation> est la dernière évolution de l'initiative de contrôle des autorisations intégrées aux pages, où il était initialement proposé en tant qu'élément <permission> générique avec un attribut type (voir l'explication d'origine). La valeur de l'attribut "type" (par exemple, "geolocation") détermine le type d'autorisation demandée. Par exemple, la proposition initiale inclut des valeurs telles que l'appareil photo, le micro et la géolocalisation.

Validation du concept

Nous avons effectué une phase d'évaluation pour l'élément générique <permission> de Chrome 126 à 143. L'objectif de ce test était de vérifier l'hypothèse selon laquelle un bouton dédié et contextuel améliorerait la confiance des utilisateurs et leur prise de décision.

Les résultats de cet essai d'origine ont permis de valider ce concept clé :

• Zoom a signalé une diminution de 46,9 % des erreurs de capture de l'appareil photo ou du micro (telles que les bloqueurs au niveau du système) en utilisant l'élément pour guider les utilisateurs dans la résolution du problème.
• Immobiliare.it a enregistré une augmentation de 20 % des flux de géolocalisation réussis.
• ZapImóveis a observé un taux de réussite de 54,4 % pour les utilisateurs qui ont pu récupérer leur compte après avoir été "bloqués précédemment" lorsqu'ils ont été confrontés à l'élément.

Redéfinition de la conception

Bien que le concept ait fait ses preuves, l'implémentation nécessitait d'être affinée. Les commentaires des fournisseurs de navigateurs, y compris Apple (Safari/WebKit) et Mozilla (Firefox), ont indiqué qu'un élément "universel" introduisait une complexité importante en ce qui concerne les comportements de capacités uniques.

Par conséquent, nous sommes passés d'un contrôle d'autorisation générique à des éléments ciblés et spécifiques aux fonctionnalités (voir la discussion WICG). L'élément <geolocation> est le premier de ces contrôles spécialisés à être lancé. Ensuite, nous développons également un élément <usermedia> dédié (pour l'accès à la caméra et au micro), qui dispose de son propre test d'origine distinct.

Contrairement à la proposition initiale, qui se concentrait sur la gestion de l'état des autorisations (c'est-à-dire autoriser ou refuser), ces nouveaux éléments fonctionnent comme des médiateurs de données, ce qui évite d'avoir à appeler directement les API JavaScript pour la plupart des cas d'utilisation.

Ce tableau décrit les différences entre l'API Geolocation JavaScript, l'élément <permission> et le nouvel élément <geolocation>.

Fonctionnalité	API Geolocation JS	Élément HTML	Élément HTML
Événement déclencheur pour l'invite d'autorisation	Exécution de script impératif (getCurrentPosition)	L'utilisateur clique sur l'élément contrôlé par le navigateur.	L'utilisateur clique sur l'élément contrôlé par le navigateur.
Rôle Visiteur	Décider du prompt en fonction de l'état	Agit en tant que médiateur d'autorisation	Agit en tant que médiateur de données
Responsabilité du site	Appeler manuellement l'API JavaScript, gérer les rappels et les erreurs d'autorisation	Implémenter l'API geolocation une fois l'autorisation accordée	Écouter l'événement location
Objectif principal	Accès de base à la position	Demande d'autorisation	Demande d'autorisation et accès à la position

Pourquoi utiliser l'élément <geolocation> ?

Actuellement, les flux de géolocalisation s'appuient sur l'API Geolocation, qui déclenche des invites d'autorisation pouvant interrompre les utilisateurs si elles sont déclenchées hors contexte ou même au chargement de la page. Il est important de noter que l'utilisation de ces requêtes impératives devient moins viable en raison des interventions des navigateurs. Par exemple, Chrome bloque activement les demandes d'autorisation si un utilisateur a fermé l'invite trois fois, ce qui entraîne un blocage silencieux temporaire qui dure initialement une semaine. Cela signifie que l'ancien code qui tente de déclencher une invite peut échouer silencieusement, ce qui laisse l'utilisateur avec une expérience défaillante et sans moyen clair d'activer la fonctionnalité. De plus, les requêtes standards manquent souvent de contexte. Si une invite s'affiche de manière inattendue, les utilisateurs peuvent la bloquer de manière réflexive ou accidentelle, sans savoir que cette décision crée un blocage permanent difficile à annuler. Ce manque de contexte, plutôt que la fonctionnalité elle-même, est l'une des principales raisons des taux de refus élevés.

L'élément <geolocation> résout le problème de manque de contexte en s'assurant que les requêtes sont strictement initiées par l'utilisateur. Ce modèle présente trois avantages distincts :

• Intention et timing clairs : en cliquant sur un bouton Utiliser la position, l'utilisateur indique explicitement son intention d'utiliser sa position à ce moment précis. Cela indique qu'ils comprennent la valeur de la localisation et qu'ils souhaitent activement l'utiliser, ce qui transforme un blocage potentiel en interaction réussie.
• Récupération simplifiée : si un utilisateur a précédemment bloqué l'accès à sa position lorsqu'il naviguait sur un site (peut-être par erreur ou par manque de contexte), le fait de cliquer sur l'élément déclenche un flux de récupération spécialisé. Cela les aide à réactiver la localisation au moment où ils souhaitent l'utiliser, sans avoir à parcourir les paramètres du site du navigateur.
• Actualisation automatique : si l'autorisation est déjà accordée, cliquer sur l'élément agit comme un bouton d'actualisation, récupérant immédiatement de nouvelles données sans redemander l'autorisation.

Implémentation

L'intégration de l'élément nécessite beaucoup moins de code récurrent que l'API JavaScript. Au lieu de gérer manuellement les rappels et les états d'erreur, les développeurs peuvent ajouter la balise à la page et écouter l'événement onlocation.

<geolocation
  onlocation="handleLocation(event)"
  autolocate
  accuracymode="precise">
</geolocation>

function handleLocation(event) {
  // Directly access the GeolocationPosition object on the element
  if (event.target.position) {
    const { latitude, longitude } = event.target.position.coords;
    console.log("Location retrieved:", latitude, longitude);
  } else if (event.target.error) {
    console.error("Error:", event.target.error.message);
  }
}

Attributs et propriétés clés

• autolocate : tente automatiquement de récupérer la position lorsque l'élément se charge, mais uniquement si l'état actuel des autorisations le permet déjà (pour éviter les invites inattendues).
• accuracymode : accepte la valeur "precise" ou "approximate", qui correspond à l'option enableHighAccuracy standard.
• watch : le comportement correspond à watchPosition(), et les événements sont déclenchés en continu lorsque l'utilisateur se déplace.
• position : propriété en lecture seule de l'élément DOM renvoyant l'objet GeolocationPosition une fois disponible.
• error : propriété en lecture seule renvoyant un GeolocationPositionError si la requête échoue.

Démonstration de l'élément <geolocation> montrant les trois configurations principales : demande manuelle, demande automatique (à l'aide d'autolocate) et surveillance de la position (à l'aide de watch). Vous pouvez tester ces comportements sur la page de démonstration en direct.

Remarque : L'élément HTML <geolocation> doit être présent sur la page pour fonctionner, mais il n'a pas besoin d'être visible pour déclencher la demande de localisation au chargement à l'aide de l'attribut autolocate.

Contraintes de style

Pour garantir la confiance des utilisateurs et éviter les schémas de conception trompeurs, l'élément <geolocation> applique des restrictions de style spécifiques semblables à celles de l'ancien élément <permission>. Bien que vous puissiez personnaliser le bouton pour qu'il corresponde au thème de leur site, le navigateur applique plusieurs mesures de protection :

• Lisibilité : les couleurs du texte et de l'arrière-plan sont vérifiées pour s'assurer qu'elles présentent un contraste suffisant (généralement un rapport d'au moins 3:1) afin que la demande d'autorisation soit toujours lisible. De plus, le canal alpha (opacité) doit être défini sur 1 pour éviter que l'élément ne soit trompeusement transparent.
• Taille et espacement : l'élément applique des limites minimales et maximales pour la largeur, la hauteur et la taille de la police. Les marges négatives ou les décalages de contour sont désactivés pour empêcher l'élément d'être visuellement masqué ou de se chevaucher de manière trompeuse avec d'autres contenus.
• Intégrité visuelle : les effets de distorsion sont limités. Par exemple, la transformation n'est compatible qu'avec les translations 2D et la mise à l'échelle proportionnelle.
• Pseudo-classes CSS : l'élément est compatible avec le style basé sur l'état, tel que :granted (lorsque l'autorisation est active).

Stratégie d'amélioration progressive

Nous savons que la standardisation de nouveaux éléments HTML est un processus progressif. Toutefois, les développeurs peuvent adopter l'élément <geolocation> dès aujourd'hui sans compromettre la compatibilité pour les utilisateurs d'autres navigateurs.

L'élément est conçu pour se dégrader de manière élégante. Les navigateurs qui ne sont pas compatibles avec l'élément <geolocation> le traiteront comme un élément [HTMLUnknownElement](https://developer.mozilla.org/docs/Web/API/HTMLUnknownElement). Important : Si le navigateur est compatible avec l'élément, il n'affichera pas les enfants. Cela permet d'écrire le code HTML de manière propre pour les navigateurs compatibles et non compatibles.

Modèle de remplacement personnalisé

Si vous souhaitez contrôler entièrement l'expérience de secours, vous pouvez utiliser des éléments enfants tels qu'un bouton que vous connectez à l'API Geolocation JavaScript habituelle.

<geolocation onlocation="updateMap()">
  <!-- Fallback contents if the element is not supported -->
  <button onclick="navigator.geolocation.getCurrentPosition(updateMap)">
    Use my location
  </button>
</geolocation>

Polyfill

Vous pouvez également installer un polyfill depuis npm qui remplace de manière transparente et automatique toutes les occurrences de <geolocation> par un élément personnalisé <geo-location> (notez le tiret) soutenu par l'API Geolocation JavaScript standard. Si le navigateur est compatible avec l'élément <geolocation>, le polyfill ne fait rien. Consultez cette démonstration pour voir le polyfill en action. Le code source se trouve sur GitHub.

if (!('HTMLGeolocationElement' in window)) {
  await import('https://unpkg.com/geolocation-element-polyfill/index.js');
}

<geolocation onlocation="updateMap()"></geolocation>

Détection de fonctionnalités

Pour une logique plus complexe, vous pouvez détecter la prise en charge de manière programmatique à l'aide de l'interface :

if ('HTMLGeolocationElement' in window) {
  // Use modern <geolocation> element logic
} else {
  // Fallback to legacy navigator.geolocation API
}

Conclusion

Nous avons hâte de voir comment les développeurs implémenteront des scénarios de nouvelle tentative de localisation plus performants à l'aide du nouvel élément HTML <geolocation>. Il représente un changement vers des éléments spécifiques aux fonctionnalités, adaptés à la façon dont les utilisateurs utilisent réellement le Web aujourd'hui.

Pour d'autres cas d'utilisation des autorisations, vous pouvez participer à la phase d'évaluation de l'origine de l'élément HTML <usermedia> à partir de Chrome 144. Vous bénéficierez ainsi des mêmes avantages ergonomiques pour la caméra et le micro.

Liens associés

• L'élément <geolocation> sur la page "État de la plate-forme Chrome"
• Explication de l'élément HTML de géolocalisation
• Page de démonstration
• Position de Mozilla sur les normes
• Position de WebKit sur les normes

Remerciements

Ce document a été examiné par Andy Paicu, Gilberto Cocchi et Rachel Andrew.