Intégrer facilement de l’accessibilité dans votre projet front-end

accessibilite-projet-front-end

Nous travaillons assez rarement sur des projets qui doivent être accessibles. Nos clients, comme nous-mêmes ne sommes pas assez sensibilisés à cette question et nous avons tendance à aborder ce thème avec certains apriori :

  • C’est compliqué
  • Les sites accessibles sont moches
  • C’est pour 3 aveugles et 2 sourds
  • C’est cher

Dans ce billet, je vais m’attaquer au premier apriori de cette liste, et montrer comment on peut apporter de l’accessibilité dans nos projets de manière rapide et assez facilement. Le résultat ne sera pas parfait car l’accessibilité ne concerne pas que le développement front mais toute l’équipe projet (UX, Designer, Rédacteurs de contenus, Développeurs back-end,…). Mais vous allez voir que des petites choses très simples peuvent avoir un impact très important sur l’accessibilité.

 

Mettre un attribut lang sur la balise HTML

Cela semble couler de source et pourtant, je visite régulièrement des sites qui n’en ont pas.

L’utilité de cet attribut est qu’il permet aux lecteurs d’écran de restituer le contenu avec la bonne prononciation et, lorsque précisé, le bon accent (Français Canadien par exemple). Faites le test avec NVDA ou VoiceOver de faire lire de l’anglais à votre synthèse vocale configurée en français et plus jamais vous n’oublierez de mettre cet attribut !

 

Ne pas utiliser maximum-scale= 1.0 dans la meta viewport

Le problème de cette propriété est qu’elle empêche les utilisateurs de zoomer. Imaginez que le texte écrit est petit, même pour vous qui avez une bonne vue ; votre réflexe va être de zoomer dessus, sauf que cette propriété est présente. Dommage…

 

Ne pas supprimer l’outline

Cela représente 1 ligne de CSS à ne pas écrire, ou à supprimer si vous utilisez un framework.

Je ne peux que vous inviter à aller sur ce site qui dit tout : http://www.outlinenone.com/

Pour résumer, l’outline est indispensable lorsque vous utilisez la navigation au clavier. Pour faire un test rapide, allez sur le site de 20minutes http://www.20min.ch/ro/ et allez dans la rubrique Cinéma qui se trouve dans le menu principal en utilisant seulement la touche de tabulation (et sans regarder l’URL en bas de page 😉 ). Difficile n’est-ce pas ? Si le style outline avait été présent lors de la prise de focus, vous auriez tout de suite vu où vous étiez.

 

Mettre des liens d’évitement

Cela se résume à mettre au tout début de votre code des liens vers les zones principales de votre site. Ils peuvent être masqués par défaut mais doivent apparaître au focus. Les liens les plus courants sont « Aller au menu » « Aller au contenu » et « Aller au pied de page ». Il s’agit ensuite de mettre une ancre sur la zone à cibler. Cela permet aux personnes utilisant la navigation au clavier (ou autre technologie d’assistance) de passer directement à la zone qui les intéressent, sans avoir à tabuler à travers tout un menu par exemple. Il faut très peu de temps pour les intégrer et cela en fait gagner beaucoup à vos utilisateurs, en plus du confort.

Voici un exemple de mise en place de ces liens :

<ul class="skip_links">
    <li>
        <a href="#nav" class="a11y_hidden">Aller à la navigation</a>
    </li>
    <li>
        <a href="#page" class="a11y_hidden">Aller au contenu</a>
    </li>
</ul>

<nav role="navigation" id="nav">
    <ol>
        <li>
            <a href="/">Qui sommes-nous?</a>
        </li>
    </ol>
</nav>

<main role="main" id="page">
    <p>
        Début du contenu auquel on accède plus rapidement grâce aux liens d'évitement.
    </p>
</main>

 

Utiliser une sémantique cohérente

<span onclick="btnFunction();" class="btn btn-primary">Cliquez ici</span>

Pourquoi faire ça alors qu’il existe un élément HTML <button> ?

Cela est valable aussi pour les liens, il est très courant de voir des liens qui sont utilisés comme des boutons. Pourtant il est plus logique d’utiliser un lien pour rediriger quelque part et un bouton pour faire une action autre.

On peut aussi penser à utiliser les listes ordonnées, non ordonnées et de définitions pour bien structurer l’information, les balises HTML5 de structure comme <header>, <footer>, <main>, <section>, … qui donnent du sens contrairement à des <div> ou des <span> qui n’ont aucune valeur sémantique.

 

ARIA est votre ami

Utilisez les rôles ARIA pour aider les utilisateurs de lecteurs d’écrans à se repérer dans vos pages.

<header role="banner"> <footer role="contentinfo"> etc… ce ne sont que des attributs à ajouter sur des éléments qui sont utilisés très couramment maintenant.

Si vous utilisez des animations en JavaScript, les attributs Aria peuvent aider vos utilisateurs sur de nombreux aspects (champs obligatoires dans un formulaire, onglet actif dans une navigation et bien d’autres).

 

Bien organiser les niveaux de titres

La navigation par lecteur d’écran peut se faire par les titres. Ainsi, il est important d’avoir un ordre logique dans ceux-ci. Si, pour des raisons esthétiques, vous avez besoin d’un <h3> après un <h1>, utilisez CSS pour avoir le rendu souhaité, et utilisez un <h2> pour respecter cet ordre.

 

Mettre un attribut alt sur les images

L’alternative textuelle est utile pour les personnes utilisant un lecteur d’écran. Mais il faut la renseigner selon certains critères. S’il s’agit d’une image décorative, c’est-à-dire qu’elle n’est pas essentielle à la compréhension du contenu, vous devez mettre un alt="".

En revanche, si l’image est essentielle à la compréhension (Texte dans l’image, bouton image…) il faut renseigner ce alt de manière pertinente, en reprenant par exemple le texte contenu dans l’image.

Ce n’est pas un critère toujours simple à aborder. Pour cela, vous pouvez vous fier à la ressource suivante qui schématise parfaitement le cheminement de réflexion à avoir.

L’article complet se trouve à l’adresse suivante : https://bitsofco.de/alternative-text-and-images/

 

Un peu de test

Essayez de naviguer sur votre page en utilisant uniquement le clavier, cela vous permettra de lever très rapidement des problèmes d’accessibilité. Le outline est-il masqué ? L’ordre de navigation est-il logique par rapport à ce qu’il devrait ? Les liens d’évitement sont-ils présents et fonctionnels ? Si ces points sont vérifiés, c’est un bon début !

 

Conclusion

Voici les méthodes que je mets en place sur tous les nouveaux projets sur lesquels je travaille même si l’accessibilité n’est pas dans le scope. Comme vous pouvez le constater, c’est rapide à mettre en place et ne demande pas de se plonger dans des référentiels ou d’avoir une connaissance approfondie sur le sujet. Cela n’a pas non plus d’impact sur le design (à part pour l’outline mais c’est très mineur) et cela aide les personnes utilisant des technologies d’assistance, même s’il reste beaucoup à faire.

 

Quelques outils pour aller plus loin

Dans le lien ci-dessous, vous trouverez une liste de ressources très diverses sur l’accessibilité (articles, bonnes pratiques, plugins JavaScript,…)

https://github.com/atalan/a11y-resources/blob/master/list-of-a11y-resources.md

Mylène Chandelier
Publié le par
Mylène Chandelier
Développeuse Front-end
0 Commentaire

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *