Bonjour et bienvenue dans ce cours sur l’accessibilité sur le Web pour les développeurs. 🙂 Je m’appelle Thomas Dimnet, je suis le CTO de SensCritique, et mentor chez OpenClassrooms.
Ce cours a pour objectif de vous aider à intégrer une démarche d'accessibilité lors de vos développements web.
Nous verrons notamment dans ce cours :
les bonnes pratiques d’accessibilité à adopter quand vous développez votre page web ;
les attributs ARIA qui vous aideront dans votre démarche d’accessibilité ;
comment rendre accessibles les interactions, comme compléter un formulaire ou ouvrir une modale.
Pour bien saisir l’ensemble de ce cours et appliquer les concepts dont nous allons parler, il vous est nécessaire d’être familier :
avec le concept d’accessibilité, de connaître ce qu’est ARIA. Si ce n’est pas le cas, commencez par suivre le cours Concevez un contenu web accessible, avant de revenir sur ce cours ;
le HTML et le CSS. En effet, ce cours va tirer parti de ces deux langages, notamment de nombreux attributs HTML, pour construire un site accessible.
Comment suivre ce cours ?
Ce cours couvre de nombreux aspects de la programmation de site web prenant en compte les contraintes d’accessibilité. Selon votre profil, votre objectif, vous aurez plusieurs manières possibles de suivre ce cours :
Si vous travaillez sur un gros projet de développement web et avez besoin de compétences sur l’ensemble de la programmation accessible, vous pouvez suivre le cours entier : lire le texte et faire les quiz pour vérifier vos connaissances. Dans ce cas, je vous conseille vivement d’appliquer en parallèle, grâce aux exemples donnés à la fin de chaque chapitre.
Si vous ne travaillez que sur une partie spécifique de la programmation web, un élément particulier d’une page, je vous invite à passer directement au chapitre en question.
Si, enfin, vous vous intéressez à l’accessibilité web en général, sans nécessairement vouloir appliquer, en ce cas vous pouvez passer le cours en revu, lire les résumés de chapitres et ne rentrer dans le détail des textes que quand le sujet vous intéresse particulièrement.
Familiarisez-vous avec le contenu du cours
Dans ce cours, vous allez découvrir les techniques qui vont vous permettre de coder des sites web accessibles à tous !
Autrement dit, vous vous adressez à un public qui peut avoir :
des déficiences visuelles (aveugles, daltoniens, personnes ayant des glaucomes, etc.) ;
des déficiences de motricité (pour des personnes ayant subi un AVC, par exemple) ;
une connaissance limitée de votre langue (publics étrangers).
Par exemple, admettons que votre site dispose de vidéos. Le fait de les sous-titrer va les rendre accessibles aux personnes ayant des problèmes auditifs. Mais cela va aussi permettre aux personnes n’ayant pas de son sur leur ordinateur, ou à ceux ne parlant pas votre langue, de les comprendre.
Faire un site web accessible, c’est donc créer un site utilisable et compréhensible pour le plus grand nombre de personnes.
Vous trouverez dans ce cours :
du texte vous permettant :
de présenter les notions en détail et donner des conseils,
de donner des exemples des concepts que je présente,
de partager des liens vers des ressources complémentaires, telles que des articles de blog ;
des quiz vous permettant de valider les connaissances acquises durant le cours ;
et, enfin, un projet “Tonight in Gotham” qui nous servira de cas d’application tout au long des chapitres. À chaque fin de chapitre, vous trouverez un cas pratique d'application des concepts à ce projet.
Je vous invite donc à essayer d’appliquer le plus possible les concepts. Vous pouvez, par exemple, le faire :
via vos projets OpenClassrooms si vous suivez un parcours chez nous ;
via un projet personnel (c’est souvent le bon moment de tester une nouvelle technologie ou un nouveau concept et de le faire progressivement) ;
via votre travail (si vous êtes déjà développeur), en en parlant à vos collègues et/ou en essayant de l’intégrer à votre entreprise.
Appliquez les concepts clés grâce au projet fil rouge
En plus des snippets de code et des exemples d’application que vous allez pouvoir voir durant ce cours, nous allons travailler sur un projet.
Ce projet va être le fil rouge de notre cours. Pour chaque chapitre de chaque partie, le cours se divisera généralement en deux grandes sections :
une ou plusieurs sections notions + exemples, où je vous expliquerai les concepts et où je vous donnerai des exemples d’application ;
une dernière section où nous intégrerons ensemble la maquette d’une landing page au fil des chapitres.
Vous pouvez dès à présent télécharger les sources du projet créé que nous allons implémenter sur ce projet Figma. Vous pouvez trouver le code source de cette application sur ce repository GitHub.
À chaque fin de chapitre, vous trouverez un lien GitHub qui vous permettra de voir l’état du code une fois les étapes du chapitre implémentées.
Le projet “Tonight in Gotham”
Pour que vous puissiez mettre en pratique ce que nous allons voir dans ce cours, nous allons travailler sur un projet de création d’une page de blog.
Notre projet va donc porter sur Batman ! Vous pouvez voir sur la maquette ci-dessus qu’il est composé :
d’un header avec un menu de navigation, une barre de recherche et un menu déroulant ;
du corps principal avec le corps du texte, ainsi que d’une image ;
d’un footer comprenant un second menu de navigation et des liens vers les réseaux sociaux.
En résumé
Ce cours inclut des textes, un projet fil rouge réalisé sous forme de screencast ainsi que des quizzes.
Le projet de landing page vu tout au long du cours va vous permettre de mettre en pratique les éléments clés vus durant le cours.
Vous devez avoir un peu pratiqué le HTML/CSS pour saisir l’ensemble du cours.
Nous allons maintenant voir comment créer un squelette de page accessible, en utilisant la sémantique et les attributs ARIA.
