Salut et bienvenue dans ce nouvel épisode du podcast de Code Garage.
Je m'appelle Nicolas Brondin-Bernard et aujourd'hui, on va aborder un thème qui
touche à l'accessibilité web et ce thème, c'est le WCAG.
Qu'est-ce que c'est le WCAG ?
Eh ben, c'est tout simplement un standard de référence pour l'accessibilité.
C'est des initiales qui veulent dire Web Content Accessibility Guidelines.
C'est un standard qui est publié par le W3C et il définit simplement des règles,
des critères techniques et des recommandations qui simplement permettent de considérer
un site web comme étant accessible ou non.
Alors, ces WCAG sont divisés en quatre principes.
En anglais, on a un acronyme pour ça, c'est pour P O U R parce que ça signifie,
donc ces quatre principes, c'est Perceivable, Operable, Understandable et Robust.
Donc en français, ça donne perceptible, ça veut dire que le contenu,
il doit être visible et compréhensible pour tous.
Utilisable, la navigation et les interactions doivent être accessibles pour tous,
utilisables par tout le monde.
Compréhensible, le contenu et les interfaces doivent être clairs et prévisibles, on va dire.
Et puis robustes, les contenus doivent fonctionner, s'afficher sur plusieurs dispositifs,
écrans, technologies, etc.
Alors, il y a plusieurs versions du standard, il y en a trois grosso modo, trois principales.
Il y a la 2.0, la 2.1 et la 2.2.
Ce ne sont pas des versions qui s'annulent les unes les autres,
c'est simplement chaque nouvelle version vient rajouter des règles à respecter.
Alors justement, ces règles à respecter, c'est quoi les règles exactement à respecter ?
Eh bien, il y a 13 règles de conformité pour WCAG.
Et donc, on les regroupe tout sous les 4 principes que je viens de vous citer.
Et donc, on va voir ensemble les 13 règles.
Je vais passer assez rapidement dessus pour pas que cet épisode de podcast fasse 30 minutes,
mais voilà, on va au moins toutes les voir.
Donc dans le principe numéro 1 qui est perceptible,
on a une règle qui dit qu'on doit fournir des alternatives textuelles.
Ok ? Ça veut dire que chaque contenu non textuel,
donc des images, des graphiques, peu importe,
doit inclure une description textuelle.
C'est par exemple avec, par exemple, la balise ALT pour les images.
Deuxième règle, fournir des alternatives pour les médias temporels,
pour les multimédias temporels.
Alors, par exemple, la multimédia temporelle, c'est une vidéo.
Donc une vidéo a doit inclure des sous-titres pour les malentendants,
des descriptions pour les gens qui voient, on déprime de vision.
Mais ça peut être aussi, carrément, une transcription juste textuelle
où on n'a pas besoin de regarder la vidéo.
Troisième règle, c'est créer un contenu adaptable.
Le contenu doit pouvoir être présenté sous différentes formes,
sans perdre d'informations.
Par exemple, si on prend un tableau avec juste des valeurs,
et bien si on n'a pas le contexte de ce tableau,
on ne va pas comprendre les informations.
Donc il va falloir des entêtes et des colonnes à ces tableaux
pour décrire le contenu, par exemple pour les lecteurs d'écran.
Ensuite, on a rendre le contenu distingable.
Ça, c'est plutôt au niveau des couleurs et des contrastes,
mais aussi des tailles de texte.
On a aussi un texte qui est écrit.
Et bien on doit pouvoir le percevoir facilement,
que ce soit en termes de contraste ou de taille de texte.
Ensuite, on rentre dans le principe numéro 2, qui est le principe utilisable.
La première règle de ce principe, c'est assurer la navigation au clavier.
Chaque contenu interactif, il doit pouvoir être accessible,
et on doit pouvoir naviguer dedans uniquement avec un clavier.
Ensuite, on a fournir des délais suffisants.
Ça, c'est par exemple sur des animations ou des choses comme ça.
Chaque utilisateur doit avoir le temps de lire ou d'interagir avec le contenu.
Ça peut être soit de mettre en pause les animations
ou vraiment de faire en sorte que les animations ne soient pas trop rapides.
Si on prend par exemple une bannière, un caroussel qui défile,
si chaque chose défile toutes les deux, trois secondes,
pour plein d'utilisateurs, ça ne sera pas accessible du tout.
Ensuite, celle-là est assez basique,
mais elle est hyper importante, c'est prévenir les crises et les réactions physiques.
Ça fait un peu peur comme ça, mais en fait,
ça se base sur la conception de contenu qui peut être susceptibles
justement d'éclencher des crises déplièpsies par exemple ou des animations clignotantes.
Ça vaut pour les vidéos, les animations, des choses comme ça.
Si vous avez une animation qui clignote rapidement,
ça peut provoquer des crises chez les gens.
Donc ça, évidemment, c'est quelque chose à vraiment faire attention.
Après, c'est assez niche, c'est rare d'avoir des animations très clignotantes,
à part dans les sites web des années 90.
Sinon, on le respecte plus ou moins aujourd'hui,
parce que de toute façon, même en termes de design, c'est vraiment pas ouf.
Ensuite, on a facilité la navigation.
Ça veut dire avoir des titres clairs, des liens qu'on comprends
et qui peuvent, ça nous permet de sauter certains chapitres.
Par exemple, quand vous avez un article de blog,
c'est bien, effectivement, d'avoir un sommaire avec les différents titres
où on peut sauter des sections
et surtout, évidemment, avoir une structure logique de navigation
que ce soit avec une bonne sémantique des titres de H1, H6, etc.
Et enfin, pour la dernière règle de ce pilier,
c'est, enfin de ce principe, fournir plusieurs modalités d'interaction.
Ça veut dire quoi ?
Ça veut dire autoriser des gestes alternatifs.
Ça veut dire éventuellement annuler une action qu'on a faite par erreur
ou éviter d'imposer des interactions qui sont vraiment trop complexes
pour certains utilisateurs.
C'est le cas, par exemple, du glisser déposé.
Ensuite, on a le principe 3 qui est donc compréhensible.
Alors là, c'est rendre le texte lisible mais compréhensible.
Donc tout à l'heure, on a parlé de la taille du texte et des contrastes.
Mais là, on est plutôt dans le contenu.
Donc, ça va être indiqué la langue de la page,
utilisé à la fois une langue et un langage qui est adapté à l'utilisateur.
Mais ça peut tout simplement être fournir des explications pour des termes complexes.
Nous, ce qu'on essaye au maximum de faire dans tous les contenus sur code garage,
notamment sur le blog, c'est dès qu'on utilise un acronyme ou un anglaissisme ou peu importe,
eh bien on le traduit, on l'explique et on le vulgarise,
même si c'est en une petite phrase.
Ensuite, c'est rendre les interfaces prévisibles.
Ça, pareil, c'est vraiment juste quelque chose en UX qu'on essaye de faire.
C'est maintenir une cohérence dans les interactions et les comportements des éléments.
Donc tous les boutons vont se ressembler.
Quand on a un bouton, il va faire plus ou moins la même chose en fonction
que ce qui est écrit dessus.
Si ça dit télécharger, ça va toujours télécharger un fichier.
Voilà, ça ne va pas ouvrir une pop-up, etc.
Donc ça, c'est simplement habiter l'utilisateur et lui donner confiance
dans le fait que quand il va faire quelque chose,
eh bien ça va se retranscrire toujours de la même manière derrière le comportement.
Et enfin, la dernière règle de ce principe-là,
c'est aider à éviter et corriger les erreurs.
Par exemple, quand vous avez un formulaire,
si vous avez un formulaire qui vous dit simplement à la fin
quand vous le soumettez, il y a une erreur ou il y a une erreur dans le formulaire,
ça vous donne absolument aucune indication.
Ni de quel champ il s'agit, ni de quel erreur il s'agit.
Donc ça va être par exemple, justement,
d'avoir une erreur bien affichée pour chacun des champs
et pas simplement une erreur à la fin et puis que ce soit explicite.
Est-ce que c'est le format de la donnée qui est en cause ?
Est-ce que c'est autre chose ?
Est-ce que c'est juste manquant ?
Etc.
Et enfin, le dernier principe, lui, c'est le plus...
C'est pas forcément le plus simple à implémenter,
mais c'est le plus court parce qu'il n'y a qu'une seule règle.
Donc c'est le principe de robustesse.
Et la règle, c'est optimiser la compatibilité technique.
Ça va simplement d'avoir un code bien structuré mais valide.
Et surtout, on va faire en sorte qu'un maximum d'équipements,
que ce soit le navigateur, que ce soit la taille d'écran,
que ce soit peu importe,
et bien que tout ça, ce soit au maximum compatible
pour que peu importe la typologie des visiteurs,
que soit du handicap, mais de leur équipement aussi,
et bien ils puissent utiliser votre site web correctement.
J'espère que...
Bon voilà, j'ai essayé de vous le résumer.
J'espère que vous avez appris des choses.
Et quand même, j'ai pas été trop vite si j'aimais c'est le câble.
Je suis désolé, mais au moins réécoutez cet épisode en x0.25.
Mais voilà, comme ça, ça vous fait vraiment une entrée.
Si jamais vous n'avez pas trop suivi de cours ou quoi que ce soit,
sur l'accessibilité, ça permet de faire une bonne entrée en matière.
Si jamais vous voulez aller plus loin, j'en profite.
On vient tout juste de sortir un cours complet sur l'accessibilité.
Evidemment, vous allez retrouver ces règles encore plus détaillées,
mais tous les conseils, tout ce qu'il y a à faire pour implémenter ces conseils-là,
de manière technique, dans votre site, les erreurs à ne pas commettre,
les bonnes pratiques, etc.
Donc je vous mettrai le lien évidemment du cours en description de cet épisode.
Donc moi, je vous retrouve directement sur code.tierégage.fr
pour retrouver tous les articles de blog, tous les épisodes de podcast.
Et comme je viens de vous le dire, tous nos cours complets.
Et je vous retrouve la semaine prochaine pour un prochain épisode.
Pensez à laisser 5 étoiles sur votre plateforme de podcast sur le podcast de code.gage.
Ça nous aide à être référencé et à ce que encore plus de monde nous découvre
et apprenne de plus en plus de choses autour du dev.
Je vous donne rendez-vous la semaine prochaine.
Passez une bonne semaine. Salut !