Introduction - cas utilisateurs
Dans cette fiche, nous expliquons la structure de base d'une page web et les éléments primordiaux que vous devez mettre en place avant toute autre intégration. C'est le squelette de votre site web. Vous verrez comment structurer votre gabarit avec les éléments HTML5 et les landmarks ARIA.
Les utilisateurs aveugles ne perçoivent pas les mises en forme. Pourtant, celles-ci aident à la compréhension de la fonction de certaines régions de la page.
Par exemple, on trouve généralement le menu de navigation sous forme horizontale avec une certaine mise en exergue, de façon à faire comprendre que cet élément permet de naviguer dans le site. Pour un utilisateur aveugle, cette navigation n'est rien d'autre qu'une liste de liens, comme il peut y en avoir d'autres dans la page.
Utiliser des marqueurs sémantiques (balises HTML5 et landmarks ARIA) va permettre d'enrichir la restitution pour ces utilisateurs : la navigation principale ne sera plus perçue simplement comme une liste de liens, elle sera restituée à l'utilisateur comme un élément de navigation, par l’intermédiaire du lecteur d'écran. L'utilisateur peut alors la distinguer des autres listes de liens.
De plus, ces marqueurs sémantiques vont également constituer des éléments de navigation rapide dans la page. Grâce à un raccourci clavier, certains utilisateurs vont pouvoir naviguer entre les régions que vous aurez identifiées.
L'essentiel
Le DOCTYPE et la langue
Votre document doit débuter par une déclaration de doctype. Le W3C met à disposition une liste des doctypes valides utilisables sur le web.
Une fois cette déclaration faite, vous devez définir la langue de traitement principal de votre page. Si votre site est en français, alors vous devez déclarer du français.
<!DOCTYPE html>
<html lang="fr">
</html>
Un code source valide
Cette déclaration du type de document induit que vous respectez ensuite les normes d'écriture correspondantes, et notamment que votre code source est valide. Pour valider votre code source, utilisez toujours le code source généré (avec JavaScript) avec l'outil en ligne de validation du W3C.
Un code source valide est essentiel pour la robustesse du site et pour s'assurer d'un rendu homogène avec tous les navigateurs. En effet, un code mal structuré est généralement « réparé » par le navigateur. Mais tous les navigateurs ne réparent pas de la même manière, ce qui peut générer des différences importantes d'un navigateur à l'autre. Un code source valide est donc un prérequis essentiel, car il assure un code robuste et univoque.
L'outil en ligne sort deux types de résultats : les warnings et les errors. Seules les erreurs sont à prendre en compte. Le RGAA ne demande pas un code source valide à 100%.
Par exemple, les erreurs relatives à l'écriture des URL (notamment la présence d'esperluette dans les URL) ne sont pas considérées comme des erreurs d'accessibilité. Si ce sont les seules erreurs sur votre page web, alors votre code source est valide au regard du RGAA.
Pour le RGAA, un code source valide est un code source :
- dont les balises respectent les règles d'écriture (les balises sont conformes au type de document déclaré) ;
- dont l'imbrication des balises est conforme (par exemple, pas de lien imbriqué dans un autre lien) ;
- dont l'ouverture et la fermeture des balises sont conformes (par exemple, la règle « premier ouvert, dernier fermé » est respectée) ;
- dont les attributs respectent les règles d'écriture (par exemple, aucun élément obsolète n'est présent) ;
- dont les valeurs des attributs respectent les règles d'écriture (par exemple, les valeurs d'identifiant dupliquées ne sont pas conformes).
Éléments HTML5 et landmarks ARIA
À partir de la maquette graphique, avant de vous lancer dans l'intégration, observez et repérez :
- l'en-tête principal ;
- le contenu principal ;
- le pied de page (informations légales, etc.) ;
- le moteur de recherche ;
- la navigation principale et les éventuelles navigations secondaires.
À chacune de ces zones correspond une propriété ARIA particulière qui va permettre de les identifier avec certitude. Ces propriétés s'implémentent avec l'attribut role :
- l'en-tête principal :
role="banner" ;
- le contenu principal :
role="main" ;
- le pied de page (informations légales, etc.) :
role="contentinfo" ;
- le moteur de recherche :
role="search" ;
- la navigation principale et les éventuelles navigations secondaires :
role="navigation".
Dans le cas où votre site est en HTML5, chacune de ces zones est identifiée par une balise HTML5 particulière :
- l'en-tête principal :
<header> ;
- le contenu principal :
<main> ;
- le pied de page (informations légales, etc.) :
<footer> ;
- la navigation principale et les éventuelles navigations secondaires :
<nav>.
De plus, afin de créer des points de navigation, la zone de contenu et la navigation principale (et les éventuelles navigations secondaires) doivent être identifiées, à l’aide de l'un des procédés suivants :
- un attribut
id ;
- une ancre précédant immédiatement la zone ;
- une ancre avant le premier élément de la zone.
Si votre site est en HTML5, votre structure de départ doit ressembler à ceci :
<header role="banner">
</header>
<nav role="navigation" id="menu-de-navigation">
<ul>
<li>...</li>
</ul>
</nav>
<div role="search">
<form>
</form>
</div>
<main role="main" id="contenu-principal">
</main>
<footer role="contentinfo">
</footer>
Si votre site utilise une autre déclaration de doctype (XHTML, HTML4.0…), vous devez simplement implémenter les landmarks ARIA sur les éléments correspondants. La structure doit ressembler à ceci :
<div role="banner">
</div>
<div role="navigation" id="menu-de-navigation">
<ul>
<li>...</li>
</ul>
</div>
<div role="search">
<form>
</form>
</div>
<div role="main" id="contenu-principal">
</div>
<div role="contentinfo">
</div>
Important :
- On peut trouver plusieurs balises
header, mais le role="banner doit être unique dans la page.
- La balise
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.
- On peut trouver plusieurs balises
nav et plusieurs role="navigation"
- Le
role="search" est unique dans la page.
Comment déterminer ce qu'est…
L'en-tête principal ?
L'en-tête principal est généralement le titre de votre site, avec sa baseline, si elle existe.
Très souvent, il s'agit du titre de niveau 1 de votre site (h1).
L'en-tête principal contient généralement peu d'éléments.
Le contenu principal ?
Le contenu principal d'une page est le contenu d'intérêt. C'est le contenu qui donne un sens à votre page et sans lequel votre page est inutile.
Les navigations principales et secondaires ?
Pour rappel, le RGAA 3 demande à ce que le site possède deux systèmes de navigation parmi : une navigation principale, un plan du site et un moteur de recherche.
La navigation principale, généralement appelée le « menu », est un élément que l'on retrouve sur toutes les pages de votre site web. C'est celle que l'on retrouve en début de contenu pour atteindre les rubriques principales de votre site.
Très souvent, on rencontre également des navigations contextuelles dans des rubriques spécifiques. Ces éléments sont à considérer comme des navigations secondaires et doivent être implémentés de la même manière que la navigation principale.
Astuce : Afin de permettre aux utilisateurs qui naviguent avec un lecteur d'écran de distinguer toutes les navigations que vous aurez définies, vous pouvez les titrer grâce à la propriété aria-label.
<nav role="navigation" aria-label="menu principal"></nav>
<nav role="navigation" aria-label="menu rubrique formations"></nav>
Le moteur de recherche ?
Le moteur de recherche peut être une alternative intéressante pour les utilisateurs qui ne pourraient pas utiliser le menu ou le plan du site. Pour qu'il soit considéré comme une alternative, il faut néanmoins qu'il permette, à partir de ses résultats, d’atteindre n'importe quel contenu du site.
Ainsi, un moteur de recherche limité à un catalogue ne peut pas être considéré comme un système de navigation.
Le pied de page ?
Le pied de page est à considérer comme étant un élément qui apporte des informations sur le site. On va y placer généralement, si elles sont présentes, les informations légales (copyright, lien vers les mentions légales…), les informations de contact (adresse, téléphone…).
La région de pied de page n'est pas nécessairement équivalente au pied de page de la maquette graphique.
Souvent, dans le pied de page des maquettes de site web, on trouve des éléments comme la répétition de la navigation (sorte de plan du site en pied de page). Cet élément n'est pas à inclure dans le pied de page (footer role="contentinfo").
Pourquoi doubler les balises HTML5 avec les landmarks ARIA ?
Ajouter les landmarks ARIA aux balises HTML5 correspondantes permet de distinguer les autres éléments du même type qui pourraient être utilisés.
Vous pourriez mettre plusieurs balises header ou footer dans votre structure de site. Ces balises pouvant être contenus dans des balises article ou section pour créer des en-têtes d'articles et des pieds d'article. Ajouter les landmarks permet de différencier toutes ces balises des balises structurant le corps principal de la page.
Le validateur ressort une alerte (warning), mais ce n'est pas une erreur. L'alerte correspond simplement au fait que les balises HTML5 ont déjà des rôles implicites correspondant à ces propriétés (banner est le rôle implicite de la balise header). L'alerte vous signifie simplement que l'utilisation de ces rôles est peut-être inutile. Néanmoins, pour les raisons évoquées au-dessus, la position du RGAA 3 reste stricte à ce sujet.
Vous pouvez consulter à ce sujet les rôles ARIA implicites sur les éléments HTML.
Utilisation optimale
Afin de rendre l'utilisation des régions (balise HTML5 et landmarks) optimale, il est toujours préférable de ne pas inclure dans l'en-tête la navigation principale par exemple. De manière générale, il est préférable de ne pas imbriquer les régions principales définies ici.