Notice d'accessibilité HTML et CSS

AcceDe Web - La démarche accessibilité (retour à l'accueil) Atalan - Accessibilité numérique et sensibilisation au handicap. www.atalan.fr


précédentsommairesuivant

I. Structure générale

I-A. Régions, titres et menus de navigation

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

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".

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" : inutile d'identifier chaque système de pagination ou chaque lien, seuls les menus principaux doivent être identifiés.
HTML5
En HTML5, une bonne pratique d'accessibilité consiste à ajouter systématiquement role="navigation" sur les balises <nav>.
 
Sélectionnez
<nav role="navigation">
    [&#8230;]
</nav>
Cette recommandation temporaire est valable 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.

Exemple

Image non disponible
Exemple de placement de rôles ARIA dans une page Web

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

Outil pratique

Sous Firefox, la barre d'outil Web Developer permet d'afficher les rôles ARIA présents dans une page (Information > Afficher les rôles ARIA) : https://addons.mozilla.org/fr/firefox/addon/web-developer/.

Ressource

La liste des rôles ARIA délimitant des zones (landmark roles) est disponible à cette adresse : http://www.w3.org/TR/wai-aria/roles#landmark_roles

Mettre en place une hiérarchie de titres logique et exhaustive avec les balises <h1> à <h6>

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 ?

Remarques
  • Il n'est jamais gênant d'utiliser plusieurs <h1> dans une page si plusieurs titres de premier niveau sont présents.
  • Une bonne pratique d'accessibilité consiste à ne pas ajouter de titres cachés.

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

Image non disponible

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

Il existe des extensions de navigateurs permettant de mettre en avant la structure de titres employée sur une page :

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 :

 
Sélectionnez
<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>
HTML5
En HTML5, englober en plus les menus de navigation principaux avec une balise <nav>, de façon à obtenir :
 
Sélectionnez
<nav id="menu-principal" role="navigation">
    <ul>
       [&#8230;]
    </ul>
</nav>

I-B. Ordre du flux HTML

É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 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.

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.

II. Métadonnées

II-A. Titre de la page

Renseigner un <title> précis sur chaque page

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>.

Attention

Parfois, certaines pages sont rechargées avec un contenu modifié, suite à une action de l'utilisateur.

C'est le cas :

  • lors de l'utilisation de filtres, comme des nuages de mots-clés ;
  • lors de l'utilisation de la pagination ;
  • lorsqu'une expression est recherchée via le formulaire de recherche ;
  • etc.

Il faut alors veiller à mettre à jour le titre de la page en conséquence, par exemple :

 
Sélectionnez
<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.

II-B. Encodage

Veiller au bon codage de tous les caractères

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 :

 
Sélectionnez
<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>.

Attention
Penser également à vérifier le bon codage des caractères qui ne sont pas spontanément affichés à l'écran, notamment :
  • au contenu des attributs title ;
  • aux textes cachés par défaut ;
  • au contenu des attributs alt des images ;
  • etc.

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">.

III. Langues

III-A. Langue de la page

Renseigner la langue principale de la page avec l'attribut lang sur la balise <html>

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 :

 
Sélectionnez
<html lang="fr">
Astuce

Pour renseigner l'attribut lang, un code de langue ISO 639-1 (sur deux lettres) ou, s'il n'est pas disponible, ISO 639-2 (sur trois lettres) doit être utilisé.

Les principaux codes utilisés sont les suivants :

  • fr pour le français ;
  • en pour l'anglais ;
  • es pour l'espagnol ;
  • de pour l'allemand ;
  • it pour l'italien.

La liste exhaustive des codes est maintenue à jour à cette adresse : http://www.loc.gov/standards/iso639-2/php/French_list.php.

III-B. Changements de langue

Utiliser l'attribut lang pour signaler les changements de langue

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 :

 
Sélectionnez
<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.

Remarque
Signaler le changement de langue n'est pas demandé pour :
  • les noms propres ;
  • les mots d'origine étrangère à la base, mais intégrés dans le dictionnaire de la langue principale ;
  • tous les mots d'origine étrangère, mais qui se prononcent et se comprennent correctement avec l'accent de la langue principale (« podcast », par exemple, si la langue principale est le français).

IV. Grammaire HTML et sémantique

IV-A. Conformité

Écrire un code HTML valide selon les règles de grammaire du DOCTYPE utilisé

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é.

Astuces

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.

IV-B. Usage des attributs et balises HTML

Ne pas utiliser d'attributs ou de balises HTML destinés exclusivement à la mise en forme

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é.

Employer les balises HTML pour leur valeur sémantique

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

Par exemple :

Balises Mauvais usage Bon usage
<blockquote> Indenter le texte Baliser un bloc de citation
<ul> et <li> Obtenir une puce à l'écran Baliser des listes
<fieldset> Obtenir une bordure Regrouper des éléments de formulaires de même nature
<h1> à <h6> Obtenir des textes plus ou moins grands Baliser des titres et sous-titres

V. Images

V-A. Images décoratives et illustratives

Utiliser une alternative vide (alt="") sur les images décoratives et illustratives

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="").

 
Sélectionnez
<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

Image non disponible

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="").

V-B. Images informatives

Ne pas utiliser CSS pour afficher les images porteuses d'informations

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.

Astuce

Sont considérées comme porteuses d'informations toutes les images qui entraîneraient une perte de contenus ou de fonctionnalités, si elles n'étaient pas disponibles :

  • logos ;
  • images-textes ;
  • liens et boutons-images ;
  • etc.
Attention

En particulier, la technique qui consiste à sortir un texte de l'écran pour le remplacer par une image d'arrière-plan ne doit jamais être utilisée.

Lorsque les styles ne sont pas chargés en totalité, ou qu'ils sont modifiés par l'utilisateur, l'information peut être perdue.

 
Sélectionnez
<a href="/" id="logo">[Le texte de mon logo]</a>
 
Sélectionnez
a#logo
{
display: block;
background: url(images/logo.png);
text-indent: -999999px;
width: 300px;
height: 100px;
}

Cette technique est à remplacer par l'utilisation de HTML pur. Par la suite, c'est le JavaScript qui doit être utilisé pour modifier dynamiquement l'image au survol si besoin.

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

Si l'image n'est pas chargée, alors le texte de remplacement sera affiché à la place et l'information ne sera pas perdue.

Renseigner l'attribut alt sur les images informatives

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.

Remarque : les images véhiculant des informations riches

Parfois, l'image véhicule des informations riches qu'il n'est pas possible de retranscrire sous forme de texte brut, via le simple attribut alt (schémas, graphiques complexes, etc.).

Dans cette situation, une bonne pratique d'accessibilité consiste à :

  • renseigner un court texte de remplacement dans l'attribut alt qui décrit globalement la fonction de l'image ;
  • prévoir une zone de contenu dans laquelle proposer une description détaillée de l'image. De préférence, soit directement sous l'image, soit par l'intermédiaire d'un lien vers une autre page. Dans le cas de graphiques ou schémas complexes, la description détaillée la plus adaptée est souvent un tableau de données ou une liste ;
  • indiquer dans le texte de remplacement de l'image le moyen d'accéder à la description plus détaillée.

Par exemple, dans le cas d'une carte du monde qui expose les différents pays dans lesquels une marque est présente :

 
Sélectionnez
<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>

À noter que l'attribut longdesc est parfois recommandé pour fournir un lien vers la description détaillée d'une image. Cependant, l'utilisation de cet attribut ne garantit pas l'accès à l'information pour tous, contrairement à l'ajout d'un lien en dur dans la page. L'emploi de la technique proposée ci-dessus est donc à privilégier.

Exemple

Image non disponible

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." />.

V-C. Images mappées

Renseigner l'attribut alt de chaque image mappée et de ses balises <area />

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 :

 
Sélectionnez
<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>

Intégrer les balises <map> et <area /> juste après chaque image mappée dans le flux HTML

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.

VI. Liens et boutons

VI-A. Intitulés des liens et des boutons

Rédiger des intitulés explicites pour les liens et les boutons

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 :

 
Sélectionnez
<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 ?

Remarque

Dans le cas où du texte et de l'image sont présents simultanément dans l'intitulé du lien ou du bouton, le texte de remplacement de l'image est à considérer comme faisant partie intégrante de l'intitulé.

Ainsi, l'intitulé du lien suivant sera considéré comme explicite :

 
Sélectionnez
<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é.

Utiliser en dernier recours l'attribut title pour expliciter les intitulés de liens et de boutons qui ne peuvent pas être rendus explicites

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 » :

 
Sélectionnez
<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.

Astuce

Dans le cas de liens du type « Lire la suite » ou « En savoir plus », une bonne pratique d'accessibilité consiste à reléguer cette information en dernier dans le contenu de l'attribut title afin de faciliter l'accès à l'information importante :

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

L'attribut title doit également être utilisé pour distinguer les liens ou boutons dont les intitulés pourraient être considérés comme explicites, mais qui pointent vers des pages ou déclenchent des actions différentes.

Par exemple, dans le cas de deux boutons « Rechercher » affichés sur la même page, et qui seraient à distinguer :

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

VI-B. Documents en téléchargement

Indiquer le poids et le format de chaque document en téléchargement

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 :

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

Si des pictogrammes sont utilisés pour indiquer visuellement le format des documents en téléchargement, penser à bien intégrer l'image dans l'intitulé, en dur dans le code HTML, et à bien renseigner le texte de remplacement de cette dernière.

Par exemple :

 
Sélectionnez
<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é.

VI-C. Nouvelles fenêtres

Signaler l'ouverture des nouvelles fenêtres

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 :

 
Sélectionnez
<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>

VII. Formulaires

VII-A. Intitulés et champs

Utiliser la balise <label> ainsi que les attributs for et id pour associer les champs à leurs intitulés

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.
 
Sélectionnez
<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>
Remarque

Parfois, certains champs n'ont pas d'intitulé visible. Dans cette situation, utiliser l'attribut title pour associer tout de même un intitulé au champ.

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

À noter que l'attribut title ne doit jamais être utilisé si le couple d'attributs for et id est déjà en place pour associer un intitulé à un champ.

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.

Intégrer les informations utiles à la saisie directement dans les balises <label>

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.
 
Sélectionnez
<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>
Remarque

Parfois, les messages d'erreurs sont affichés au niveau de chaque champ. Dans ce cas, ils doivent également être intégrés dans les <label> associés.

 
Sélectionnez
<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>

VII-B. Regroupement et tri des informations

Regrouper et titrer les champs de même nature avec <fieldset> et <legend>

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

Par exemple :

 
Sélectionnez
<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>
Attention

Les balises <fieldset> et <legend> ne sont à utiliser que lorsque plusieurs groupes de champs disposent d'intitulés identiques. Par exemple :

  • une série de questions sur une même page avec comme réponses possibles « oui » ou « non » ;
  • une liste de participants à un évènement avec, à chaque fois, « nom » et « prénom ».

Dans toutes les autres situations :

  • ne pas utiliser les balises <fieldset> et <legend> ;
  • utiliser les balises <h1> à <h6> pour titrer les blocs.
Remarque

Une bonne pratique d'accessibilité consiste à utiliser également les balises <fieldset> et <legend> lors de l'intégration de listes de boutons radio ou de cases à cocher dans la page.

Par exemple :

 
Sélectionnez
<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

Image non disponible
 
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é »).

Ordonner les options de manière logique dans les listes déroulantes

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).
Astuce

Une bonne pratique d'accessibilité consiste à ne pas préfixer le contenu de la balise <option> avec des caractères décoratifs (tirets, étoiles, espaces, etc.).

Ceci afin de permettre un accès direct à une valeur ou à un groupe de valeurs souhaité, par simple pression d'une touche au clavier (pression sur la touche « I » pour atteindre le pays « Italie », par exemple).

Ainsi :

 
Sélectionnez
<select>
    <option>--Allemagne</option>
    <option>--Belgique</option>
    <option>--Espagne</option>
    <option>--France</option>
    <option>--Italie</option>
</select>

Sera remplacé avantageusement par :

 
Sélectionnez
<select>
    <option>Allemagne</option>
    <option>Belgique</option>
    <option>Espagne</option>
    <option>France</option>
    <option>Italie</option>
</select>

VII-C. Titre de la page

Mettre à jour le <title> de la page quand un formulaire renvoie une erreur ou un message de confirmation

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 :

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

Et, dans le cas d'une erreur :

 
Sélectionnez
<title>Erreur - Formulaire de contact | [Nom du site]</title>
Remarque

Dans certaines situations, il n'est pas nécessaire d'ajouter une mention car le titre de la page affichée après la soumission rend le résultat de l'action évident. Par exemple :

  • formulaire de connexion qui envoie vers une page « Profil utilisateur » ;
  • bouton « Passer à l'étape suivante » qui envoie à l'étape suivante dans un formulaire à étapes multiples ;
  • formulaire de contact qui envoie une page de prévisualisation ;
  • etc.

VII-D. CAPTCHA (systèmes anti-spam)

Indiquer dans l'alternative des CAPTCHA graphiques où trouver la version non graphique du CAPTCHA

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

Image non disponible

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

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

VIII. Listes et citations

VIII-A. Listes

Baliser les listes non ordonnées avec <ul> et <li>

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 :

 
Sélectionnez
<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>

Baliser les listes ordonnées avec <ol> et <li>

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 :

 
Sélectionnez
<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>

Baliser les listes de définitions avec <dl>, <dt> et <dd>

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 :

 
Sélectionnez
<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>
HTML5
La spécification HTML5 étend le rôle de la liste de définitions classique à celui plus large d'une liste de descriptions : il est désormais possible d'utiliser <dl>, <dt> et <dd> pour baliser n'importe quels groupes de clés/valeurs. Par exemple :
 
Sélectionnez
<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>

VIII-B. Citations

Baliser les blocs de citations avec <blockquote>

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.

IX. Tableaux

IX-A. Tableaux de mise en forme

Veiller à l'ordre de lecture des tableaux de mise en forme

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 ».
 
Sélectionnez
<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>
Image non disponible

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

 
Sélectionnez
<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>
Image non disponible

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.

Ne pas utiliser de balises ou d'attributs propres aux tableaux de données dans les 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">.

IX-B. Tableaux de données

Donner un titre à chaque tableau de données avec la balise <caption>

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.

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

Baliser chaque cellule d'entête de ligne et de colonne avec <th>

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>.

 
Sélectionnez
<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>
Températures moyennes mensuelles des 3 plus grandes villes de France en 2012.
  Paris Marseille Lyon
Juin 22°C 28°C 26°C
Juillet 24°C 30°C 28°C

Utiliser l'attribut scope pour associer les cellules aux entêtes des tableaux de données simples

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".
 
Sélectionnez
<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>
Températures moyennes mensuelles des 3 plus grandes villes de France en 2012.
  Paris Marseille Lyon
Juin 22°C 28°C 26°C
Juillet 24°C 30°C 28°C

Utiliser les attributs headers et id pour associer les cellules aux entêtes des tableaux de données complexes

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.

 
Sélectionnez
<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>
Comparatif du chiffre d'affaires des entreprises Dupond et Dupont en France et dans le monde en 2011
En millions d'euros En France Dans le monde
Dupond 50,7 139,3
Dupont 27,1 476,0

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.

X. Usage des CSS

X-A. Contenus masqués

Ne pas utiliser les propriétés CSS display ou visibility pour masquer un contenu qui ne peut pas être affiché par l'utilisateur

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

Concernant le premier cas, il peut s'agir par exemple du contenu d'une pop-in, d'un menu déroulant, ou encore des différents panneaux d'un carrousel dynamique.

Pour savoir comment prendre en compte l'accessibilité de ces éléments, se référer à la Notice d'accessibilité interfaces riches et JavaScript.

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

Les éléments masqués mais qui ne seront jamais affichés peuvent être également classés en deux sous-types.

Cas 2.1 : les éléments inutiles pour tous les utilisateurs

Les éléments inutiles pour tous les utilisateurs doivent, par ordre de priorité :

  1. Être supprimés du code HTML.
  2. Si cela n'est pas possible, être masqués à l'aide des propriétés CSS display: none; ou visibility: hidden;.
Cas 2.2 : les éléments qui sont utiles pour les utilisateurs de lecteurs d'écran, mais inutiles pour les autres utilisateurs

Les éléments utiles aux utilisateurs de lecteurs d'écran doivent quant à eux être rendus invisibles ou sortis de l'écran à l'aide des propriétés CSS opacity: 0; ou position: absolute; par exemple.

Il peut s'agir par exemple d'indications servant à faciliter la navigation dans les pages, de liens d'évitement, etc.

Attention

Lorsque des liens, ou plus généralement des éléments interactifs, sont intégrés dans un contenu destiné aux utilisateurs de lecteurs d'écran, utiliser tabindex="-1" sur ces éléments afin d'en empêcher l'accès par voie classique au clavier.

Par exemple :

 
Sélectionnez
<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>
 
Sélectionnez
.a11y{
position: absolute;
left: -999999px;
}

X-B. Modification de l'apparence et de la taille du texte

Utiliser CSS pour mettre en forme les textes

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.

Utiliser uniquement des tailles relatives (em, %, small, etc.) pour les polices de caractères

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 la taille du texte est doublée

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.
Astuce
Pour tester cette recommandation :
  • avec Firefox, dans le menu Affichage puis Zoom, cocher Zoom texte seulement, puis doubler la taille du texte en faisant six fois le raccourci clavier CTRL + (CTRL 0 permet de revenir à la taille par défaut) ;
  • avec Internet Explorer, dans le menu Affichage puis Taille du texte, choisir La plus grande.

X-C. Accès à l'information

Garantir la lisibilité des contenus lorsque les images ne sont pas affichées

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.
Astuce
Chaque fois qu'un texte est superposé à une image d'arrière-plan, veiller à mettre en place une couleur de remplacement, qui garantira la lisibilité du texte en l'absence de cette dernière.
 
Sélectionnez
background: black url(../images/fond-sombre.png) repeat-x;
Cette couleur de remplacement peut être héritée d'un élément parent.

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.

Garantir la compréhension de l'information même lorsque CSS est désactivé

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
Image non disponible

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
Image non disponible

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 »).

Image non disponible

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.

XI. Navigation au clavier

XI-A. Ordre de tabulation

Veiller à ce que l'ordre de tabulation suive la logique de l'ordre de lecture

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.

Mettre en place des liens d'évitement

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.

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

Bien qu'il soit fortement recommandé d'afficher ce lien, celui-ci peut être masqué par défaut, s'il n'a pas été prévu dans les maquettes graphiques. En revanche, il doit dans tous les cas être rendu visible à la prise de focus au clavier.

Le lien d'évitement ne doit jamais être masqué à l'aide des propriétés CSS display: none; et/ou visibility: hidden; sous peine de le rendre totalement inatteignable au clavier.

Privilégier une autre solution, par exemple l'utilisation des codes suivants :

 
Sélectionnez
a#evitement
{
position: absolute;
left: -999999px;
}
a#evitement:focus
{
position: static;
}
Remarque

Dans certaines situations, beaucoup de tabulations sont nécessaires pour accéder au menu principal et/ou au moteur de recherche depuis le sommet de la page.

Une bonne pratique d'accessibilité consiste alors à mettre en place une liste de liens d'évitement.

 
Sélectionnez
<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

XI-B. Visibilité de la prise de focus

Garantir la visibilité de la prise de focus au clavier

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.

Attention

La règle outline: none; ne doit jamais être appliquée par défaut au focus dans la CSS, sauf dans les cas très précis où la visibilité du focus est ensuite surchargée plus tard dans la feuille de style.

Si les styles appliqués à la prise de focus sont jugés gênants lors de la navigation à la souris, il est possible de les annuler au clic par l'intermédiaire de la pseudoclasse :active.

Par exemple :

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

Dans ce cas, l'outline est alors modifié à la prise de focus afin de le rendre plus visible dans tous les contextes.

XII. Contenus embarqués

XII-A. Contenus multimédia

Prévoir une alternative à chaque contenu multimédia (<video>, <audio>, <object>, etc.)

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

Image non disponible

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.

Ne pas utiliser le paramètre wmode avec les valeurs transparent ou opaque

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.


précédentsommairesuivant

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

Licence Creative Commons
Le contenu de cet article est rédigé par AcceDe Web et est mis à disposition selon les termes de la Licence Creative Commons Attribution 3.0 non transposé.
Les logos Developpez.com, en-tête, pied de page, css, et look & feel de l'article sont Copyright © 2013 Developpez.com.