Lignes directrices pour le design web de la Confédération

Accessibilité

Selon la Loi sur l’égalité pour les handicapés (LHand) art. 14, l’accès aux prestations sur Internet de l’administration fédérale ne doit pas être rendu difficile aux handicapés de la vue. Cette exigence est respectée lorsqu’un site Internet satisfait aux conditions de conformité des WCAG 2.0 et qu’il atteint le niveau de conformité AA.

Informations complémentaires:

Bonnes pratiques

Les exemples suivants montrent comment les rédactrices et rédacteur web peuvent améliorer l’accessibilité de leurs sites web par des moyens simples.

Titre de page

Dans le «title» du document HTML il convient de décrire d’abord les aspects spécifiques de la page, puis les généralités. Les éléments doivent être séparés par des virgules. Exemple: accessibilité pour les handicapés, lignes directrices pour le design de la Confédération suisse

Barrier-free Accessibility, Swiss Confederation Web Guidelines

<title>Barrier-free Accessibility, Swiss Confederation Web Guidelines</title>

Contenus multilingues sur une page

Parfois, une même page comporte des contenus dans différentes langues. Les lecteurs d’écran doivent être avertis du changement de langue par le biais de l’attribut «lang». Exemple:

Barrierefreiheit ist einfach, nicht wahr?

Web content accessibility is easy, isn't it?

L'accessibilité aux contenus web est facile, n'est-ce pas?

<p lang="de">Barrierefreiheit ist einfach, nicht wahr?</p>
<p lang="en">Web content accessibility is easy, isn't it?</p>
<p lang="fr">L'accessibilité aux contenus web est facile, n'est-ce pas?</p>

Icônes

Souvent, les icônes de police ne peuvent pas être lues par les lecteurs d’écran. C’est pourquoi un texte visible ou invisible supplémentaire (<span class="sr-only">description d’icône</span>) est nécessaire. Les icônes elles-mêmes peuvent alors être définies comme aria-hidden="true".

Clés d’accès – Navigation accessible

Les clés d’accès pour la navigation accessible simplifient l’utilisation d’un site Internet par le biais d’un lecteur d’écran ou clavier. La navigation accessible doit être définie juste après la balise body. Les clés d’accès sont invisibles, sauf si elles sont mises en évidence. Un exemple peut être trouvé sous Modules de navigation – Zone d’en-tête – Navigation accessible.

Exigences envers la conception de contenus accessibles

D’autres exemples de bonnes pratiques pour la conception de contenus accessibles sont répertoriés dans la «Liste de contrôle de l’accessibilité pour AEM».

Eléments non accessibles pour tous

Les éléments Diaporama et Carrousel ne sont pas totalement accessibles pour tous. S’ils sont utilisés malgré tout, ils doivent être masqués pour les lecteurs d’écran à l’aide de la commande aria-hidden="true". Dans ce cas, les contenus doivent être proposés sous une forme utilisable par les lecteurs d’écran.

On peut obtenir cela en répétant le contenu d’un diaporama ou d’un carrousel sous la forme d’une liste HTML classique, uniquement visible (<div class="sr-only">) pour les lecteurs d’écran. Alternativement, on peut ajouter un lien, uniquement visible pour les lecteurs d’écran, vers une page avec le contenu présenté de manière accessible.

Outils d’aide

Voici une sélection d’outils d’aide pour concevoir et tester l’accessibilité des pages Internet:

Liste de contrôle de l’accessibilité pour AEM

Lignes directrices pour la création de contenu accessible avec Adobe Experience Manager AEM

HeadingsMap (module complémentaire Firefox)

HeadingsMap est idéal pour rendre la structure d’une page Internet visible. Ce module complémentaire affiche la structure des titres du site Internet actuellement ouvert dans une zone supplémentaire de la fenêtre du navigateur.

Juicy Studio Accessibility Toolbar (module complémentaire Firefox)

Cette barre d’outils examiné un certain nombre d’exigences en matière d’accessibilité, y compris le marquage des éléments ARIA et le balisage des tableaux.

Web Developer Toolbar (module complémentaire Firefox)

Cette barre d’outils est adaptée pour la désactivation de JS, la mise en évidence de certains éléments HTML ou la vérification des images.

Color Contrast Analyzer

Color Contrast Analyzer est un outil qui permet d’analyser le contraste entre la couleur du premier plan et celle de l’arrière-plan.

La Web Accessibility Initiative (WAI) du World Wide Web Consortiums (W3C) propose une liste complète d’outils d’évaluation de l’accessibilité.

Informations supplémentaires et contact

Service E-Accessibility de la Confédération (2015-2017) Markus Riesch Tél. +41584625463

Navigation

Chercher