jquery.app
Francais
EnglishDeutschFrancaisEspanol日本語Nederlands

Outils HTML

Gratuit Verificateur de landmarks HTML

Collez du HTML et vérifiez les elements landmark ARIA pour la navigation au lecteur d'écran.

Chargement de l'outil...

Qu'est-ce que Verificateur de landmarks HTML ?

Les points de repère ARIA sont des elements HTML qui definissent les regions d'une page. Les lecteurs d'ecran utilisent ces points de repère pour permettre aux utilisateurs de naviguer entre les sections d'une page. Les points de repère courants incluent header, main, nav, footer, aside et form. L'absence de points de repère rend la navigation plus difficile pour les utilisateurs de technologies d'assistance.

Réponse rapide

Collez votre HTML pour verifier quels elements ARIA landmark sont presents et lesquels sont manquants. Les lecteurs d'ecran utilisent les points de repère pour aider les utilisateurs de clavier et de technologies d'assistance a naviguer entre les regions de la page.

Last updated: 2026-06-11

Limites

  • L'outil analyse uniquement les noms d'elements. Il ne verifie pas si les points de repère ont des noms accessibles fournis via aria-label, aria-labelledby ou des titres visibles.
  • Le verificateur ne valide pas les attributions de roles ARIA. Un element avec un attribut role peut remplacer ou supprimer le role de point de repère implicite.
  • Coller un HTML partiel peut manquer des elements de point de repère en dehors du contenu colle. Collez le HTML complet de la page pour un audit integral.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Comment utiliser cet outil

  1. Collez votre balisage HTML dans la zone de saisie.
  2. L'outil analyse les elements de point de repère et affiche ceux qui sont presents.
  3. Examinez les resultats montrant quels points de repère manquent a votre page.
  4. Ajoutez les elements de point de repère manquants pour ameliorer l'accessibilite de la page.

A quoi il sert

  • Auditer un modèle de page statique pour detecter les elements de point de repère manquants avant la publication.
  • Verifier que chaque page d'un site possede un element main pour la navigation par lecteur d'ecran.
  • S'assurer que les blocs de navigation utilisent l'element nav au lieu d'elements div generiques.

Cas d'usage

Exemples concrets

Exemple

Point de repère main manquant

Un audit de modèle de page revele un element main manquant. Le verificateur le signale comme un point de repère obligatoire et explique que les lecteurs d'ecran dependent de main pour acceder au contenu de la page.

Exemple

Navigation en div detectee

Une mise en page de blog possede des elements header et footer mais utilise une div pour la navigation. Le verificateur suggere de remplacer la div par un element nav pour une meilleure structure de points de repère.

Erreurs frequentes

  • Utiliser plusieurs elements main sur une seule page, ce qui n'est pas standard et perturbe la navigation par lecteur d'ecran.
  • Envelopper tout le contenu dans un element nav au lieu de l'utiliser uniquement pour la navigation reelle du site.
  • Utiliser des elements section sans noms accessibles, ce qui les rend moins utiles en tant que points de repère ARIA.

Vérification

  1. Chargez la page auditee dans un navigateur et utilisez un lecteur d'ecran ou une extension de navigateur pour naviguer par points de repère et confirmer que les regions attendues sont presentes.
  2. Passez la page dans un outil de test d'accessibilite formel comme axe DevTools ou WAVE pour recouper les resultats de l'audit des points de repère.

FAQ

Questions sur Verificateur de landmarks HTML

Combien d'elements main une page doit-elle avoir ?

Un element main visible par page. Plusieurs elements main ne sont pas standard et perturbent la navigation par lecteur d'ecran.

Les elements semantiques HTML5 sont-ils identiques aux points de repère ARIA ?

Oui. Les elements comme header, main, nav, footer, aside et form ont des roles ARIA implicites. Utiliser ces elements semantiques cree automatiquement des points de repère.

Dois-je ajouter des etiquettes aux elements section ?

Un element section sans nom accessible ne s'enregistre pas comme point de repère dans l'arbre d'accessibilite. Ajoutez un attribut aria-label ou aria-labelledby aux elements section qui representent des regions distinctes de la page.

Quelle est la difference entre les elements article et section ?

Article represente un contenu autonome qui a du sens par lui-meme, comme un article de blog, une actualite, une fiche produit ou un message de forum. Section est un regroupement thematique de contenu qui necessite le contexte du reste de la page et comporte generalement un titre. Utilisez article pour du contenu independant et distribuable, et section pour diviser une page en zones thematiques.

Outils lies

Autres outils outils html

A essayer aussi

A essayer aussi