Articles

DEUXIEME PARTIE : Les bonnes pratiques de l'accessibilité du Web

La première partie a introduit pourquoi il est important de nos jours de mettre en place des standards d'accessibilité dans la réalisation d'un site Web.

Dans cette deuxième partie, nous allons donc introduire les bonnes pratiques pour rendre un site Web accessible.

Les règles d'accessibilité du Web

Les WCAG (Web Content Accessibility Guidelines), que l'on prononce "wécague", représentent les règles d'accessibilité pour les contenus web : textes, images, vidéos, enregistrements audio, documents en téléchargement, jeux interactifs, etc. (réalisées par le groupe de travail WAI du W3C).

Les WCAG 2 sont réparties selon 4 grands principes et 12 grandes règles reliées à leurs critères de succès :

Ces grands principes se veulent intangibles, intemporels et indépendants de tout contexte technologique. Quels que soient le type de contenu et la forme qu'il prend, s'il est perceptible, utilisable, compréhensible et robuste, le contenu sera dit accessible.

Les trois niveaux de confirmité

Etre conforme à un standard signifie satisfaire aux exigences préconisées par ce standard. En l’occurrence pour les WCAG 2, il faut respecter les critères de succès qui sont déclinés en trois niveaux d’accessibilité :

A : niveau minimal de conformité (niveau Bronze)

AA : niveau intermédiaire (niveau Argent). Ce niveau est le niveau accessible selon les WCAG 2. Pour respecter ce niveau, il faut avoir respecté tous les critères de succès de niveau A et de niveau AA, les niveaux étant cumulatifs.

AAA : niveau d’amélioration (niveau Or). Il n’est pas possible de satisfaire à tous les critères de succès de ce niveau pour certains contenus.

Le respect des règles d’un niveau peut être vérifié en insérant le logo associé au niveau réalisé.

Le référentiel AccessiWeb

Historique

En 2002, l’association BrailleNet lance AccessiWeb visant à promouvoir l’accessibilité du Web à travers les règles internationales WCAG.

Structure

Les critères de succès indiquent l’objectif opérationnel à atteindre pour respecter la règle. Ils sont normatifs, c’est-à-dire que s’ils ne sont pas respectés, la règle ne pourra pas être validée et le contenu ne sera pas accessible selon le niveau d’accessibilité visé.

Les critères de succès en 13 thématiques

• Images, Cadres et Couleurs;
• Multimédia;
• Tableaux;
• Liens et scripts;
• Eléments obligatoires, Structuration de l’information et Présentation de l’information;
• Formulaires, navigation et consultation.

Quelques bonnes pratiques...

La structure HTML doit rester simple pour pouvoir être interprétée par des lecteurs d’écran.

Un utilisateur peut vouloir désactiver les CSS s’il est malvoyant : il faut séparer les feuilles de styles du code HTML et ne pas utiliser de styles inline tant que possible.

Un utilisateur aveugle doit pouvoir naviguer au clavier : il faut lui fournir toutes les instructions nécessaires en lui décrivant textuellement les éléments (images, liens, etc.), en lui signalant les actions qui vont être déclenchées (nouvelle fenêtre, bloc qui se déroule avec l’attribut aria, etc.), en lui permettant de naviguer d’un élément à un autre grâce au clavier.

Les éléments doivent pouvoir être vus facilement (pas de contraste trop faible pour les malvoyants), et activés facilement (zones de clic larges pour les personnes souffrant de handicap physique).

... et quelques bons conseils!

Le site AccessiWeb présente les structures et quelques règles à prendre en compte pour rendre son site accessible :

IMAGES : Donner à chaque image porteuse d'information une alternative textuelle pertinente et une description détaillée si nécessaire. Remplacer les images textes par du texte stylé lorsque c’est possible.

On peut distinguer deux types d'images : les images décoratives et les images informatives.

Si une image est porteuse d'information, il faut ajouter l'attribut alt="Description pertinente (courte et concise) de l'image (80 caractères maximum) " à la balise <img>.

<img src="photo.jpg" alt="Ma photo" />

Si l'image est décorative, il faut ajouter un alt vide à la balise <img>.

<img src="photo.jpg" alt="" />

Pour les images captcha, indiquer dans l'alternative textuelle où se situe la version non graphique du captcha.

<img src="captcha.png" alt="Image captcha. Si non accessible, veuillez accéder à la version sonore ci-après." />

En résumé :

• Images porteuses d’informations : décrire l'information véhiculée par l’image;
• Images d’illustration : description simple;
• Image lien : alt décrit que c’est un lien et sa destination;
• Images captchas : décrire la nature et la fonction de l’image dans alt.

CADRES: Donner à chaque cadre et chaque cadre en ligne un titre pertinent.

<frame src="cadre.htm" title="Description pertinente du cadre" />

COULEURS: Ne pas donner l'information uniquement par la couleur et utiliser des contrastes de couleurs suffisamment élevés.

Pour les problèmes visuels, le contraste entre le texte et la couleur d'arrière-plan doit être suffisamment élevé.

MULTIMEDIAS: Donner si nécessaire à chaque média temporel une transcription textuelle, des sous-titres synchronisés et une audio-description synchronisée pertinents. Donner à chaque média non-temporel une alternative textuelle pertinente. Rendre possible le contrôle de la consultation de chaque média temporel et non-temporel au clavier et s’assurer de leur compatibilité avec les technologies d’assistance.

Il existe plusieurs types de médias combinant l'audio, la vidéo et l'interactivité.

Ne pas hésiter à mettre à disposition des sous-titrages (afin d'écrire ce qui ne peut être entendu) et de l'audio-description (afin de dire ce qui ne peut être vu).

TABLEAUX : Donner à chaque tableau de données un résumé et un titre pertinent, identifier clairement les cellules d'en-tête, utiliser un mécanisme pertinent pour lier les cellules de données aux cellules d’en-tête. Pour chaque tableau de mise en forme, veiller à sa bonne linéarisation.

Les tableaux <table> ne doivent pas être utilisés pour de la mise en forme. On les utilise pour retranscrire des tableaux de données.

Il est important de structurer correctement un tableau de données: donner un résumé (summary) et un titre (caption) pertinents. Identifier clairement les cellules d'en-tête de lignes et de colonnes et lier chaque cellule aux en-têtes. Si on se trouve dans une cellule, on doit pouvoir retrouver à quelle ligne et quelle colonne elle appartient. Cela peut se faire de deux manières:

1 - Avec des envois aux entêtes (attribut headers) spécifiés pour chaque cellule :

<table>
    <caption>Température de la semaine dans différentes villes</caption>
    <!-- ligne 1 : entête des colonnes -->
    <thead>
        <tr>
            <th id="ville">ville</th>
            <th id="lundi">lundi</th>
            <th id="mardi">mardi</th>
            <th id="mercredi">mercredi</th>
            <th id="jeudi">jeudi</th>
            <th id="vendredi">vendredi</th>
            <th id="samedi">samedi</th>
            <th id="dimanche">dimanche</th>
        </tr>
    </thead>

    <tbody>
        <!-- ligne 2 : nom de la ville (paris) et ses données -->
        <tr>
            <td headers="ville" id="paris">Paris</td>
            <td headers="paris lundi">10°C</td>
            <td headers="paris lundi">12°C</td>
            <td headers="paris mardi">9°C</td>
            <td headers="paris mercredi">15°C</td>
            <td headers="paris jeudi">16°C</td>
            <td headers="paris vendredi">10°C</td>
            <td headers="paris samedi">10°C</td>
            <td headers="paris dimanche">14°C</td>
        </tr>

        <!-- ligne 3 : nom de la ville (marseille) et ses données -->
        <tr>
            <td headers="ville" id="marseille">Marseille</td>
            <td headers="paris lundi">20°C</td>
            <td headers="paris lundi">22°C</td>
            <td headers="paris mardi">19°C</td>
            <td headers="paris mercredi">25°C</td>
            <td headers="paris jeudi">26°C</td>
            <td headers="paris vendredi">20°C</td>
            <td headers="paris samedi">20°C</td>
            <td headers="paris dimanche">24°C</td>
        </tr>

        <!-- ligne 4 : nom de la ville et ses données -->
        ...
    </tbody>
</table>
            

2 - Avec des scopes (attribut scope) sur les entêtes de lignes et de colonnes (plus simple) :

<table summary="Température de la semaine dans différentes villes">
    <caption>Température de la semaine dans différentes villes</caption>
    <!-- ligne 1 : entête des colonnes -->
    <thead>
        <tr>
            <td></td>
            <th scope="col">lundi</th>
            <th scope="col">mardi</th>
            <th scope="col">mercredi</th>
            <th scope="col">jeudi</th>
            <th scope="col">vendredi</th>
            <th scope="col">samedi</th>
            <th scope="col">dimanche</th>
        </tr>
    </thead>

    <tbody>
        <!-- ligne 2 : nom de la ville (paris) et ses données -->
        <tr>
            <th scope="row">Paris</th>
            <td>10°C</td>
            <td>12°C</td>
            <td>9°C</td>
            <td>15°C</td>
            <td>16°C</td>
            <td>10°C</td>
            <td>10°C</td>
            <td>14°C</td>
        </tr>

        <!-- ligne 3 : nom de la ville (marseille) et ses données -->
        <tr>
            <th scope="row">Marseille</th>
            <td>20°C</td>
            <td>22°C</td>
            <td>19°C</td>
            <td>25°C</td>
            <td>26°C</td>
            <td>20°C</td>
            <td>20°C</td>
            <td>24°C</td>
        </tr>

        <!-- ligne 4 : nom de la ville et ses données -->
        ...
    </tbody>
</table>
            

Pour ne pas répéter les unités dans le tableau, mais pour les retranscrire vocalement par les lecteurs, on utilise l'attribut abbr.

<tr>
    <th scope="row" abbr="degré Celsius">Paris</th>
    <td>10</td>
    <td>12</td>
    <td>9</td>
    <td>15</td>
    <td>16</td>
    <td>10</td>
    <td>10</td>
    <td>14</td>
</tr>
            

Se lit :
lundi, Paris, 10 degrés Celsius
mardi, Paris, 12 degrés Celsius
...

N.B. Le logiciel CMS permet la création de tableaux accessibles.

LIENS : Donner des intitulés de lien explicites, grâce à des informations de contexte notamment, et utiliser le titre de lien le moins possible. Doubler avec des liens ou un formulaire de navigation les zones réactives d'une image cliquable côté serveur.

Si le texte entouré par les balises <a></a> n'est pas explicite, ajouter title="Description du lien" à la balise <a>. Le lecteur d'écran lira: "Lien vers + texte contenu par les balises ou en priorité l'attribut title pour un lien et l'attribut alt pour une image".

<a href="www.excilys.com" title="Lien vers Excilys">Excilys</a>

Se lit : Lien vers "lien vers Excilys".

Chaque lien doit pouvoir être accessible via la tabulation.
Par ailleurs, l'attribut href doit toujours être spécifié.

Au focus, le lien doit se distinguer graphiquement : associer un style au lien.

.ma_classe:hover, .maclasse:focus {
    color: #AFAFAF;
}
            

Chaque lien doit pouvoir être activé au clavier par la touche Entrée.

SCRIPTS : Donner si nécessaire à chaque script une alternative pertinente. Rendre possible le contrôle de chaque code script au moins par le clavier et la souris et s’assurer de leur compatibilité avec les technologies d’assistance.

Essayer de prévoir une alternative à JavaScript si celui-ci est désactivé.

ÉLÉMENTS OBLIGATOIRES : Vérifier que chaque page Web a un code source valide selon le type de document, un titre pertinent et une indication de langue par défaut. Vérifier que les balises ne sont pas utilisés uniquement pour la présentation, que les changements de langues et de direction de sens de lecture sont indiqués.

Exemple de Doctype :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

STRUCTURATION DE L'INFORMATION : Utiliser des titres, des listes, des abréviations et des citations pour structurer l'information.

Utiliser des titres pour structurer la page, des listes correctement balisées, des abréviations et des acronymes explicités, des citations déclarées, etc.

N.B. Ne pas utiliser de liste <ul> si elle ne contient qu'un élément. La liste <ul> est utilisée pour afficher une énumération d'éléments.

PRÉSENTATION DE L'INFORMATION : Utiliser des feuilles de style pour contrôler la présentation de l’information. Vérifier l’effet de l’agrandissement des tailles de caractère sur la lisibilité. S’assurer que les liens sont correctement identifiables, que la prise de focus est signalée, que l’interlignage est suffisant et donner la possibilité à l’utilisateur de contrôler la justification des textes. S’assurer que les textes cachés sont correctement restitués et que l’information n’est pas donnée uniquement par la forme ou la position d’un élément.

• Utiliser les feuilles de style (éviter les balises de présentation telles que <u> pour souligner du texte);
• Rendre l’information perceptible (même quand les images ou les CSS sont désactivés) : text-indent : -5000px;
• Vérifier la lisibilité du texte après un zoom;
• Restituer les textes cachés si nécessaire;
• Permettre de se repérer dans la page, …

FORMULAIRES : Associer pour chaque formulaire chacun de ses champs à son intitulé, grouper les champs dans des blocs d'informations de même nature, structurer les listes de choix de manière pertinente, donner à chaque bouton un intitulé explicite. Vérifier la présence d’aide à la saisie, s’assurer que le contrôle de saisie est accessible et que l’utilisateur peut contrôler les données à caractère financier, juridique ou personnelles.

• Créer des intitulés pertinents pour les étiquettes et les boutons,
• Regrouper les informations de même nature (fieldset, legend),
• Structurer les listes de choix,
• Accompagner la saisie des données en assurant le contrôle de la saisie et en apportant de l’aide,
• Contrôler la validation des données, …

Quelques règles à respecter :

Chaque champ de formulaire est attaché à un label qui est relié grâce à l’id.

Code HTML non correct

<form id="formulaire1">
Nom :
<input id="nom" type="text" />
Prénom :
<input id="prenom" type="text" />
</form>
            

Code HTML correct

<form id="formulaire1">
    <label for="nom">Nom :</label>
    <input id="nom" type="text" />
    <label for="prenom">Prénom :</label>
    <input id="prenom" type="text" />
</form>
            

Les labels et les champs doivent être accolés pour aider la lecture visuelle.

Si le formulaire est conséquent, découper le formulaire en utilisant la balise fieldset pour regrouper des champs de formulaire pertinents.

<form id="formulaire1">
    <fieldset>
        <legend>Personne :</legend>
        <label for="nom">Nom</label>
        <input id="nom" type="text" />
        <label for="prenom">Prénom</label>
        <input id="prenom" type="text" />
    </fieldset>
</form>
            

NAVIGATION : Faciliter la navigation dans un ensemble de pages par au moins deux systèmes de navigation différents (menu de navigation, plan du site ou moteur de recherche), un fil d’ariane et l’indication de la page active dans le menu de navigation. Identifier les groupes de liens importants et la zone de contenu et donner la possibilité de les éviter par des liens de navigation interne. S’assurer que l’ordre de tabulation est cohérent et que la page ne comporte pas de piège au clavier.

Essayer de mettre en place différents éléments d'accès rapide et facile pour la navigation comme une  navigation principale, un plan du site, un outil de recherche, des liens suivant/précédent, un fil d’Ariane, des liens d’accès rapide, des liens d’évitement.

La présentation doit rester pertinente : les différentes parties du site, comme les barres de navigation et le footer, doivent rester à la même place quand on navigue sur les différentes pages du site.

Si un lien ouvre une nouvelle fenêtre, le spécifier dans l'attribut title:

<a href="www.excilys.com" target="_blank" title="Excilys (nouvelle fenêtre)">Excilys</a>

Proposer des liens d'évitement permettant d'accéder directement à un contenu.

La page ne doit pas contenir de piège au clavier: par exemple, un lien non tabulable, etc.

L'ordre de tabulation doit rester cohérent dans la page.

Une page doit contenir une hiérarchie de titres emboîtée : elle commence par un h1, et sans saut entre les niveaux de titre :

<h1>Titre 1</h1>

<h2>Titre 2</h2>

<h3>Titre 3</h3>

<h2>Titre 2</h2>

<h3>Titre 3</h3>

<h4>Titre 4</h4>
            

CONSULTATION : Vérifier que l’utilisateur a le contrôle des procédés de rafraîchissement, des changements brusques de luminosité, des ouvertures de nouvelles fenêtre et des contenus en mouvement ou clignotant. Indiquer lorsqu’un contenu s’ouvre dans une nouvelle fenêtre et donner des informations relatives à la consultation des fichiers en téléchargement. Ne pas faire dépendre l’accomplissement d’une tâche d’une limite de temps sauf si elle est essentielle et s’assurer que les données saisies sont récupérées après une interruption de session authentifiée. S’assurer que les expressions inhabituelles et le jargon sont explicités. Proposer des versions accessibles ou rendre accessibles les documents en téléchargement.

Permettre l'ouverture de nouvelles fenêtres, des documents en téléchargement, des infobulles accessibles au clavier, la gestion de l’excès de luminosité et des flashs, …

Les outils pratiques à l'accessibilité...

• Firebug :  pour le développeur
• NVDA : lecteur d'écran gratuit
• Web Developer Toolbar (Web Developer pour Chrome) : plugin Firefox pour afficher les alternatives d'images, montrer les tableaux, désactiver les CSS, etc.
• Accessibility Evaluator Toolbar : plugin Firefox semblable à Web Developer Toolbar
• HeadingsMap : plugin Firefox pour afficher le sommaire de la page base sur l'utilisation des balises heading <h1> <h2> ...

Conclusion

Pour créer un site accessible :

• Y penser dès le début : si vous réalisez un site de bout en bout et choisissez sur un coup de tête de le rendre accessible, ceci sera très difficile. D’une part, vous allez vous rendre compte que votre site a été mal pensé pour le rendre accessible, d’autre part vous allez mettre énormément de temps à appliquer les différentes règles que si vous vous étiez pris au fur et à mesure.
• Respecter les règles instaurées par le WAI.
• Mettez-vous à la place de la personne ayant un handicap et penser aux outils qu'elle utilise pour vérifier si vous avez procédé de la bonne façon.

Comme nous avons pu le voir, il y a beaucoup de règles. L’important n’est pas de toutes les respecter, mais d’y penser dans un coin de votre tête lorsque vous développez un site web. Quelques bonnes pratiques de l’accessibilité seront alors un réflexe.

SOURCES :

Livre : Accessibilité Web - Normes et bonnes pratiques pour des sites plus accessibles - Armony Altinier

Site du W3C : http://www.w3.org/

Site AccessiWeb : http://www.accessiweb.org/

---

VOIR AUSSI : PREMIERE PARTIE : Pourquoi l'accessibilité du Web?