ARIA : rôle landmark
Le rôle landmark est une superclasse abstraite pour les valeurs de rôle ARIA pour les sections de contenu qui sont suffisamment importantes pour que les utilisateur·ice·s souhaitent probablement pouvoir y naviguer directement. Un repère (landmark) est une sous-section importante d'une page.
Note :
Le rôle landmark est un rôle abstrait. Il est inclus ici pour compléter la documentation. Il ne doit pas être utilisé par les développeur·euse·s web.
Description
Un landmark est un rôle abstrait pour une section de contenu qui est suffisamment importante pour que les utilisateur·ice·s souhaitent probablement pouvoir y naviguer facilement et l'inclure dans un résumé généré dynamiquement de la page. Les repères permettent aux technologies d'assistance de naviguer et de trouver rapidement du contenu.
Pour créer un rôle de repère, définissez l'objectif du contenu en utilisant un élément sémantique tel que <section>, <nav> ou <main>, ou en ajoutant un rôle ARIA qui est une sous-classe du rôle landmark, tel que role="banner", role="complementary" ou role="region". Ne pas utiliser role="landmark".
Chaque rôle de repère concret possède son élément HTML sémantique correspondant :
| Rôle ARIA | Élément HTML |
|---|---|
banner |
<header> |
complementary |
<aside> |
contentinfo |
<footer> |
form |
<form> |
main |
<main> |
navigation |
<nav> |
region |
<section> |
search |
<search> |
Une étiquette visible doit être fournie, référencée avec aria-labelledby. Si nécessaire, une étiquette brève et descriptive peut être fournie avec aria-label.
Pour les utilisateur·ice·s de lecteurs d'écran, l'ajout de rôles de repère crée effectivement des « liens de saut » pour les utilisateur·ice·s de lecteurs d'écran, mais ne remplace pas la navigation dans la page car les rôles de repère ne sont pas exposés autrement.
Bonnes pratiques
N'utilisez pas role="landmark" : utilisez plutôt les rôles de repère de sous-classe appropriés, ou les éléments HTML sémantique si possible. Bien que cela ne soit plus nécessaire, il est considéré comme une bonne pratique d'inclure de façon redondante les rôles de repère de sous-classe avec l'élément sémantique associé pour les anciens navigateurs. Cela reste préférable à l'utilisation de rôles de repère sur des éléments non sémantiques, comme <div> ; mais utilisez au moins l'un des rôles ou des éléments sémantiques pour créer des repères. Sinon, votre contenu sera moins navigable pour les utilisateur·ice·s de lecteurs d'écran.
Spécifications
| Specification |
|---|
| Accessible Rich Internet Applications (WAI-ARIA) # landmark |
Voir aussi
- ARIA : rôle
section - ARIA : rôle
banner - ARIA : rôle
complementary - ARIA : rôle
contentinfo - ARIA : rôle
form - ARIA : rôle
main - ARIA : rôle
navigation - ARIA : rôle
region - ARIA : rôle
search - Le billet de blog Utilisation des rôles de repères HTML pour améliorer l'accessibilité (angl.) sur le blog du MDN (2023)