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)
@hellosct1 – Capitole du libre 2022 Aujourd’hui ● Accessibilité ? ● Dans le code / développement / projet web ● Dév. / Validation ● Outils de validation ● Cas pratique
@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
@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 – …
@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/
@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/
@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
@hellosct1 Liens / Boutons : Exemple aria-label="Lire la suite : Le projet du client xxx" title="Lire la suite : Le projet du client xxx" > Lire la suite
type="submit" value="Rechercher" title="Rechercher une actualité" /> role="button" onclick="handleBtnClick(event)" onKeyUp="handleBtnKeyUp(event)" aria-pressed="false" aria-label="Mode édition" aria-required="true" > Mode Édition * Bouton / Submit Lien Attention : Liens non explicites - Lire la suite - En savoir plus - Plus d’informations - Cliquer ici - OK Attributs - Aria-label - Title
- Utiliser pour baliser chaque intitulé. - Attribut for sur chaque balise ainsi qu'un attribut id sur chaque champ. - Attributs id et for de chaque couple intitulé/champ. - Groupes de champs : +
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
@hellosct1 CSS : Exemple - Uniquement des tailles relatives : em % x-small, small... etc Accès à l’information = contraste Tailles pour la police de caractères
@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)
@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.
@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
@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
hellosct1
riru
kazukihayase
line_developers
soudai
pyama86
_kensh
yanzm
tkhresk
line_developers_tw
yokawasa
karawoo
oracle4engineer
denniskardys
sachag
keathley
mza
jeffersonlam
ufuk
holman
philhawksworth
robhawkes
chriscoyier
productmarketing
cassininazir