fbpx
Ressources et documentations pour l'accessibilité des pages web

Ressources et documentations pour l’accessibilité des pages web

Partager sur facebook
Partager sur linkedin
Partager sur twitter
Partager sur email

Parce qu’il est parfois difficile de s’y retrouver parmi toutes les informations que nous fournit notre moteur de recherche préféré, cet article a pour objectif de présenter un ensemble de sites (avec présentation brève) dont vous aurez besoin pour mettre en place l’accessibilité numérique dans vos pages web. Bien sûr, n’hésitez pas à nous recommander vos références si ces dernières ne sont pas citées dans cet article !

Documentations officielles

On commence par une thématique évidente : les documentations officielles. Celle du W3C est le must read, même si elle peut paraître dense, cette documentation fourmille d’explications, d’exemples détaillés (avec démo) accompagnés de leur code source, et d’autres précisions comme l’importance du clavier.

Le RGAA de numerique.gouv.fr est une autre documentation à absolument prendre en compte. Elle est moins fournie en termes d’exemples, mais a le mérite d’avoir un glossaire très riche. Chaque élément y est expliqué et détaillé pour comprendre au mieux les critères à valider. Et en plus, tout est en français !

Sur ce site, il est également mis à disposition des modèles à utiliser sur ses sites web, comme par exemple, un modèle de :

rapport d’audit
déclaration d’accessibilité
modèle de grille pour faire son audit.

→ Bref, des documents à garder sous le coude.

Petit hic du RGAA : les critères sont parfois rédigés de manière alambiquée et nécessiteraient plus d’exemples. Bonne transition pour parler des articles suivants qui serviront de documentations complémentaires.

Documentations complémentaires

Dans cette seconde thématique, nous mettons en lumière les documentations qui vont reprendre les critères du RGAA mais sous forme de plusieurs rubriques (liens, images, formulaires, etc.) afin de donner plus de clarté et retrouver en un coup d’œil des exemples. Et, bonus, ces sites sont rédigés en français !

Exemple de la rubrique « Images » sur le site AcceDe Web et le guide de l’intégrateur

On commence par le site d’Atalan, AcceDe Web, qui met à disposition des « notices » explicatives, avec exemple(s) et codes source.

Accede Web : présentation de la liste des notices et d’un exemple de notice

Dans la même lignée que le RGAA, des « guides » ont été rédigés par le gouvernement et plus précisément par la Direction Interministérielle du Numérique (DINUM). Il en existe plusieurs qui correspondent chacun à un métier (sauf exception pour le dernier) :

guide de l’intégrateur
guide du développeur
guide du contributeur
guide du chef de projet
guide du concepteur
guide sur les lecteurs d’écran

Et même si sur le papier ils ont été rédigés pour le RGAA 3, les différences ne sont pas colossales, et s’appliquent également à la version 4 (voir notes de révision sur les différences entre les deux versions).

Créer des composants accessibles

On continue avec une petite liste de sites qui vont vous permettre de développer des composants/éléments accessibles, que l’on a tendance à souvent retrouver dans un site web (menu de navigation, slider, modale, accordéon, formulaire, etc… ) :

https://www.w3.org/WAI/tutorials/ (anglais)
https://a11y-style-guide.com/style-guide/ (anglais)
https://van11y.net/fr (script JS)

Les deux premiers sites permettent de retrouver plusieurs exemples accompagnés de leurs codes sources, par nom de composant (table, formulaires, cards), et permettent, comme pour la thématique précédente, de trouver ce que l’on recherche en un coup d’œil.

Quant au dernier site, Nicolas Hoffmann propose des scripts JS qui permettent de générer des composants ARIA, des attributs, etc. en fonction de classes CSS que l’on ajoute directement dans son code. Une démarche qui peut être étonnante mais qui peut sauver du temps, à tester !

À gauche, présentation du site a11y-style-guide.com, et à droite du site van11y.net

Pour suivre l’actualité :

Enfin, car le sujet est vaste, nous terminons cet article avec une liste de sites web très utiles pour se tenir informé :

https://www.numerique.gouv.fr/actualites/ (en français)
https://access42.net/blog (en français)
https://webaim.org/blog/ (en anglais)

Publié par Alsacreations.com

Découvrez
nos autres articles

S'abonner à la newsletter.

pour être averti des nouveaux articles

Merci d'avoir répondu à ce questionnaire !

Nous allons pouvoir étudier votre projet puis nous vous enverrons un devis.

Votre demande de suppression des données personnelles a été envoyé avec succès.

Nous la traiterons dans les plus bref délais

Votre message a bien été envoyé !

Votre demande sera traité dans les plus bref délais

Merci pour votre inscription !

Félicitation ! Vous êtes désormais inscrit et vous recevrez votre première newsletter très bientôt