1. SRUCTURE GENERALE

1.1 Régions, titres et menus de navigation

1.1.1 Identifier les principales zones de la page avec l'attribut « role »

Les principales zones de la page doivent être identifiées à l’aide de la balise HTML5 correspondante. Dans le cas où vous ne pouvez modifier la balise, il faut rajouter l’attribut ARIA role qui lui correspond.

Cet attribut peut prendre plusieurs valeurs pour donner une sémantique à votre balise. Voici les balises HTML5 et les Aria role qui se correspondent :

L’attribut role peut être ajouté sur n’importe quelle balise HTML comme<div> ,<ul> , etc. à l’exception de la balise <form> (le role=”form” ne devrait pas se retrouver sur cette balise).

REMARQUES

Il est tout à fait possible d’imbriquer plusieurs rôles ARIA :role="search"  dans role="banner" par exemple.

Il est recommandé de ne pas charger la page en attributs role="navigation"  inutiles, d’identifier chaque système de pagination ou chaque lien, seuls les menus principaux doivent être identifiés (voir capture d'écran).

ASTUCES - BONIFICATION

Identifier les principales zones de la page avec l'attribut « id »ou une ancre nommée

ATTENTION

Une balise avec une bonne sémantique sera toujours utilisée en priorité par rapport à un attribut « role » saufpour certains rôles uniques qui doivent ce trouver dans la page, malgré sa balise HTML5 . Ex. La zone d’entête principale des pages, qui peut  entre-autres contenir le logo et le moteur de recherche, doit être balisée avec role="banner" même si la balise <header> a été choisi.

<header role="banner">
   ...
</header>

Rôles uniques :

• role="main" : associé au contenu principal de la page

• role="contentinfo" : associé aux informations relatives à l'auteur du site (par exemple, le copyright, crédits et/ou mentions légales).

• role="banner" : ne doit être employé qu’une seule fois sur la balise <header>  principale du site.

• role="search"  : associé à la recherche principale du site

CAPTURES D'ÉCRAN

Capture 1 : Exemple de rôle sur la page d’ICI Radio-Canada Première tel que présenté avec l’outil Tota11y.

1.1.2 Mettre en place une hiérarchie de titres logique et exhaustive avec les balises header

When headings are clear and descriptive, users can find the information they seek more easily, and they can understand the relationships between different parts of the content more easily.
WCAG 2.0 Headings and labels (en anglais - Nouvelle fenêtre)

Sur chaque page, pour baliser les titres, utiliser les balises de titres allant de <h1>  jusqu’à <h6>, si nécessaire. La structure des titres doit être à la fois logique et exhaustive.

C’est-à-dire :

• Qu’il ne doit pas y avoir de « sauts » ni d’incohérences dans la structure des titres (passage brutal d’un <h1>  à un <h3> sans <h2>  intermédiaire, par exemple).

• Que tous les éléments qui ont valeur de titres doivent être balisés comme tels.

<a href="/">
    <img src="logo.png" 
         alt="Logo du site" />
</a>
[…]
<h1>Titre de la page</h1>
[…]
<h2>Contacts</h2>
[…]
<h2>À lire également</h2>
[…]
<h2>Notre équipe</h2>
[…]

REMARQUES

Une bonne pratique d’accessibilité consiste à ne pas ajouter de titres cachés. Il est préférable de garder la même information pour tous : si l’usager voyant n’a pas besoin de ce titre, se demander pourquoi la personne non-voyante en aurait besoin, et vice versa.

HTML5

À partir de HTML5, il devient possible de mettre en place une hiérarchie de titres complète, à plusieurs niveaux, en utilisant uniquement la balise <h1>  et les nouvelles balises destinées à créer des sections dans le document, comme <article>  ou <section>. Il devient également possible de laisser des « sauts » dans la structure des titres.

Par contre, nous allons continuer à structurer les titres de manière logique et exhaustive, comme cela était fait avant HTML5. C’est-à-dire en utilisant les titres de <h1> à <h6> jusqu’à ce que le développement de HTML5 soit finalisé et que le langage soit bien pris en compte par les navigateurs et les aides techniques.

• Soit en ajoutant un seul  <h1> par page, le plus proche possible de la balise <body> (HTML4 et 5);

• Soit dans la balise <header> de la page (HTML5 seulement)

ASTUCES

Pour mettre en place une hiérarchie de titres logique et exhaustive, il faut imaginer que les titres forment la « table des matières » de la page. Est-ce que cette table des matières est logique? Exhaustive? Chapeaute-t-elle un contenu qui lui est associé?

ATTENTION

N'utilisez les balises de titre que pour leur sémantique. Une balise ne doit jamais être choisie par rapport au style qui lui est associé. Respecter la sémantique de la balise.

Exemple d’erreur courante :

• J’ai un <h2> dans ma colonne de droite et un <h2> dans ma colonne de gauche. Le titre de la colonne de gauche est plus petit sur la maquette alors je vais mettre un <h3> à la place

• J’ai un <h2>  dans mon document et un <h3>  pour ses contenus reliés : Comme ils sont visuellement pareil, je vais changer le <h3>  par un  <h2>

• Le style de ma balise <h3> conviendrait parfaitement à mon surtitre, je vais utiliser le <h3>  bien que ce ne soit pas un réel titre (date, thématique, etc...)

1.1.3 Structurer les menus de navigation avec des listes

Utiliser des listes non ordonnées <ul>  et <li>  pour baliser les menus de navigation.
Dans le cas d’un menu à plusieurs niveaux, veiller à la bonne imbrication des listes :

<ul id="menu-principal" role="navigation" aria-label="Menu principal">
   <li><a href="page-1.html">Item du menu 1</a></li>
   <li>
       <a href="page-2.html">Item du menu 2</a>
       <ul>
           <li><a href="page-3.html">Item du sous-menu 1</a></li>
           <li><a href="page-4.html">Item du sous-menu 2</a></li>
       </ul>
   </li>
   <li><a href="page-5.html">Item du menu 3</a></li>
</ul>

REMARQUES

La balise  <nav>  est à réserver uniquement pour englober des menus contenant des liens internes au site. Autrement dit, elle ne doit pas être utilisée pour englober une liste de liens pointant vers des sites externes. Comme une liste de liens vers des réseaux sociaux, par exemple.

HTML5

En HTML5, englober en plus les menus de navigation principaux avec une balise <nav> , de façon à obtenir :

<nav id="menu-principal" aria-label="Menu principal">    
      <ul>       
          […]    
      </ul> 
</nav>

Il est inutile et surtout mélangeant pour l’utilisateur de lecteur d’écran de retrouver plusieurs menus de navigation sur une même page. Seuls les principaux menus doivent être associés à cette balise (normalement 2 ou 3 maximums).

ASTUCES

Une bonne pratique consiste à ajouter l’attribut aria-label dans la balise  <nav> et de le renseigner en précisant le type de système de navigation dont il est question.

<header role="banner">[…]</header>
<nav aria-label="Menu principal">[…]</nav>
<nav aria-label="Menu secondaire">[…]</nav>
<main role="main">
   <nav aria-label="Fil d'Ariane">[…]</nav>
   […]
</main>
<footer role="contentinfo">[…]</footer>

ATTENTION

Dans une navigation « principale », les liens inclus ne devraient pas avoir d’attribut « title » comme « Titre (Accéder à la section) ».  Cela est explicite à cause de la valeur « navigation » de l’attribut « role » ou de la balise <nav> en HTML5.  

RESSOURCES

Voir aussi Conception graphique

1.2 Ordre du flux HTML

1.2.1 Écrire le code HTML en suivant la logique de l'ordre de lecture

L’ordre d’écriture des balises dans le flux HTML doit suivre la logique de l’ordre de lecture de la page.

C’est-à-dire que lorsqu’une balise précède immédiatement une autre balise lors du parcours visuel de la page, la première balise doit également précéder immédiatement la seconde dans le flux HTML.

ASTUCES

Pour tester ce critère, sans avoir à tester votre page avec un lecteur d’écran, il suffit de désactiver les CSS et de s’assurer que le résultat obtenu correspond bien à l’ordre de lecture de la page, lorsque les CSS sont activées.

Nous vous proposons l'installation du widget chrome disable-HTML (en anglais - Nouvelle fenêtre) pour désactiver rapidement, entre autre, les styles et les scripts de votre page. Vous pouvez aussi l'installer sur firefox.

 ATTENTION

Si des contenus sont masqués par défaut, veiller à leur bon positionnement dans le flux HTML lorsque les styles sont désactivés.

1.2.2 Veiller à la cohérence de l'ordre du flux HTML d'une page à l'autre

L’ordre d’intégration des principaux blocs dans le flux HTML doit rester cohérent d’une page à l’autre du site.

Par exemple, si le menu secondaire est placé après le contenu principal, il est important de conserver cet ordre sur l’ensemble des pages du site.

REMARQUES

Ce qu'on appelle un site, c'est un ensemble de pages qui regroupent un même thème. Ex. Une fiche d'émission télé, des pages d'informations régionales. En dehors de cette limite, le flux HTML peut changer. Ex. Il n'est pas nécessaire que le menu d'une émission télé se retrouve au même endroit que le menu d'une émission radio.

RESSOURCES

Voir aussi Conception graphique (cohérence visuelle de la navigation) et Conception graphique (moyen de navigation)

1.3 Permettre la redimension de la page

La page doit pouvoir être redimensionnée jusqu’à 200 % de sa grandeur initiale et offrir une lisibilité complète. S’il le faut, une barre de défilement horizontale doit s’afficher pour permettre la navigation jusqu’à l’extrémité droite de la page.

IOS 

Depuis iOS 10, afin d'améliorer l'accessibilité sur les sites Web dans Safari, les utilisateurs peuvent maintenant pincer pour zoomer même lorsqu'un site Web définit "user-scalable = no" dans la fenêtre d'affichage.

REMARQUES

Dès que la page s'adapte à son navigateur (responsive), son contenu va aussi s'adapter lors de l'utilisation du zoom. De cette façon, la navigation reste toujours optimale.

ASTUCES - BONIFICATION

Garantir l'absence de barre de défilement horizontale même lorsque la taille du texte est doublée par l'utilisateur.

ATTENTION

En mobilité, il faut laisser aux utilisateurs la possibilité de faire un zoom. Pour cela, les déclarations suivantes ne doivent pas être utilisées dans l'appel du metatag "viewport" de votre page :

• maximum-scale=1.0

• user-scalable=1

• user-scalable=no

Si vous utilisez bunker ou le gabarit de base de ici.radio-canada.ca (Nouvelle fenêtre), le metatag "viewport" sera déjà bien intégré dans vos pages (en cours).

<Meta Type="name" Name="viewport" Content="width=device-width, minimum-scale=1.0, initial-scale=1"/>

CAPTURES D'ÉCRAN

Capture 1 : Page d’une fiche télé, affichage à 100% (normal) : Affiche la version “desktop” du site

Capture 2 : Page d’une fiche télé, affichage à 200% (zoom) : Affiche la version “mobile” du site