Logo Spiria
Blogue et discussions
Développement web

Accessibilité : 5 choses que nous devrions déjà faire

par Jessica Merrigan, 
21 février 2019.

Au cours des deux prochaines années, il est important de se familiariser avec le niveau de conformité AA des Règles pour l’accessibilité des contenus Web (WCAG), puisque leur application deviendra obligatoire en 2021 en vertu des lois sur l’accessibilité de l’Ontario.

Aujourd’hui, tous les sites Web publiés après 2013 en Ontario sont tenus d’être conformes au niveau A. Voici les exigences que j’ai trouvées plus souvent que d’autres négligées :

1. Balisage sémantique (niveau A – 1.3.2)

Le balisage sémantique est un terme sophistiqué pour une utilisation du HTML pleine de bon sens. Les en-têtes de pages et de sections doivent être entourés de balises d’en-tête (H1, H2, etc.). Un titre H1 ne doit être utilisé qu’une seule fois pour le titre de la page, mais les balises H2, H3, etc. peuvent être utilisées autant de fois que nécessaire.

Il est important d’utiliser une structure de titres et de paragraphes pour afficher le contenu parce que les lecteurs d’écran utilisent souvent ces titres structurés pour indiquer le début et la fin du contenu. Si une page n’a pas de titres, les utilisateurs ne verront ou n’entendront qu’un énorme mur de texte sans pause.

Les « pauses thématiques »

Lors du formatage du contenu en HTML, les changements de contexte peuvent être marqués par des « pauses thématiques », représentées par la balise HR. Ceci indique au lecteur d’écran qu’il devrait y avoir une pause lors de la lecture du texte et signifie également à l’utilisateur un changement de sujet, au lieu d’un texte en continu.

Changements de langue

Imaginez une voix synthétique anglaise lisant des mots français ou espagnols comme s’il s’agissait de mots anglais. L’indication des changements de langue garantit que le contenu est lu à haute voix avec précision par la technologie d’assistance, comme le lecteur d’écran.

Par exemple :

<span lang="EN">I love chocolate.</span>

2. Formulaires et étiquettes de champs (niveau A – 3.3.2)

Les formulaires doivent toujours être logiques et intuitifs, leurs champs correctement étiquetés et il est nécessaire de fournir des instructions claires. Les champs obligatoires doivent être indiqués et les étiquettes de champs doivent être présentes dans le code, même si elles ne sont pas visibles dans le design visuel.

<label for="courriel" class=”hidden”>Adresse de courriel</label>  
<input class="form-control" id="courriel" name="courriel" type="text" placeholder="Adresse de courriel" />

Une étiquette associée à une entrée sera prononcée par les lecteurs d’écran lorsque le champ sera sélectionné. Cela permet également à l’utilisateur de cliquer sur l’étiquette pour activer le contrôle.

3. Liens : texte, couleur et focus (niveau A – 2.4.4)

Les personnes avec un lecteur d’écran utilisent souvent une liste déroulante de tous les liens contenus dans une page. Il est important d’avoir des liens qui donnent le contexte approprié. Par exemple, une liste de liens « cliquez ici », « cliquez ici », etc. est désastreuse pour l’accessibilité. À la place, il est beaucoup plus clair pour les utilisateurs de fournir une contextualisation dans le texte du lien, par exemple : « Téléchargez le rapport annuel ».

Survol et focus (niveau A – 1.4.1)

L’état de survol d’un lien ne peut pas s’appuyer uniquement sur la couleur pour transmettre un sens. Il se peut qu’une personne daltonienne n’ait pas accès à l’information sur les couleurs, et les utilisateurs de lecteurs d’écran n’y auront pas accès non plus. À la place, ajoutez un soulignement en plus de la couleur qui aidera les utilisateurs à comprendre qu’il s’agit d’un lien.

4. Inclure des descriptions d’images (niveau A – 1.1.1)

L’ajout de texte alternatif aux images est souvent une réflexion après coup et aboutit à des descriptions d’images comme « image » et « nom de fichier.jpg », ce qui signifie que les utilisateurs passent à côté d’un élément clé de l’accessibilité.

Il est important d’avoir un texte descriptif pour les utilisateurs qui ne peuvent pas voir ces images. Une technique pour déterminer le texte alternatif d’une image serait de regrouper les images dans les trois catégories suivantes : simples, complexes ou décoratives.

Simples

Ces images sont des photographies, des icônes ou des logos, et le texte descriptif doit être succinct.

<img src="fleurs.jpg" alt="Fleurs dans un jardin." />

Complexes

Ces images sont des diagrammes ou des graphiques et le texte descriptif sera plus détaillé.

<img src="diagram.jpg" alt="Figure 1. Taux d'utilisation des lecteurs d’écran au Canada" />

Décoratives

Ces images sont purement décoratives, l’attribut alt est vide et un attribut de rôle indique presentation. Cela signifiera au lecteur d’écran d’ignorer l’image.

<img src="espacement.png" alt="" role="presentation" />

5. Navigation au clavier (niveau A – 2.1.1)

L’une des caractéristiques les plus importantes de l’accessibilité est la possibilité de naviguer sur un site Web avec uniquement le clavier.

Les utilisateurs doivent pouvoir naviguer dans le contenu et les éléments de manière séquentielle et cohérente (niveau A – 2.4.3). En ajoutant un attribut tabindex de valeur 0 à un élément, cela |'insère dans l’ordre de tabulation en fonction de son emplacement dans le code source. Ceci permet également à n’importe quel élément d’avoir le focus.

L’état de focus doit être présent et cohérent pour tous les éléments de navigation (niveau AA – 2.4.7). C’est une bonne pratique lors de la création de composants personnalisés d’utiliser des éléments HTML « focalisables ». Cela vous permet de profiter de la fonctionnalité par défaut, autrement le focus au clavier et le support d’interactions doivent être fournis.

Enfin, l’ajout d’un lien de saut direct vers le contenu principal permet au lecteur d’écran de passer le bloc des éléments de navigation, évitant ainsi d’avoir à passer en revue chaque lien sur chaque page. (Niveau A 2.4.1.)

 

Ressources sur l’accessibilité (en anglais)

Sources