Présentation effectuée à la AOSC (28 janvier 2020) par Christophe Villeneuve sur "L'accessibilité web avec WCAG et RGAA". Vous verrez les notions générales de l'accessibilité, le moyen de le mettre en place dans son code et valider avec des outils si l'ensemble du référentiels est respecté.

1. Accessibilité web
Christophe Villeneuve
@hellosct1
@hellosct1@mamot.fr
AOSC – le 28 janvier 2021
WCAG & RGAA

2. Atos open source - afup – lemug.fr – mariadb – drupal – mozilla - firefox – lemugfr - sumo – webextensions – VR – AR – XR - Cause commune 93.1 FM - TechSpeaker - Lizard - eyrolles – editions eni – programmez – linux pratique – webriver – elephpant -
CommonVoice – Sécurité - Cybersécurité
Christophe Villeneuve
●
Consultant Open Source
●
Dresseur animaux

3. @hellosct1 -
Aujourd’hui
●
Accessibilité ?
●
Dans le code / développement / projet web
●
Outils de validation

4. ●
Accessibilité ?
Code / Développement
Outils

5. @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

6. @hellosct1 -
C’est à dire

7. @hellosct1 -
Les types d’handicap

8. @hellosct1 -
Exemple : Handicap Visuel
Q :
R :

9. @hellosct1 -
Exemple : Accès contenu
Q :
R :

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

11. @hellosct1 -
Contenu
●
Document introduction
– Anciennement appelé RGAA
oui, comme le décret, comme le référentiel...
ce qui rendait les choses un peu confuses..
●
Guide d'accompagnement
●
Référentiel technique
– la liste des critères et des tests
– le glossaire
– les cas particuliers
– les notes techniques
– la base de référence
– les références ayant conduits à l'élaboration du référentiel technique.

12. @hellosct1 -
●
Images
●
Cadres
●
Couleurs
●
Multimédia
●
Tableaux
●
Liens
●
Scripts
• Eléments obligatoires
• Structure de
l'information
• Présentation de
l'information
• Formulaires
• Navigation
• Consultation
13 thématiques
https://references.modernisation.gouv.fr/sites/default/files/RGAA3/referentiel_technique.htm

13. @hellosct1 -
Exemple thématique (1/2)

14. @hellosct1 -
Exemple thématique (2/2)

15. @hellosct1 -
WCAG
●
Règles internationales
●
Actuellement v2.1 (Draft 3.0)
●
Edité par le consortium W3C
●
Couvre le standard européen
– Technologies de communication à la voix
– Vidéo (Sous Titrage, audiodescription…)
– Le matériel
– Les logiciels
– La documentation
– …

16. @hellosct1 -
Organisation des règles d’accessibilité web ?

17. @hellosct1 -
4 principes
●
1 – Perceptible
●
Alternative textuelle
●
Adaptable
●
Distinguable
●
2 – Utilisable
●
Accessible au clavier
●
Temps suffisant
●
Crises et réactions
physiques
●
Navigable
●
Modalités de saisie
●
3 – Compréhensible
●
Lisible
●
Prévisible
●
Assistance de saisie
●
4 – Robuste
●
Compatible

18. @hellosct1 -
Exemple
https://www.w3.org/TR/WCAG21/

19. @hellosct1 -
Grille de comparaison
https://design.numerique.gouv.fr/assets/pdf/RGAA4_vs_WCAG2.1.pdf

20. Accessibilité ?
Code / Développement
Outils

21. @hellosct1 -
Quand dans le développement ?
Directives
d'accessibilité
pour la
conception
graphique et UX
Directives
d'accessibilité
pour HTML /
CSS
Directives
d'accessibilité pour
les interfaces riches
et Javascript
Directives
d'accessibilité pour les
éditeurs (modèle)
Conception
de maquette
Codage
HTML
Développement
et
intégration
Publication de
contenu en ligne

22. @hellosct1
➢
Page HTML ✔
Template HTML
✔
Title - Meta
✔
Zone / Région
✔
Navigation
✔
Contenus Textuels
Développement

23. @hellosct1
Page HTML : Exemple
Navigation Contenus contextuels

24. @hellosct1
➢
Page HTML
➢
Images
✔
Balise alt
✔
Texte associé à une image
Développement

25. @hellosct1
Images : Exemple
<div role="img" aria-label="Description image">
<!-- Mauvais exemple ! -->
<img src="image.jpg" />
<!-- Autorisé -->
<img src="image.jpg" alt="" />
<!-- Correcte -->
<img src="image.jpg" alt="Alternative textuelle de l’image" />
</div
<figure role="group" aria-label="baseline du logo">
<img src="image-logo.jpg" alt="Logo du site web" width="120" height="120">
<figcaption>baseline du logo</figcaption>
</figure>
Texte (baseline) associé à 1 image

26. @hellosct1
➢
Page HTML
➢
Images
➢
Liens / Boutons
✔
Balise Title
Développement

27. @hellosct1
Liens / Boutons : Exemple
<a href="mon-url"
aria-label="Lire la suite : Le projet du client xxx"
title="Lire la suite : Le projet du client xxx"
>
Lire la suite
</a>
<input
type="submit"
value="Rechercher"
title="Rechercher une actualité"
/>
<button
role="button"
onclick="handleBtnClick(event)"
onKeyUp="handleBtnKeyUp(event)"
aria-pressed="false"
aria-label="Mode édition"
aria-required="true"
> Mode Édition *</button>
Bouton / Submit
Lien
Attention :
Liens non explicites
- Lire la suite
- En savoir plus
- Plus d’informations
- Cliquer ici
- OK
Attributs
- Aria-label
- Title

28. @hellosct1
➢
Page HTML
➢
Images
➢
Liens / Boutons
➢
Formulaires
✔
Balise Title
✔
Label des champs
✔
Champ Bouton
✔
Champ Input
Développement

29. @hellosct1
Formulaires : Exemple 1
<fieldset>
<legend>Participant 1</legend>
<label for="nom">Votre nom</label>
<input type="text" id="nom" name="nom" />
</fieldset>
<fieldset>
<legend>Participant 1</legend>
<label for="annee-naissance">Votre année de naissance</label>
<select id="annee-naissance" name="annee-naissance">
<option value="2022">2022</option>
<option value="2021">2021</option>
<option value="2020">2020</option>
<option value="2019">2019</option>
</select>
</fieldset>
- Utiliser <label> pour baliser chaque intitulé.
- Attribut for sur chaque balise <label> ainsi
qu'un attribut id sur chaque champ.
- Attributs id et for de chaque couple
intitulé/champ.
- Groupes de champs : <fieldset> + <legend>
- Utiliser <label> pour baliser chaque intitulé.
- Attribut for sur chaque balise <label> ainsi
qu'un attribut id sur chaque champ.
- Attributs id et for de chaque couple
intitulé/champ.
- Groupes de champs : <fieldset> + <legend>

30. @hellosct1
Formulaires : Exemple 2
<h3 id="rg1_label">Options du déjeuner</h3>
<ul class="radiogroup" id="rg1" role="radiogroup" aria-labelledby="rg1_label">
<li id="r1" tabindex="-1" role="radio" aria-checked="false">
<img role="presentation" src="radio-unchecked.gif" /> Thaï
</li>
<li id="r2" tabindex="-1" role="radio" aria-checked="false">
<img role="presentation" src="radio-unchecked.gif" /> Subway
</li>
<li id="r3" tabindex="0" role="radio" aria-checked="true">
<img role="presentation" src="radio-checked.gif" /> Libanais
</li>
</ul> - aria-describedby : Associer Descriptif à un
groupe de données
- aria-describedby : Associer Descriptif à un
groupe de données

31. @hellosct1
➢
Page HTML
➢
Images
➢
Liens / Boutons
➢
Formulaires
➢
Couleurs
✔
Contrastes
✔
Couleurs
Développement

32. @hellosct1
Couleurs : Exemple

33. @hellosct1
➢
Page HTML
➢
Images
➢
Liens / Boutons
➢
Formulaires
➢
Couleurs
✔
Clavier
✔
Souris
✔
Navigation
✔
Sous-menu
✔
Fenêtre modale
✔
Infobulle
✔
Zoom
✔
Etre bloqué sur un élement
➢
Navigation
Développement

34. @hellosct1
Navigation : Exemple
<body>
<a class="evitement" href="#contenu">Aller au contenu</a>
…
<div id="main" role="main">
<a id="contenu" tabindex="-1"></a>
…
</div>
…
</body>
Touche TAB : lecture logique
tabindex
* 0 : Accéder à tous les éléments à l'aide du
clavier
* 1: permet de donner le focus aux
éléments sans les ajouter à l'ordre de
tabulation
tabindex
* 0 : Accéder à tous les éléments à l'aide du
clavier
* 1: permet de donner le focus aux
éléments sans les ajouter à l'ordre de
tabulation

35. @hellosct1
➢
Page HTML
➢
Images
➢
Liens / Boutons
➢
Formulaires
➢
Couleurs
✔
Contenus masqués
✔
display: none;
✔
Visibility: hidden ;
✔
Apparence
✔
Taille de texte
✔
Accès à l’information
➢
CSS
Développement
➢
Javascript

36. @hellosct1
CSS : Exemple
- Uniquement des tailles relatives :
em
%
x-small, small...
etc
Accès à l’information = contraste
Tailles pour la police de caractères

37. Accessibilité ?
Code / Développement
Outils

38. @hellosct1 -
Navigateur Firefox
●
Barre d’outils intégré dans le navigateur
●
Identification avec l’inspecteur
●
...

39. @hellosct1 -
Exemple
Constraste
Message d’alerte

40. @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/

41. @hellosct1 -
Exemple
Catégories Détails

42. @hellosct1 -
AInspector WCAG
●
Inspecte les pages Web
– Détection des problèmes liés
●
Aux exigences WCAG 2.0 niveau A et AA
●
Addon Firefox
– https://addons.mozilla.org/firefox/addon/ainspector-wcag
●
Lexique
V : violations
W : warnings
MC : manual checks
P : passes

43. @hellosct1 -
AInspector WCAG

44. @hellosct1 -
Tanaguru
●
Inspecte les pages Web
– Détection des problèmes liés
●
Aux exigences RGAA
●
Outil open source (licence AGPL)
●
Objectif de tester l’accessibilité du site
●
Disponible
– CI / CD
– En ligne
– Github
– Addon Firefox

45. @hellosct1 -
Résultat extension RGAA 4 (1/2)
Catégories
Catégories
Total

46. @hellosct1 -
Résultat extension RGAA 4 (2/2) Menu

47. @hellosct1 -
Résultat en ligne RGAA 3 (1/2)

48. @hellosct1 -
Résultat en ligne RGAA 3 (2/2)

49. @hellosct1 -
Les liens
●
W3C Validator
– https://validator.w3.org/
●
W3C CSS Validator
– http://jigsaw.w3.org/css-validator/
●
Wave Accessibility
Evaluation Tool
– http://wave.webaim.org/
●
Web accessibility evaluation
tools
– http://www.w3.org/WAI/RC/tools/complete
●
Web Design Guidelines for
Low Bandwidth
– http://www.aptivate.org/webguidelines/Tools
.html
●
Paris Web
– https://www.paris-web.fr/
●
Extensions
– Hints
– Tanaguru
– Ainspector WCAG
– Wave
– WCAG Color constrast
Checker
●
MDN : Apprendre A11y
– https://developer.mozilla.org/fr/docs/Appre
ndre/a11y

50. @hellosct1 -
Merci
Christophe Villeneuve
@hellosct1
@hellosct1@mamot.fr
Armony Altinier