Notice d'accessibilité HTML et CSS

Les principales zones de la page doivent être identifiées à l'aide de l'attribut ARIAAccessible Rich Internet Applications role.

Cet attribut peut prendre plusieurs valeurs pour délimiter des zones, parmi lesquelles :

• role="banner" pour délimiter une zone de contenu qui identifie le site, comme une bannière avec un logo, un slogan et/ou un champ de recherche ;
• role="search" pour délimiter une zone destinée à la recherche, comme un formulaire de recherche ;
• role="navigation" pour délimiter les menus ou les éléments de navigation principaux ;
• role="main" pour délimiter la zone de contenu principal de la page.

Attention
Une page ne doit contenir qu'un seul role="main".

<nav role="navigation">
    [&#8230;]
</nav>

Exemple▲

À noter que role="navigation" a été ajouté sur le menu principal ainsi que sur le menu secondaire.

Outil pratique▲

Ressource▲

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.

Astuce
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-elle logique ? Exhaustive ?

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.
Toutefois, il est préférable, pour le moment, de 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>. Ceci, 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.

Exemples▲

Ci-dessous, trois exemples de structuration de titres pour cette page. Les deux premiers sont corrects tandis que le troisième est incorrect.

 

Sélectionnez

<h1><a href="/"><img src="atos.png" alt="Atos (aller à l'accueil)" title="Atos (aller à l'accueil)" /></a></h1>
[&#8230;]
<h2>Mission Handicap</h2>
[&#8230;]
<h3>Contact</h3>
[&#8230;]
<h3>Ils vous parlent de valeurs...</h3>
<h4>Eric, consultant :</h4>
[&#8230;]
<h4>Fabrice Narbeburu, Responsable Mission Handicap France :</h4>
[&#8230;]

Dans cet exemple de code HTML, la structure des titres est logique et exhaustive.

 

Sélectionnez

<a href="/"><img src="atos.png" alt="Atos (aller à l'accueil)" title="Atos (aller à l'accueil)" /></a>
[&#8230;]
<h1>Mission Handicap</h1>
[&#8230;]
<h2>Contact</h2>
[&#8230;]
<h2>Ils vous parlent de valeurs...</h2>
<h3>Eric, consultant :</h3>
[&#8230;]
<h3>Fabrice Narbeburu, Responsable Mission Handicap France :</h3>
[&#8230;]

Dans cet exemple de code HTML, la structure des titres est également logique et exhaustive.

À noter que d'autres structurations de titres sont envisageables.

 

Sélectionnez

<a href="/"><img src="atos.png" alt="Atos (aller à l'accueil)" title="Atos (aller à l'accueil)" /></a>
[&#8230;]
<h2>Mission Handicap</h2>
[&#8230;]
<h4>Contact</h4>
[&#8230;]
<p>Ils vous parlent de valeurs...</p>
<h6>Eric, consultant :</h6>
[&#8230;]
<h6>Fabrice Narbeburu, Responsable Mission Handicap France :</h6>
[&#8230;]

Dans cet exemple de code HTML, la structure des titres est incorrecte car elle comporte des « sauts » et des incohérences (passage brutal d'un <h2> à un <h4> sans <h3> intermédiaire, par exemple). Aussi, le titre « Ils vous parlent de valeurs… » n'est pas balisé comme tel.

Outil pratique▲

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">
    <li><a href="page-1.html">Premier item du menu</a></li>
    <li>
        <a href="page-2.html">Deuxième item du menu</a>
        <ul>
            <li><a href="page-3.html">Premier item du sous-menu</a></li>
            <li><a href="page-4.html">Deuxième item du sous-menu</a></li>
        </ul>
    </li>
    <li><a href="page-5.html">Troisième item du menu</a></li>
</ul>

<nav id="menu-principal" role="navigation">
    <ul>
       [&#8230;]
    </ul>
</nav>

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 doit également précéder immédiatement la seconde dans le flux HTML.

Astuce
Pour tester cette recommandation, 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.

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.

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.

Sur chaque page, la balise <title> doit être renseignée avec précision.

Elle doit au minimum annoncer le nom de la page courante ainsi que le nom du site.

Remarque
Le nom de la page courante doit apparaître en premier dans la balise <title>. Il est par exemple possible d'opter pour <title>[Nom de la page courante] | [Nom du site]</title>.

<title>Résultats de votre recherche sur "[Expression recherchée]" (page 3/7) | [Nom du site]</title>

Astuce
Une bonne pratique d'accessibilité consiste à veiller à la cohérence de l'ordre des contenus de la balise <title> sur l'ensemble des pages du site.

Afin de garantir la bonne restitution des contenus textuels à l'utilisateur, une déclaration de codage des caractères doit être effectuée sur chaque page, par exemple à l'aide de la balise <meta> suivante :

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    [&#8230;]
</head>

Cette balise <meta> doit être insérée le plus haut possible dans la page HTML, avant tout contenu affiché à l'écran, et de préférence immédiatement après l'ouverture de la balise <head>.

HTML5
HTML5 simplifie l'écriture de la balise <meta> destinée à la déclaration de codage. Ainsi, si vous optez pour ce type de document, il suffit alors d'utiliser par exemple : <meta charset="UTF-8">.

Afin de garantir la bonne restitution des contenus textuels à l'utilisateur, une déclaration de langue principale doit être effectuée sur chaque page. Utiliser pour cela l'attribut lang sur la balise <html>.

Par exemple, pour une page en français :

<html lang="fr">

Si des contenus sont proposés dans une langue différente de la langue principale, alors ils doivent être signalés avec l'attribut lang.

Par exemple, dans le cas d'une page en français :

<ul>
    <li>Version française</li>
    <li><a href="http://website.co.uk" lang="en">English version</a></li>
</ul>

Astuce
Si aucune balise n'encadre directement le contenu en langue étrangère, alors utiliser la balise <span> ou <div> et renseigner son attribut lang.

Sur chaque page, un DOCTYPE doit être utilisé et le code HTML doit être valide selon les règles de grammaire de ce dernier (le choix du DOCTYPE est libre).

Il est particulièrement important de veiller à :

• la correcte imbrication des balises ;
• la correcte ouverture et fermeture des balises ;
• l'absence d'attributs dupliqués sur une même balise ;
• l'unicité des valeurs de l'attribut id au sein d'une même page.

Remarque
Seules les erreurs de validation sont à corriger. Les avertissements renvoyés par le validateur ne sont pas à prendre en compte dans le cadre de cette recommandation car sans impact sur l'accessibilité.

Attention
La mise en place d'attributs ARIA dans le code HTML est un vrai bénéfice pour l'accessibilité mais invalidera le code source si la page n'est pas servie en HTML5. Le cas échéant, les erreurs remontées suite à la mise en place de ces attributs ne sont pas à corriger.

Les balises et attributs HTML destinés exclusivement à la mise en forme ne doivent pas être utilisés :

• c'est le cas des attributs : align, alink, background, basefont, bgcolor, border, color, link, text, vlink, height et width ;
• ainsi que les balises : <basefont>, <blink>, <center>, <font>, <marquee>, <s>, <strike>, <tt> et <u>.

Utiliser CSS pour obtenir le rendu visuel souhaité.

Les balises HTML doivent être utilisées pour leur valeur sémantique, et non pour leur rendu visuel.

Par exemple :

Lorsqu'une image décorative ou illustrative est intégrée dans le code HTML, l'attribut alt doit être ajouté sur la balise <img /> et laissé vide (sans aucun espace entre les guillemets de alt="").

<img src="image-decorative.png" alt="" />

Astuce
Afin de savoir à coup sûr si une image est décorative/illustrative ou informative, se demander si l'absence de celle-ci altérerait la compréhension du contenu. Si oui : renseigner le texte de remplacement ; si non : laisser le texte de remplacement vide.

Remarque
Autant que possible, les images décoratives ne doivent pas être intégrées dans le code HTML, mais chargées dans la page via CSS.

Exemple▲

Dans cet exemple, les images décoratives et illustratives sont pointées. Si elles sont intégrées dans le code HTML et non cliquables, elles doivent alors disposer d'une alternative vide (alt="").

Les CSS ne doivent jamais être utilisées pour afficher les images porteuses d'informations.

En d'autres termes, chaque fois qu'une image apporte de l'information, elle doit être intégrée en dur dans le code HTML, la plupart du temps avec la balise <img />.

Remarque
L'usage de sprites (images chargées en arrière-plan via CSS) n'est donc pas autorisé pour les images porteuses d'informations.

<a href="/" id="logo">[Le texte de mon logo]</a>

a#logo
{
display: block;
background: url(images/logo.png);
text-indent: -999999px;
width: 300px;
height: 100px;
}

<a href="/" id="logo"><img src="images/logo.png" alt="[Le texte de mon logo]" /></a>

Lorsqu'une image informative est intégrée dans le code HTML :

• un attribut alt doit être ajouté sur la balise <img /> ;
• cet attribut alt doit être renseigné avec une information égale ou équivalente à celle véhiculée par l'image.

Attention
Il est fortement déconseillé de rédiger le texte de remplacement d'une image en commençant par alt=Image […]. Cette information est implicite et pourra être restituée aux utilisateurs d'aides techniques.

<img src="images/carte-implantations.png" alt="La liste des pays dans lesquels la marque Spartacus est présente sur le globe (description détaillée disponible via le lien ci-après)" />
<a href="/zones-d-implantations/">Voir la liste des pays dans lesquels la marque Spartacus est présente</a>

Exemple▲

Dans cet exemple, les images informatives sont pointées. Elles doivent être intégrées dans le code HTML et disposer d'une alternative reprenant les textes inclus dans les images tel que <img src="generali-epargne.png" alt="Generali Épargne - Assurance vie." /> et <img src="epargne-2012-2013.png" alt="3,375% nets garantis en 2012 et 2013." />.

Lorsqu'une image mappée est intégrée dans le code HTML :

• un attribut alt doit être rajouté sur la balise <img /> ainsi que sur chaque balise <area /> ;
• l'attribut alt de la balise <img /> doit annoncer la fonction de l'image mappée ;
• l'attribut alt de chaque balise <area /> doit exprimer la fonction du lien.

Par exemple, dans le cas d'une carte de France où chaque département est cliquable et mène l'utilisateur vers une fiche associée au département :

<img src="images/carte-france.png" alt="Carte de France" usemap="#carte-france" />
<map name="carte-france">
    <area shape="poly" coords="[&#8230;]" href="ain.html" alt="Ain (01)" />
    <area shape="poly" coords="[&#8230;]" href="aisne.html" alt="Aisne (02)" />
    <area shape="poly" coords="[&#8230;]" href="allier.html" alt="Allier (03)" />
    [&#8230;]
</map>

Chaque fois qu'une image mappée est utilisée, les balises <map> et <area /> doivent immédiatement suivre la balise <img /> associée dans l'ordre du flux HTML.

Autant que possible, l'intitulé des liens et des boutons doit être explicite. C'est-à-dire que la fonction du lien ou du bouton doit être parfaitement compréhensible à la lecture du seul intitulé.

Cet intitulé correspond au texte contenu :

• entre les balises <a> et </a> ;
• entre les balises <button> et </button> ;
• dans l'attribut alt dans le cas d'un <input type="image" /> ;
• dans l'attribut value dans le cas des <input type="button" /> ou <input type="submit" />.

Ainsi, plutôt que des boutons « OK » ou des liens « Retour », privilégier :

<input type="submit" value="S'inscrire" />
<a href="panier.html">Retour à l'étape 1 : "Votre panier"</a>

Astuce
Pour rédiger des intitulés explicites, il faut imaginer que les intitulés sont extraits de la page et lus en dehors de tout contexte. Restent-ils compréhensibles ? Permettent-ils de se faire une idée du contenu de la page de destination ou de l'action à effectuer ?

<a href="/derniers-changements/"><img src="images/pictogramme-attention.png" alt="Attention : " />Veillez à prendre en considération les derniers changements apportés à Canelis avant toute utilisation.</a>

Attention
Les liens et les boutons ne doivent jamais être vides et doivent donc toujours posséder un intitulé.

Certains intitulés de liens ou de boutons ne peuvent pas être rendus explicites (manque d'espace disponible à l'écran, choix éditorial, etc.). C'est souvent le cas par exemple pour les liens du type « Lire la suite » ou « En savoir plus ».

Dans ces situations, c'est l'attribut title qui doit alors être utilisé pour préciser la fonction du lien ou du bouton.

La valeur de l'attribut title doit successivement :

• reprendre une information identique ou équivalente à celle véhiculée par l'intitulé ;
• compléter l'information fournie par l'intitulé.

Par exemple, dans le cas d'un lien « Juillet 2012 » :

<a href="archives/2012/07/" title="Juillet 2012 (lire les articles du mois)">Juillet 2012</a>

Attention
L'utilisation de l'attribut title pour expliciter un intitulé sera toujours moins accessible que l'optimisation directe de l'intitulé. Le contenu de l'attribut title ne s'affiche pas par défaut lors de la navigation au clavier ou sur un écran tactile, par exemple.
Cet attribut ne doit donc être utilisé qu'en dernier recours.

<a href="entree-en-bourse.html" title="Entrée en bourse de la société Boursicota (lire la suite)">Lire la suite</a>

<input type="submit" value="Rechercher" title="Rechercher une actualité" />
[&#8230;]
<input type="submit" value="Rechercher" title="Rechercher une personne dans l'annuaire" />

Chaque fois qu'un lien ou un bouton pointe sur un document à télécharger, les informations suivantes doivent être intégrées dans l'intitulé :

• le nom du document ;
• le format du document ;
• le poids du document.

Par exemple :

<a href="rapport-annuel-2011.pdf">Télécharger le rapport annuel 2011 (PDF, 23 Mo)</a>

<a href="rapport-annuel-2011.pdf">
    Télécharger le rapport annuel 2011 (23 Mo)
    <img src="images/pictogramme-pdf.png" alt="(PDF)" title="(PDF)" />
</a>

Remarque
Parfois, l'intitulé ne peut être modifié pour intégrer ces informations. Dans cette situation, et en dernier recours, utiliser l'attribut title sur le lien ou le bouton pour reprendre et compléter l'intitulé.

Chaque fois qu'un lien ou un bouton déclenche l'ouverture forcée d'une nouvelle fenêtre dans le navigateur, l'utilisateur doit être prévenu :

• soit par l'ajout d'une mention du type « (nouvelle fenêtre) », directement dans l'intitulé ;
• soit par l'ajout d'une image dans l'intitulé, avec texte de remplacement renseigné ;
• soit par l'ajout d'une mention du type « (nouvelle fenêtre) », dans l'attribut title.

Par exemple :

<a href="cgv.html" target="_blank">Conditions Générales de Vente (nouvelle fenêtre)</a>
<a href="cgv.html" target="_blank">Conditions Générales de Vente<img src="images/pictogramme-nouvelle-fenetre.png" alt="(nouvelle fenêtre)" title="(nouvelle fenêtre)" /></a>
<a href="cgv.html" target="_blank" title="Conditions Générales de Vente (nouvelle fenêtre)">Conditions Générales de Vente</a>

Chaque champ de formulaire doit être associé à un intitulé.

Pour cela, procéder de la sorte.

1. Utiliser <label> pour baliser chaque intitulé.
2. Ajouter un attribut for sur chaque balise <label> ainsi qu'un attribut id sur chaque champ.
3. Renseigner avec une valeur identique les attributs id et for de chaque couple intitulé/champ.

<label for="nom">Votre nom</label>
<input type="text" id="nom" name="nom" />
[&#8230;]
<label for="annee-naissance">Votre année de naissance</label>
<select id="annee-naissance" name="annee-naissance">
    <option value="2012">2012</option>
    <option value="2011">2011</option>
    <option value="2010">2010</option>
    <option value="2009">2009</option>
    [&#8230;]
</select>

<input type="text" title="Votre recherche" name="recherche" />

Attention
Il est important de prévoir des intitulés identiques pour les champs dont la fonction est identique.
Par exemple, si plusieurs formulaires d'identification sont présents dans le site, ne pas utiliser l'intitulé « Identifiant » pour l'un et « Login » pour l'autre.

Les informations utiles à la saisie doivent être intégrées directement dans les balises <label>.

C'est notamment le cas :

• des mentions du type « Champ obligatoire » ;
• des indications qui permettent de connaître le format de saisie attendu, du type « JJ/MM/AAAA » pour un format de date ;
• des indications qui permettent de connaître le type et le poids maximal autorisé pour l'envoi de fichiers ;
• etc.

<p>Les champs marqués d'un astérisque (*) sont obligatoires.</p>
<label for="nom">Votre nom *</label>
<input type="text" id="nom" name="nom" />
[&#8230;]
<label for="numero-client">
    Votre numéro de client
    <input type="text" id="numero-client" name="numero-client" />
    <em>Par exemple : 76432-BT-VZ</em>
</label>

<p>Les champs marqués d'un astérisque (*) sont obligatoires.</p>
[&#8230;]
<label for="email">
    Votre adresse email *
    <input type="text" id="email" name="email" />
    <span class="erreur">Veuillez renseigner votre adresse email (format attendu : exemple@domaine.fr).</span>
</label>

Lorsqu'un formulaire propose plusieurs groupes de champs, dont certains ont des intitulés identiques, utiliser les balises <fieldset> et <legend>.

Par exemple :

<fieldset>
    <legend>Participant 1</legend>
    <label for="prenom-1">Prénom</label>
    <input type="text" id="prenom-1" name="prenom-1" />
    <label for="nom-1">Nom</label>
    <input type="text" id="nom-1" name="nom-1" />
    [&#8230;]
</fieldset>
<fieldset>
    <legend>Participant 2</legend>
    <label for="prenom-2">Prénom</label>
    <input type="text" id="prenom-2" name="prenom-2" />
    <label for="nom-2">Nom</label>
    <input type="text" id="nom-2" name="nom-2" />
    [&#8230;]
</fieldset>

<fieldset>
    <legend>Civilité</legend>
    <ul>
        <li>
            <label for="madame">
                <input id ="madame" type="radio" name="civilite" value="Mme" />
                Madame
            </label>
        </li>
        <li>
            <label for="monsieur">
                <input id ="monsieur" type="radio" name="civilite" value="M." />
                Monsieur
            </label>
        </li>
    </ul>
</fieldset>

Exemple▲

 

Sélectionnez

<h1>Réservez votre voyage</h1>
<h2>Train</h2>
<p>Réservez en une seule fois et économisez !</p>
[&#8230;]
<h3>Où et quand souhaitez-vous partir ?</h3>
[&#8230;]
<h3>Qui participe à ce voyage</h3>
[&#8230;]
<fieldset>
     <legend>Voyageur 1</legend>
     [&#8230;]
</fieldset>
<fieldset>
     <legend>Voyageur 2</legend>
     [&#8230;]
</fieldset>
[&#8230;]

Dans cet exemple, les textes « Réservez votre voyage », « Train », « Où et quand souhaitez-vous partir ? » et « Qui participe à ce voyage » peuvent être structurés avec des balises de titres.

Les textes « Voyageur 1 » et « Voyageur 2 » doivent par contre être structurés avec <fieldset> et <legend> ; ces derniers titrant des intitulés de champs identiques (« Passager », « Carte et abonnement » et « Programme de fidélité »).

Lorsque des listes déroulantes sont utilisées, les options qu'elles contiennent doivent être ordonnées de manière logique.

L'ordre logique dépend du contexte, mais il peut s'agir notamment :

• d'un ordre alphabétique (une liste de langues, par exemple) ;
• d'un ordre numérique (une liste de départements, par exemple) ;
• d'un ordre pratique (« France » en premier dans un formulaire d'inscription à un service français).

<select>
    <option>--Allemagne</option>
    <option>--Belgique</option>
    <option>--Espagne</option>
    <option>--France</option>
    <option>--Italie</option>
</select>

<select>
    <option>Allemagne</option>
    <option>Belgique</option>
    <option>Espagne</option>
    <option>France</option>
    <option>Italie</option>
</select>

Chaque fois qu'un formulaire renvoie une erreur ou un message de confirmation, la balise <title> de la page doit être mise à jour.

Par exemple, dans le cas d'une réussite :

<title>Confirmation - Formulaire de contact | [Nom du site]</title>

Et, dans le cas d'une erreur :

<title>Erreur - Formulaire de contact | [Nom du site]</title>

Chaque fois qu'un CAPTCHA graphique est utilisé, indiquer dans son alternative textuelle où se trouve la version non graphique du CAPTCHA.

Souvent, il s'agit d'une version audio, opter alors par exemple pour :

<img src="captcha.png" alt="CAPTCHA (image antispam). Si vous n'y avez pas accès, utilisez la version sonore disponible ci-après." />

Utiliser les balises <ul> et <li> pour baliser les listes d'éléments pour lesquelles l'ordre n'a pas d'importance (menus, onglets, boutons de partage, plan du site, etc.).

Le cas échéant, veiller à la bonne imbrication des listes :

<ul>
    <li>Premier item de premier niveau</li>
    <li>
        Deuxième item de premier niveau
        <ul>
            <li>Premier item de deuxième niveau</li>
            <li>Deuxième item de deuxième niveau</li>
        </ul>
    </li>
    <li>Troisième item de premier niveau</li>
</ul>

Utiliser les balises <ol> et <li> pour baliser les listes d'éléments pour lesquelles l'ordre a de l'importance (liste d'étapes dans un processus, classement quelconque, etc.). C'est-à-dire lorsque l'information ne serait plus comprise si les éléments étaient placés dans un ordre différent.

Le cas échéant, veiller à la bonne imbrication des listes :

<ol>
    <li>Premier item de premier niveau</li>
    <li>
        Deuxième item de premier niveau
        <ul>
            <li>Premier item de deuxième niveau</li>
            <li>Deuxième item de deuxième niveau</li>
        </ul>
    </li>
    <li>Troisième item de premier niveau</li>
</ol>

Utiliser les balises <dl>, <dt> et <dd> pour baliser les listes de définitions (dans un glossaire par exemple).

Il est possible d'associer plusieurs définitions à un seul terme en procédant de la manière suivante :

<dl>
    <dt>Terme 1</dt>
    <dd>Définition du terme 1.</dd>
    <dt>Terme 2</dt>
    <dt>1. Première définition du terme 2.</dt>
    <dt>2. Deuxième définition du terme 2.</dt>
</dl>

<h2>Conférence sur le développement durable</h2>
<dl>
    <dt>Lieu</dt>
    <dd>Paris</dd>
    <dt>Date</dt>
    <dd>Samedi 29 septembre 2012</dd>
    <dt>Heure</dt>
    <dd>À partir de 10 heures</dd>
</dl>

Chaque fois qu'un bloc de citation est à intégrer dans la page HTML, entourer ce dernier d'une balise <blockquote>.

Remarque
Toute citation isolée, qui n'est pas incorporée directement en ligne dans le flux du texte environnant, est considérée comme un bloc de citation.

Lorsqu'une personne utilise un lecteur d'écran pour accéder à un tableau de mise en forme, son contenu est restitué de manière linéaire. C'est-à-dire que le contenu du tableau est lu cellule après cellule, de gauche à droite et ligne après ligne.

Il faut donc veiller à ce que l'ordre de lecture reste cohérent dans chaque tableau de mise en forme.

Par exemple, si le code source qui suit est utilisé, l'ordre de lecture est :

1. Prénom.
2. Nom.
3. Âge.
4. Champ « Prénom ».
5. Champ « Nom ».
6. Champ « Âge ».

<table>
    <tr>
        <td>
            <label for="prenom">Prénom</label>
        </td>
        <td>
            <label for="nom">Nom</label>
        </td>
        <td>
            <label for="age">Âge</label>
        </td>
    </tr>
    <tr>
        <td>
            <input type="text" name="prenom" id="prenom" />
        </td>
        <td>
            <input type="text" name="nom" id="nom" />
        </td>
        <td>
            <input type="text" name="age" id="age" />
        </td>
    </tr>
</table>

Pour obtenir un ordre de lecture cohérent tout en conservant le tableau de mise en forme, opter pour :

<table>
    <tr>
        <td>
            <label for="prenom">Prénom</label>
            <input type="text" name="prenom" id="prenom" />
        </td>
        <td>
            <label for="nom">Nom</label>
            <input type="text" name="nom" id="nom" />
        </td>
        <td>
            <label for="age">Âge</label>
            <input type="text" name="age" id="age" />
        </td>
    </tr>
</table>

Attention
Afin de faciliter la lecture par les aides techniques et de garantir l'ordre de lecture, il est fortement recommandé de limiter l'imbrication des tableaux de mise en forme.

Un tableau de mise en forme ne doit pas posséder de balises ou d'attributs propres aux tableaux de données.

C'est-à-dire :

• que les balises <caption>, <th>, <thead> et <tfoot> ne doivent pas être utilisées dans les tableaux de mise en forme ;
• que les attributs scope, headers, axis, colgroup et summary ne doivent pas être utilisés dans les tableaux de mise en forme.

Astuce
Il est intéressant de signaler les tableaux de mise en forme en utilisant l'attribut role de la façon suivante : <table role="presentation">.

Chaque fois qu'un tableau de données est intégré dans la page HTML, celui-ci doit posséder un titre clair et concis.

Ce titre doit être balisé avec <caption> et doit introduire le contenu du tableau.

<table>
    <caption>Températures moyennes mensuelles des 3 plus grandes villes de France en 2012.</caption>
    [&#8230;]
</table>

Dans chaque tableau de données, baliser chaque cellule d'entête de ligne et de colonne avec la balise <th>. C'est-à-dire que chaque fois qu'une cellule est nécessaire à la compréhension des données proposées dans le tableau, celle-ci doit être balisée avec <th>.

<table>
    <caption>Températures moyennes mensuelles des 3 plus grandes villes de France en 2012.</caption>
    <tr>
        <td>&nbsp;</td>
        <th>Paris</th>
        <th>Marseille</th>
        <th>Lyon</th>
    </tr>
    <tr>
        <th>Juin</th>
        <td>22°C</td>
        <td>28°C</td>
        <td>26°C</td>
    </tr>
    <tr>
        <th>Juillet</th>
        <td>24°C</td>
        <td>30°C</td>
        <td>28°C</td>
    </tr>
</table>

Un tableau de données simple est un tableau dans lequel les cellules d'entêtes s'appliquent systématiquement à la totalité des cellules de données d'une ligne ou d'une colonne.

Pour associer les entêtes à leurs données dans ce type de tableaux, utiliser l'attribut scope sur les balises <th>. La valeur de cet attribut changera selon que la cellule d'entête concerne :

• la totalité d'une colonne : scope="col" ;
• la totalité d'une ligne : scope="row".

<table>
    <caption>Températures moyennes mensuelles des 3 plus grandes villes de France en 2012.</caption>
    <tr>
        <td>&nbsp;</td>
        <th scope="col">Paris</th>
        <th scope="col">Marseille</th>
        <th scope="col">Lyon</th>
    </tr>
    <tr>
        <th scope="row">Juin</th>
        <td>22°C</td>
        <td>28°C</td>
        <td>26°C</td>
    </tr>
    <tr>
        <th scope="row">Juillet</th>
        <td>24°C</td>
        <td>30°C</td>
        <td>28°C</td>
    </tr>
</table>

Un tableau de données complexe est un tableau dans lequel les cellules d'entêtes ne s'appliquent pas systématiquement à la totalité des cellules de données d'une ligne ou d'une colonne.

Pour associer les entêtes aux données dans ce type de tableaux, utiliser les attributs id (identifiants) sur les cellules <th> et headers sur les cellules <td>.

Il suffit ensuite de renseigner l'attribut headers avec les identifiants des cellules d'entêtes associées. Si plusieurs entêtes sont associés à une cellule de données, les identifiants doivent être séparés par des espaces dans headers.

<table>
    <caption>Comparatif du chiffre d'affaires des entreprises Dupond et Dupont en France et dans le monde en 2011</caption>
    <tr>
        <th id="entete-un">En millions d'euros</th>
        <th id="entete-deux">En France</th>
        <th id="entete-trois">Dans le monde</th>
    </tr>
    <tr>
        <th id="entete-quatre">Dupond</th>
        <td headers="entete-quatre entete-deux entete-un">50,7</td>
        <td headers="entete-quatre entete-trois entete-un">139,3</td>
    </tr>
    <tr>
        <th id="entete-cinq">Dupont</th>
        <td headers="entete-cinq entete-deux entete-un">27,1</td>
        <td headers="entete-cinq entete-trois entete-un">476,0</td>
    </tr>
</table>

Attention
Les attributs headers et id ne doivent pas être utilisés en combinaison de l'attribut scope.

Remarque
Une bonne pratique d'accessibilité consiste à respecter un ordre logique lorsque les valeurs des attributs id des cellules d'entêtes associées à une cellule de données sont intégrées dans l'attribut headers de cette dernière.
L'ordre de ces valeurs sera l'ordre de lecture par un lecteur d'écran.

Lorsque des éléments sont présents dans le code HTML, mais ne sont pas affichés par défaut à l'écran, deux cas se présentent.

Cas 1 : ces éléments sont masqués mais peuvent être affichés sur action de l'utilisateur▲

Cas 2 : ces éléments sont masqués mais ne seront jamais affichés▲

<a href="alternative-carte-interactive.html" tabindex="-1" class="a11y">Utilisateurs de lecteurs d'écran, veuillez suivre ce lien pour accéder à la version alternative de la carte interactive.</a>

.a11y{
position: absolute;
left: -999999px;
}

Hors logos et autres éléments distinctifs qui appartiennent à une charte graphique et qui ne sont pas à prendre en compte dans le cadre de cette recommandation, utiliser CSS pour mettre en forme les textes. N'utiliser des images-textes qu'en dernier recours.

Remarque
Une attention particulière a dû être portée sur la faisabilité de ce point dès la phase de conception graphique.
Si cela n'est pas le cas, se référer à la recommandation 2.1.3. Veiller à ce que les polices puissent être intégrées sous forme de texte de la notice d'accessibilité pour la conception graphique et entrer en contact avec la personne chargée de la réalisation des maquettes.

Astuce
Si nécessaire, ne pas hésiter à utiliser la propriété CSS3 @font-face.

Attention
Les technologies comme cufón ou sIFR ne permettent pas de répondre aux exigences en termes d'accessibilité et ne doivent pas être utilisées dans le cadre d'un site ou d'une application accessible.

Pour définir les tailles des polices de caractères, utiliser uniquement des unités relatives pour la propriété CSS font-size comme par exemple em, %, px, rem, les mots-clés x-small, small, etc.

Ne pas utiliser d'unités absolues comme pt, cm, etc.

Attention
De par son mauvais support dans Internet Explorer, l'utilisation du pixel (px) comme unité de taille de police est interdite dans le référentiel AccessiWeb et est déconseillée dans le RGAA. Pour garantir la conformité avec ceux-ci, il faudra utiliser une autre unité de taille relative pour la propriété font-size.

Garantir la lisibilité des contenus, même lorsque l'utilisateur double la taille du texte dans son navigateur. Éviter ainsi le chevauchement de texte, la disparition de texte de l'écran, etc.

Pour garantir au maximum le bon respect de cette recommandation, il est recommandé de :

• ne pas utiliser d'unités (px, pt, %, em, etc.) avec la propriété CSS line-height ;
• ne pas définir de hauteur fixe sur les éléments susceptibles d'accueillir du contenu textuel, notamment les champs de formulaires ;
• ne pas définir de largeur en em sur les éléments.

Lorsque les images ne sont pas affichées, les contenus textuels de la page doivent rester visibles et lisibles. Aucune information ne doit être perdue, et le contraste entre la couleur du texte et la couleur d'arrière-plan doit être suffisamment élevé.

C'est-à-dire que tous les contenus doivent pouvoir être lus :

• même lorsque les images intégrées en CSS ne sont pas chargées dans la page ;
• même lorsque les images intégrées en HTML sont remplacées par le contenu de leur attribut alt.

background: black url(../images/fond-sombre.png) repeat-x;

Attention
Une attention particulière doit être portée sur la lisibilité des alternatives textuelles des images intégrées dans le code HTML, lorsque les images ne sont pas affichées.
L'absence des attributs height et width dans le code HTML, demandée dans une précédente recommandation de cette notice, permet de garantir l'affichage des alternatives.

Veiller à ce que l'information reste compréhensible même lorsque CSS est désactivé, notamment lorsque des couleurs, des tailles ou des positions sont vecteurs d'informations.

Exemples▲

Position courante dans les menus, exemple 1▲

Dans ce premier exemple, la couleur de fond du lien « Actualités & Presse » dans le menu indique qu'il s'agit de la rubrique active. Pour ne pas perdre cette information sans CSS, ajouter un attribut title sur le lien tel que :

 

Sélectionnez

<a href="/actualites-et-presse/" title="Actualités & Presse (rubrique active)">Actualité & Presse</a>

Position courante dans les menus, exemple 2▲

Dans ce second exemple, une flèche tournée vers le bas marque l'élément déplié du menu (« Espace Adhérent ») tandis qu'un fond de couleur et une flèche tournée vers la droite marque l'élément de la page courante (« Les points Filigrane »).

Lorsque CSS est désactivé, la flèche et les couleurs de fond disparaissent. Cependant, « Espace adhérent » étant la liste seule dépliée, et « Les points filigrane » le seul élément sans lien <a>, l'information reste compréhensible.

L'ordre de tabulation doit suivre la logique de l'ordre de lecture visuel de la page.

C'est-à-dire que lorsqu'un élément interactif en précède immédiatement un autre lors du parcours visuel de la page, le focus doit continuer sur le second élément immédiatement après avoir quitté le premier.

Attention
Sauf cas très rares où l'interface est totalement stable et maîtrisée sur le long terme, veiller à ne jamais utiliser l'attribut tabindex avec une valeur supérieure à 0, au risque de perturber la logique de l'ordre de tabulation dans la page.

Un lien d'évitement du type « Aller au contenu » doit systématiquement être présent sur chaque page afin de faciliter la navigation au clavier.

Ce lien doit être le premier élément interactif dans le code HTML. Il s'agit d'un lien vers une ancre qui doit permettre un accès direct au contenu principal de la page.

<a id="evitement" href="#contenu">Aller au contenu</a>
[&#8230;]
<div id="contenu" role="main">
    [&#8230;]
</div>

a#evitement
{
position: absolute;
left: -999999px;
}
a#evitement:focus
{
position: static;
}

<ul id="evitement">
    <li><a href="#contenu">Aller au contenu</a></li>
    <li><a href="#menu">Aller au menu</a></li>
    <li><a href="#recherche">Aller à la recherche</a></li>
</ul>

Aller plus loin▲

Afin de permettre aux utilisateurs qui naviguent au clavier de se situer dans la page, chaque élément interactif doit être visuellement mis en avant lors de la prise de focus (liens, champs de formulaires, boutons, etc.).

Astuce
Une bonne pratique d'accessibilité consiste à doubler systématiquement chaque règle :hover par une règle :focus dans la CSS.

:active{
outline: none;
}
:focus{
outline: 3px dotted green;
}

Prévoir une alternative à chaque contenu multimédia embarqué dans la page avec l'aide par exemple des balises <video>, <audio>, <object>, etc.

Cette alternative permettra de fournir le même niveau d'informations aux utilisateurs ne pouvant pas accéder au contenu multimédia (absence de plugin, navigateur vieillissant, etc.). Elle peut prendre la forme d'un contenu HTML, d'une image munie d'une alternative, etc.

Astuce
Lorsqu'une vidéo est affichée sur une page, sa transcription peut être considérée comme alternative. Il peut également s'agir de la vidéo en téléchargement (en supplément de la transcription).

Exemple▲

Le calendrier ci-dessus est une animation Flash porteuse d'informations, un lien « Le calendrier au format texte » permet à l'utilisateur d'afficher une alternative au format HTML.

Lorsqu'une animation Flash est embarquée dans la page, le paramètre wmode="transparent" ou wmode="opaque" ne doit pas être utilisé, car susceptible de rendre les animations inutilisables au clavier.