Accessibilite web wcag rgaa

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

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é
●
Consultant Open Source
●
Dresseur animaux

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

●
Accessibilité ?
Code / Développement
Outils

@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

@hellosct1 -
Les types d’handicap

@hellosct1 -
Exemple : Handicap Visuel
Q :
R :

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

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

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

@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

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

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

@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
– …

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

@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

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

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

Accessibilité ?
Code / Développement
Outils

@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

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

@hellosct1
Page HTML : Exemple
Navigation Contenus contextuels

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

@hellosct1
Images : Exemple
<div role="img" aria-label="Description image">

<img src="image.jpg" />

<img src="image.jpg" alt="" />

<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

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

@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

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

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

@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

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

@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

@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

@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

@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 -
Navigateur Firefox
●
Barre d’outils intégré dans le navigateur
●
Identification avec l’inspecteur
●
...

@hellosct1 -
Exemple
Constraste
Message d’alerte

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

@hellosct1 -
Exemple
Catégories Détails

@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

@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

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

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

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

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

@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

@hellosct1 -
Merci
@hellosct1
@hellosct1@mamot.fr
Armony Altinier

Accessibilite web wcag rgaa

Contenu connexe

Similaire à Accessibilite web wcag rgaa

Plus de Christophe Villeneuve

Accessibilite web wcag rgaa