La structure d’une page web joue un rôle fondamental dans son accessibilité. Une structure bien conçue permet aux utilisateurs d’interagir avec le contenu de manière logique et cohérente, en utilisant différents outils tels que les lecteurs d’écran, les claviers… En suivant les bonnes pratiques de structuration, vous pouvez rendre votre page accessible à un public plus large et offrir une expérience utilisateur inclusive.

Définissez une structure logique de la page

Les balises HTML 

Commencez par divisez votre page en zones distinctes.

• L’entête
• La navigation
• Le contenu principal
• …

en utilisant des balises HTML spécifiques utilisées pour structurer et organiser le contenu d’une page web.

Ces balises, <main>, <nav>, <aside>, <footer> etc., définissent des sections sémantiques distinctes qui aident à clarifier la structure et l’organisation du contenu.

Ces éléments ont des rôles sémantiques prédéfinis.

Par exemple :

• l’élément <main> est destiné à contenir le contenu principal de la page,
• tandis que l’élément <nav> est utilisé pour regrouper les liens de navigation.
• <header> : Indique que l’élément est l’en-tête de la page ou d’une section.
• <article> : Indique que l’élément est un contenu autonome, comme un article de blog ou une publication.
• <aside> : Indique que l’élément contient du contenu complémentaire ou des informations secondaires.
• <footer> : Indique que l’élément est le pied de page de la page ou d’une section….

Ces rôles sémantiques aident les navigateurs, les technologies d’assistance et les moteurs de recherche à mieux comprendre la structure de la page et à fournir une expérience utilisateur améliorée.

Les rôles ARIA

Attribuez un rôle ARIA a chaque balise HTML pour une fournir des informations plus précises sur la signification et la structure de l’élément, et s’assurer ainsi d’une meilleure compréhension par les technologies d’assistance.

• banner,
• main,
• complementary
• contentinfo
• Navigation

Ils doivent être utilisés ainsi :

Zone d’entête principale :<header role= »banner »>

Zone de contenu principale : <main role= »main »>

Zone d’informations relatives au site : <footer role= »contentinfo »>

Zone de menu de navigation principal : <nav role= »navigation »>

Des exemples

<nav role= »navigation » aria-label= »Menu principal »> <!– Contenu du menu de navigation –></nav>

Dans cet exemple, la balise HTML <nav> est renforcée avec le rôle ARIA role= »navigation » pour indiquer explicitement que l’élément contient un menu de navigation. L’attribut ARIA aria-label est utilisé pour fournir une étiquette ou une description textuelle du contenu du menu de navigation.

<main role= »main » aria-labelledby= »main-heading »><h1 id= »main-heading »>Titre du contenu principal</h1>

<!– Contenu principal de la page –>

</main>

Dans ce second exemple, la balise HTML <main> est renforcée avec le rôle ARIA role= »main » pour indiquer que l’élément contient le contenu principal de la page. L’attribut ARIA aria-labelledby est utilisé pour associer un identifiant (main-heading) à l’élément <h1> qui contient le titre du contenu principal, afin de fournir une référence explicite au titre pour les technologies d’assistance.

<footer role= »contentinfo » aria-label= »Informations complémentaires »>

  <!– Contenu du pied de page –>

</footer>

Dans ce troisième exemple, la balise HTML <footer> est renforcée avec le rôle ARIA role= »contentinfo ». Ce rôle ARIA indique que l’élément représente des informations complémentaires qui ne sont pas directement liées au contenu principal de la page. L’attribut ARIA aria-label est utilisé pour fournir une étiquette ou une description textuelle des informations complémentaires contenues dans le pied de page.

L’utilisation du rôle ARIA role= »contentinfo » renforce la balise sémantique HTML <footer>, en précisant explicitement le type d’informations fournies dans le pied de page. Cela permet aux technologies d’assistance de mieux comprendre la fonction et la signification de l’élément, offrant ainsi une expérience plus accessible pour les utilisateurs.

Définissez la structure du contenu

Une fois que la page balisée avec les éléments de sectionnement HTML appropriés, utilisez  les balises <h1>, <h2>, <h3>, etc. pour organiser le contenu avec des titres, des sous titres….

Les balises de titres <h1>, <h2>, <h3>, etc. sont utilisées pour définir la hiérarchie des titres dans la page.

La balise <h1> est utilisée pour le titre principal de la page, tandis que les balises <h2>, <h3>, etc. sont utilisées pour les sous-titres et les sections de contenu.

Règles importantes concernant les balises HTML et les rôles ARIA

L’attribut role= »banner » doit être utilisé de manière unique dans une page. La spécification WAI-ARIA (Accessible Rich Internet Applications) pour représenter la section d’en-tête principale du site.

L’élément HTML <header> peut être utilisé plusieurs fois dans une page pour représenter des en-têtes spécifiques à des sections ou à des articles individuels. Par exemple, vous pouvez avoir un en-tête distinct pour chaque article sur une page de blog.

La balise HTML <main> et le role= »main » sont uniques dans la page.

On peut trouver plusieurs balises <footer>, mais le role= »contentinfo » doit être unique dans la page.

Il est possible d’avoir plusieurs balises <nav> et d’utiliser le rôle ARIA role= »navigation » pour chacune d’entre elles.

Pour différencier les différentes balises <nav> et leurs rôles de navigation associés, vous pouvez utiliser des techniques telles que l’ajout d’étiquettes ou de descriptions supplémentaires pour chaque menu de navigation. Cela permet aux utilisateurs et aux technologies d’assistance de comprendre clairement le but et le contenu de chaque menu de navigation.

Par exemple: 

<nav role= »navigation » aria-label= »Menu principal »> <!– Contenu du menu principal –></nav>

<nav role= »navigation » aria-label= »Menu secondaire »> <!– Contenu du menu secondaire –></nav>

Dans cet exemple, l’attribut aria-label est utilisé pour fournir une étiquette descriptive à chaque menu de navigation. Cela aide les utilisateurs à comprendre la différence entre les deux menus en fonction de leur objectif.

Le role= »search » est unique dans la page.