Rendre un projet accessible

Présentation / Workshop effectuée au Capitole du libre par Christophe Villeneuve sur "Rendre un projet accessible".
Cette présentation a pour but de vous montrer toutes les facettes pour mettre à jour un projet accessible (A11Y)

Transcript

1. Rendre un projet web accessible Christophe Villeneuve @hellosct1 @hellosct1@mamot.fr Capitole du Libre 2022 le 20 Novembre 2022
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 – Capitole du libre 2022 Aujourd’hui • Accessibilité ? • Dans le code / développement / projet web • Dév. / Validation • Outils de validation • Cas pratique
4. • Accessibilité ? Code / Développement • Dév. / Validation • Outils • Cas pratique
5. @hellosct1 – Capitole du libre 2022 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 – Capitole du libre 2022 C’est à dire
7. @hellosct1 – Capitole du libre 2022 Les types d’ handicap
8. @hellosct1 – Capitole du libre 2022 Exemple : Handicap Visuel Q : R :
9. @hellosct1 – Capitole du libre 2022 Exemple : Accès contenu Q : R :
10. @hellosct1 – Capitole du libre 2022 WCAG • Règles internationales • Actuellement v2.1 (2018) – https://www.w3.org/TR/WCAG21/ • En cours – (Draft) v2.2 (Oct 2021) – (Draft) v3.0 (Dec 2021) • 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 – …
11. @hellosct1 – Capitole du libre 2022 Organisation des règles d’accessibilité web ?
12. @hellosct1 – Capitole du libre 2022 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
13. @hellosct1 – Capitole du libre 2022 Exemple https://www.w3.org/TR/WCAG21/
14. @hellosct1 – Capitole du libre 2022 RGAA • Référentiel Général d’Accessibilité pour les Administrations • V 4.1 – publié 2019 – Mise à jour février 2021 • 2 catégories – Obligations d’accessibilité – Méthode technique https://www.numerique.gouv.fr/publications/rgaa-accessibilite/
15. @hellosct1 – Capitole du libre 2022 Obligations d’accessibilité • Obligations légales – Notion d’accessibilité numérique – Rappel du champ d’application – Evaluation de la conformité à la norme de référence – Déclaration d’accessibilité – Schéma pluriannuel de mise en accessibilité – Mentions et pages obligatoires https://www.numerique.gouv.fr/publications/rgaa-accessibilite/obligations/
16. @hellosct1 – Capitole du libre 2022 • 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://www.numerique.gouv.fr/publications/rgaa-accessibilite/methode-rgaa/criteres/
17. @hellosct1 – Capitole du libre 2022 Exemple thématique (1/2)
18. @hellosct1 – Capitole du libre 2022 Exemple thématique (2/2)
19. @hellosct1 – Capitole du libre 2022 Grille de comparaison https://design.numerique.gouv.fr/assets/pdf/RGAA4_vs_WCAG2.1.pdf
20. Accessibilité ? Code / Développement Dév. / Validation Outils Cas pratique
21. @hellosct1 – Capitole du libre 2022 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>
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
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
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 Dév. / Validation Outils Cas pratique
38. @hellosct1 – Capitole du libre 2022 Astuces • Fonctionnalités d’accessibilité dans Firefox – Adapter Firefox et le contenu web • à tous les utilisateurs et toutes les utilisatrices • Astuces – Utilisation du clavier – Raccourcis souris – Zoom, polices et couleurs – Thème : Contraste élevé – Contrôle du contenu web – Compatibilité avec les technologies d’assistance (lecteur d’écran)
39. @hellosct1 – Capitole du libre 2022 Inspecteur d’accessibilité • Barre d’outils intégré dans le navigateur • Onglet : Accessibilité • ...
40. @hellosct1 – Capitole du libre 2022 Exemple Constraste Message d’alerte
41. @hellosct1 – Capitole du libre 2022 Ordre de tabulation
42. @hellosct1 – Capitole du libre 2022 Autres
43. @hellosct1 – Capitole du libre 2022 Option menu contextuel Lorsque vous choisissez les options de menu contextuel Inspecter les propriétés d'accessibilité/Afficher les propriétés d'accessibilité, l'onglet Accessibilité est immédiatement ouvert pour afficher l'élément de l'arborescence d'accessibilité correspondant et ses propriétés.
44. @hellosct1 – Capitole du libre 2022 Simulation des couleurs
45. Accessibilité ? Code / Développement Dév. / Validation Outils Cas pratique
46. @hellosct1 – Capitole du libre 2022 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/
47. @hellosct1 – Capitole du libre 2022 Exemple Catégories Détails
48. @hellosct1 – Capitole du libre 2022 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
49. @hellosct1 – Capitole du libre 2022 AInspector WCAG
50. @hellosct1 – Capitole du libre 2022 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
51. @hellosct1 – Capitole du libre 2022 Résultat extension RGAA 4 (1/2) Catégories Catégories Total
52. @hellosct1 – Capitole du libre 2022 Résultat extension RGAA 4 (2/2) Menu
53. @hellosct1 – Capitole du libre 2022 Les extensions d’aujourd’hui • Tanaguru • a11y.css vérificateur d'accessibilité • WCAG Contrast checker • WAVE Accessibility Extension • Tanaguru webext RGAA • Ainspector • Webhint • Asqatasun •
54. Accessibilité ? Code / Développement Dév. / Validation Outils Cas pratique
55. @hellosct1 – Capitole du libre 2022 Cas pratique • Exercice 1 à 5 – https://github.com/hellosct1/a11y-workshop-accessi bility
56. @hellosct1 – Capitole du libre 2022 Automatisation • Jenkins + Tanaguru
57. @hellosct1 – Capitole du libre 2022 En résumé • Aujourd’hui – L’accessibilité numérique • Ne doit pas être oublié
58. @hellosct1 – Capitole du libre 2022 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/Too ls.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
59. @hellosct1 – Capitole du libre 2022 • DevTools – https://firefox-source-docs.mozilla.org/devtools-user/accessibilit y_inspector/ • Mdn – https://developer.mozilla.org/en-US/docs/Web/Accessibility
60. @hellosct1 – Capitole du libre 2022 Merci Christophe Villeneuve @hellosct1 @hellosct1@mamot.fr Armony Altinier