• 6 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 01/08/2023

Allez plus loin avec l’accessibilité

Nous arrivons presque au terme de ce cours sur l’accessibilité. :) Nous allons à présent faire le bilan de ce que nous avons abordé, et profiter de ce chapitre pour aller un peu plus loin, et notamment :

  • côté libraires et validateurs de code ;

  • côté JavaScript et intégration de l’accessibilité dans certains frameworks JavaScript.

Réalisez le bilan de ce cours

Ce cours vous a permis d’acquérir les bases de l’accessibilité dans le développement web. Vous pouvez dès à présent mettre en pratique tous ces conseils dans vos projets de développement !

Comme vous avez pu le constater, intégrer l’accessibilité dans le cadre du développement d’un projet web est tout à fait faisable et ne demande pas beaucoup de travail en plus.

Cela dit, plus la démarche d’accessibilité est mise en place en amont, mieux elle sera intégrée. En effet, sur un projet existant, cela peut vous demander un peu plus de temps pour rendre votre site accessible.

Découvrez des outils dédiés à l’accessibilité

Dans cette section, je vous propose de découvrir deux types d’outils qui vous faciliteront la vie en tant que développeur pour l'accessibilité :

  • les outils assez classiques type validateurs (comme ceux que vous avez peut-être déjà utilisés pour le HTML ou le CSS), ainsi qu’une checklist ;

  • les outils plus modernes, à savoir des librairies que vous allez pouvoir faire tourner sur votre machine ainsi que sur une CI (pour Continous Integration).

Découvrez les validateurs et les checklists

Lorsqu’on travaille sur un site statique, autrement dit sans base de données, gestion de comptes utilisateurs ou interactions poussées, nous n’avons pas forcément besoin d’avoir une architecture de travail complexe.

Dans ce type de cas, le validateur AChecker ci-dessous sera un bon outil.

Le validateur “AChecker”

Très proche des validateurs CSS et HTML que vous pouvez utiliser lorsque vous commencez à développer, AChecker vous permet de vérifier que votre code HTML respecte les conventions et n’a pas d’erreurs.

Si par exemple je teste le code de mon carrousel codé au chapitre P2C3, le validateur me dit que tout va bien !

Message de AChecker disant Congratulations! No known problems. Il indique donc qu'il n'y a pas de problème d'accessibilité sur la page.
Message de AChecker pour un code accessible

La checklist

Comme vous l’avez peut-être vu dans le cours “Concevez un contenu web accessible”, vous pouvez aussi utiliser une checklist pour vérifier que votre site est conforme.

Outre la liste du cours précédent, voici un autre exemple de checklist, celle du projet A11YProject. Suivre cette checklist est un bon moyen de vérifier que vous n'avez rien oublié dans l'accessibilité du site.

Utilisez des librairies et l’intégration continue

Lorsque que votre projet grandit ou qu’il est plus complexe, l’idéal va être de passer par des librairies qui feront le travail à votre place.

L’organisation Pa11y met à votre disposition de nombreux outils que vous allez pouvoir utiliser tant sur votre machine que dans le cadre d’une intégration continue.

Cette méthode permet, entre autres, de tester votre code de façon automatisée sur des serveurs, et de faciliter les déploiements.

Utilisez le JavaScript de manière accessible

Pendant longtemps, le JavaScript nous a servi avant tout à animer des pages web (ce que le CSS ne nous permettait pas de faire). Il ne nous servait pas, par exemple, à récupérer des données depuis un serveur (les fameuses requêtes AJAX). C’est à cette époque que sont arrivés les concepts de JavaScript non obstrusif, de dégradation gracieuse et d’amélioration progressive.

Le JavaScript non obstrusif

Ce concept de programmation est une approche visant à limiter le rôle du JavaScript dans les pages. Autrement dit, un utilisateur ayant désactivé le JavaScript de son navigateur ne devrait pas avoir une utilisation dégradée du service.

Cela dit, ce concept est de moins en moins applicable. En effet, l’utilisation du JavaScript a largement augmenté depuis 2005 et aujourd’hui, tous les sites web ou presque ont besoin du JavaScript pour fonctionner.

De plus, la compatibilité du JavaScript a été grandement améliorée et uniformisée sur les navigateurs. Cela rend désormais l’utilisation de ce langage de programmation moins problématique côté front.

La dégradation gracieuse et l’amélioration progressive

Ces deux concepts vont souvent de pair. Les deux décrivant des stratégies et méthodes pour rendre un site utilisable par le plus grand nombre.

Il m’est impossible de terminer ce cours sans vous parler d’un livre dédié à l’amélioration progressive : Adaptive Web Design de Aaron Gustafson.

Cet ouvrage commence à dater un peu, on n’y parle pas de frameworks comme React ou Angular, mais il constitue un bon complément à ce cours.

En résumé

  • Pensez à valider votre site avec des validateurs ainsi que des outils intégrés à l’infrastructure de votre projet.

  • Vous pouvez aussi réaliser une checklist avec votre chef de projet/designer, pour cadrer l’accessibilité de votre site.

  • Les concepts d’amélioration progressive et de dégradation gracieuse sont des philosophies de développement front-end.

Et voilà, c'est la fin de ce cours. J'espère qu'il vous sera utile pour rendre le code de vos sites accessible, et vous accompagner dans vos développements. Je me suis efforcé d'y mettre toutes les recommandations et outils que j'ai pu. Je vous souhaite bon courage dans vos projet, et à bientôt ! :)

Et si vous obteniez un diplôme OpenClassrooms ?
  • Formations jusqu’à 100 % financées
  • Date de début flexible
  • Projets professionnalisants
  • Mentorat individuel
Trouvez la formation et le financement faits pour vous
Exemple de certificat de réussite
Exemple de certificat de réussite