SlideShare une entreprise Scribd logo
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é
Christophe Villeneuve
●
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 -
C’est à dire
@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">
<!-- 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
@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>
<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>
@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
Couleurs : Exemple
@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
Accessibilité ?
Code / Développement
Outils
@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 -
AInspector WCAG
@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
Christophe Villeneuve
@hellosct1
@hellosct1@mamot.fr
Armony Altinier

Contenu connexe

Similaire à Accessibilite web wcag rgaa

HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference EuratechnologieHTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
wyggio
 
DrupalCamp Paris 2013 : Sites mobiles avec Drupal
DrupalCamp Paris 2013 : Sites mobiles avec DrupalDrupalCamp Paris 2013 : Sites mobiles avec Drupal
DrupalCamp Paris 2013 : Sites mobiles avec Drupal
Actency
 
HTML5, le web de demain - BNSA
HTML5, le web de demain - BNSAHTML5, le web de demain - BNSA
HTML5, le web de demain - BNSA
BNSA - Aquitaine
 
Compatibilité Internet Explorer : pour le meilleur et pour le pire!
Compatibilité Internet Explorer : pour le meilleur et pour le pire!Compatibilité Internet Explorer : pour le meilleur et pour le pire!
Compatibilité Internet Explorer : pour le meilleur et pour le pire!
Microsoft
 
Peur de la migration vers l’open source ?
Peur de la migration vers l’open source ?Peur de la migration vers l’open source ?
Peur de la migration vers l’open source ?
Christophe Villeneuve
 
Introduction webextensions
Introduction webextensionsIntroduction webextensions
Introduction webextensions
Christophe Villeneuve
 
Open Source et contribution : Une association gagnante
Open Source et contribution : Une association gagnanteOpen Source et contribution : Une association gagnante
Open Source et contribution : Une association gagnante
Christophe Villeneuve
 
Introduction à la gestion de projet
Introduction à la gestion de projetIntroduction à la gestion de projet
Introduction à la gestion de projet
laureno
 
La réalité mélangée dans vos applications
La réalité mélangée dans vos applicationsLa réalité mélangée dans vos applications
La réalité mélangée dans vos applications
Christophe Villeneuve
 
Introduction à HTML 5
Introduction à HTML 5Introduction à HTML 5
Introduction à HTML 5
Abdoulaye Dieng
 
WebExtensions : Où en est-on ? /// Where we are ?
WebExtensions : Où en est-on ? /// Where we are ?WebExtensions : Où en est-on ? /// Where we are ?
WebExtensions : Où en est-on ? /// Where we are ?
Christophe Villeneuve
 
Rich Desktop Applications
Rich Desktop ApplicationsRich Desktop Applications
Rich Desktop Applicationsgoldoraf
 
1 heure chrono pour votre plateforme Open Data en ligne : pari tenu !
1 heure chrono pour votre plateforme Open Data en ligne : pari tenu !1 heure chrono pour votre plateforme Open Data en ligne : pari tenu !
1 heure chrono pour votre plateforme Open Data en ligne : pari tenu !
Microsoft Technet France
 
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8
davrous
 
Android introvf
Android introvfAndroid introvf
Android introvf
Anne-Marie Pinna-Dery
 
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshopConfoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshopFrédéric Harper
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
CARA_Lyon
 

Similaire à Accessibilite web wcag rgaa (20)

HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference EuratechnologieHTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
 
DrupalCamp Paris 2013 : Sites mobiles avec Drupal
DrupalCamp Paris 2013 : Sites mobiles avec DrupalDrupalCamp Paris 2013 : Sites mobiles avec Drupal
DrupalCamp Paris 2013 : Sites mobiles avec Drupal
 
HTML5, le web de demain - BNSA
HTML5, le web de demain - BNSAHTML5, le web de demain - BNSA
HTML5, le web de demain - BNSA
 
Compatibilité Internet Explorer : pour le meilleur et pour le pire!
Compatibilité Internet Explorer : pour le meilleur et pour le pire!Compatibilité Internet Explorer : pour le meilleur et pour le pire!
Compatibilité Internet Explorer : pour le meilleur et pour le pire!
 
Peur de la migration vers l’open source ?
Peur de la migration vers l’open source ?Peur de la migration vers l’open source ?
Peur de la migration vers l’open source ?
 
Introduction webextensions
Introduction webextensionsIntroduction webextensions
Introduction webextensions
 
Open Source et contribution : Une association gagnante
Open Source et contribution : Une association gagnanteOpen Source et contribution : Une association gagnante
Open Source et contribution : Une association gagnante
 
Introduction à la gestion de projet
Introduction à la gestion de projetIntroduction à la gestion de projet
Introduction à la gestion de projet
 
La réalité mélangée dans vos applications
La réalité mélangée dans vos applicationsLa réalité mélangée dans vos applications
La réalité mélangée dans vos applications
 
Introduction à HTML 5
Introduction à HTML 5Introduction à HTML 5
Introduction à HTML 5
 
Association 2 0
Association 2 0Association 2 0
Association 2 0
 
Association 2 0
Association 2 0Association 2 0
Association 2 0
 
WebExtensions : Où en est-on ? /// Where we are ?
WebExtensions : Où en est-on ? /// Where we are ?WebExtensions : Où en est-on ? /// Where we are ?
WebExtensions : Où en est-on ? /// Where we are ?
 
Rich Desktop Applications
Rich Desktop ApplicationsRich Desktop Applications
Rich Desktop Applications
 
1 heure chrono pour votre plateforme Open Data en ligne : pari tenu !
1 heure chrono pour votre plateforme Open Data en ligne : pari tenu !1 heure chrono pour votre plateforme Open Data en ligne : pari tenu !
1 heure chrono pour votre plateforme Open Data en ligne : pari tenu !
 
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8
 
Android introvf
Android introvfAndroid introvf
Android introvf
 
Découverte des outils Web 2.0
Découverte des outils Web 2.0Découverte des outils Web 2.0
Découverte des outils Web 2.0
 
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshopConfoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
 

Plus de Christophe Villeneuve

MariaDB une base de donnees NewSQL
MariaDB une base de donnees NewSQLMariaDB une base de donnees NewSQL
MariaDB une base de donnees NewSQL
Christophe Villeneuve
 
pister les pisteurs
pister les pisteurspister les pisteurs
pister les pisteurs
Christophe Villeneuve
 
controler vos donnees éthiques dans le web
controler vos donnees éthiques dans le webcontroler vos donnees éthiques dans le web
controler vos donnees éthiques dans le web
Christophe Villeneuve
 
Infrastructure as code drupal
Infrastructure as code drupalInfrastructure as code drupal
Infrastructure as code drupal
Christophe Villeneuve
 
Mariadb une base de données NewSQL
Mariadb une base de données NewSQLMariadb une base de données NewSQL
Mariadb une base de données NewSQL
Christophe Villeneuve
 
Pentest bus pirate
Pentest bus piratePentest bus pirate
Pentest bus pirate
Christophe Villeneuve
 
La sécurité applicative par le design
La sécurité applicative par le designLa sécurité applicative par le design
La sécurité applicative par le design
Christophe Villeneuve
 
Foxfooding semaine 3
Foxfooding semaine 3Foxfooding semaine 3
Foxfooding semaine 3
Christophe Villeneuve
 
Foxfooding
FoxfoodingFoxfooding
Mozilla french speaking community activites
Mozilla french speaking community activitesMozilla french speaking community activites
Mozilla french speaking community activites
Christophe Villeneuve
 
Monitoring dynamique : Grafana et Microsoft
Monitoring dynamique : Grafana et MicrosoftMonitoring dynamique : Grafana et Microsoft
Monitoring dynamique : Grafana et Microsoft
Christophe Villeneuve
 
Etes vous-pret pour php8 ?
Etes vous-pret pour php8 ?Etes vous-pret pour php8 ?
Etes vous-pret pour php8 ?
Christophe Villeneuve
 
Le futur de l'authentification webAuthn
Le futur de l'authentification webAuthnLe futur de l'authentification webAuthn
Le futur de l'authentification webAuthn
Christophe Villeneuve
 
Send large files with addons
Send large files with addonsSend large files with addons
Send large files with addons
Christophe Villeneuve
 
Tests d'accessibilite par la pratique
Tests d'accessibilite par la pratiqueTests d'accessibilite par la pratique
Tests d'accessibilite par la pratique
Christophe Villeneuve
 
Donnez la voix aux machines
Donnez la voix aux machinesDonnez la voix aux machines
Donnez la voix aux machines
Christophe Villeneuve
 
la réalité mélangée de A a Z
la réalité mélangée de A a Zla réalité mélangée de A a Z
la réalité mélangée de A a Z
Christophe Villeneuve
 
La réalité melangée dans vos applications
La réalité melangée dans vos applicationsLa réalité melangée dans vos applications
La réalité melangée dans vos applications
Christophe Villeneuve
 
Souverainte des données
Souverainte des donnéesSouverainte des données
Souverainte des données
Christophe Villeneuve
 
La sécurité applicative par le design
La sécurité applicative par le designLa sécurité applicative par le design
La sécurité applicative par le design
Christophe Villeneuve
 

Plus de Christophe Villeneuve (20)

MariaDB une base de donnees NewSQL
MariaDB une base de donnees NewSQLMariaDB une base de donnees NewSQL
MariaDB une base de donnees NewSQL
 
pister les pisteurs
pister les pisteurspister les pisteurs
pister les pisteurs
 
controler vos donnees éthiques dans le web
controler vos donnees éthiques dans le webcontroler vos donnees éthiques dans le web
controler vos donnees éthiques dans le web
 
Infrastructure as code drupal
Infrastructure as code drupalInfrastructure as code drupal
Infrastructure as code drupal
 
Mariadb une base de données NewSQL
Mariadb une base de données NewSQLMariadb une base de données NewSQL
Mariadb une base de données NewSQL
 
Pentest bus pirate
Pentest bus piratePentest bus pirate
Pentest bus pirate
 
La sécurité applicative par le design
La sécurité applicative par le designLa sécurité applicative par le design
La sécurité applicative par le design
 
Foxfooding semaine 3
Foxfooding semaine 3Foxfooding semaine 3
Foxfooding semaine 3
 
Foxfooding
FoxfoodingFoxfooding
Foxfooding
 
Mozilla french speaking community activites
Mozilla french speaking community activitesMozilla french speaking community activites
Mozilla french speaking community activites
 
Monitoring dynamique : Grafana et Microsoft
Monitoring dynamique : Grafana et MicrosoftMonitoring dynamique : Grafana et Microsoft
Monitoring dynamique : Grafana et Microsoft
 
Etes vous-pret pour php8 ?
Etes vous-pret pour php8 ?Etes vous-pret pour php8 ?
Etes vous-pret pour php8 ?
 
Le futur de l'authentification webAuthn
Le futur de l'authentification webAuthnLe futur de l'authentification webAuthn
Le futur de l'authentification webAuthn
 
Send large files with addons
Send large files with addonsSend large files with addons
Send large files with addons
 
Tests d'accessibilite par la pratique
Tests d'accessibilite par la pratiqueTests d'accessibilite par la pratique
Tests d'accessibilite par la pratique
 
Donnez la voix aux machines
Donnez la voix aux machinesDonnez la voix aux machines
Donnez la voix aux machines
 
la réalité mélangée de A a Z
la réalité mélangée de A a Zla réalité mélangée de A a Z
la réalité mélangée de A a Z
 
La réalité melangée dans vos applications
La réalité melangée dans vos applicationsLa réalité melangée dans vos applications
La réalité melangée dans vos applications
 
Souverainte des données
Souverainte des donnéesSouverainte des données
Souverainte des données
 
La sécurité applicative par le design
La sécurité applicative par le designLa sécurité applicative par le design
La sécurité applicative par le design
 

Dernier

Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Laurent Speyser
 
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'universitéDe l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
Université de Franche-Comté
 
OCTO TALKS : 4 Tech Trends du Software Engineering.pdf
OCTO TALKS : 4 Tech Trends du Software Engineering.pdfOCTO TALKS : 4 Tech Trends du Software Engineering.pdf
OCTO TALKS : 4 Tech Trends du Software Engineering.pdf
OCTO Technology
 
Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024
UNITECBordeaux
 
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
OCTO Technology
 
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
OCTO Technology
 

Dernier (6)

Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
 
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'universitéDe l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
 
OCTO TALKS : 4 Tech Trends du Software Engineering.pdf
OCTO TALKS : 4 Tech Trends du Software Engineering.pdfOCTO TALKS : 4 Tech Trends du Software Engineering.pdf
OCTO TALKS : 4 Tech Trends du Software Engineering.pdf
 
Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024
 
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
 
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
 

Accessibilite web 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
  • 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
  • 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
  • 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
  • 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 ● ...
  • 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/
  • 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
  • 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