1.
@hellosct1
@hellosct1@mamot.fr
Christophe Villeneuve
Tests d’accessibilité par la pratique
DevOps Tahiti – 3 juin 2020

2.
Atos - @hellosct1 -
Aujourd’hui
●
Accessibilité : Rappel
●
Tests de validation manuelle
●
Tests de validation automatique
dans un environnement CI / CD

3.
Accessibilité : Rappel

4.
Atos - @hellosct1 -
Accessibilité numérique ?
L’accessibilité numérique signifie
que les sites web, technos et outils
sont conçus et développés
pour que les personnes handicapées
puissent les utiliser

5.
Atos - @hellosct1 -
C’est à dire

6.
Atos - @hellosct1 -
Les types d’handicap

7.
Atos - @hellosct1 -
RGAA
●
Référentiel Général d’Accessibilité pour les Administrations
●
V 4.0 – publié 2019
https://www.numerique.gouv.fr/publications/rgaa-accessibilite/

8.
Atos - @hellosct1 -
Thématiques
●
Images
●
Cadres
●
Couleurs
●
Multimédia
●
Tableaux
●
Liens
●
Scripts
●
Eléments obligatoires
●
Structure de
l’information
●
Présentation de
l’information
●
Formulaires
●
Navigation
●
Consultation

9.
Atos - @hellosct1 -
Exemple thématique

10.
Atos - @hellosct1 -
Tests de validation manuelle

11.
Atos - @hellosct1 -
Hints
●
Vérifie les bonnes pratiques et les erreurs courantes :
– Accessibilité
– Performance
– Sécurité
– Compatibilité
●
Addon Firefox
https://addons.mozilla.org/fr/firefox/addon/webhint/
●
En ligne
https://webhint.io/

12.
Atos - @hellosct1 -
Exemple

13.
Atos - @hellosct1 -
Tests automatisés
environnement CI / CD

14.
Atos - @hellosct1 -
Tanaguru
●
Outil open source (licence AGPL)
●
Objectif de tester l’accessibilité du site
●
Disponible
– CI / CD
– En ligne
– Github

15.
Atos - @hellosct1 -
Résultat (1/2)

16.
Atos - @hellosct1 -
Résultat (2/2)

17.
Atos - @hellosct1 -
CI / CD
●
Plugin Jenkins

18.
Atos - @hellosct1 -
Les liens
●
W3C
●
https://validator.w3.org/
●
RGAA
●
https://www.numerique.gouv.fr/publications/rgaa-accessibilite/
●
WebHint
●
https://webhint.io/
●
Tanaguru
●
https://www.tanaguru.com/
– CI / CD
●
https://tanaguru-jenkins-plugin.readthedocs.io

19.
Atos - @hellosct1 -
Merci
Christophe Villeneuve
https://hello-design.fr
@hellosct1
@hellosct1@mamot.fr
Armony Altinier