rgaa 3 dans un web a11y (accessible)
TRANSCRIPT
nAcademy Le 20 janvier 2015 Neuros
RGAA 3 dans un Web A11Y
Christophe Villeneuve
Référentiel Général d'Accessibilité pour les Administrations v3 dans un web Accessible
nAcademy Le 20 janvier 2015 Neuros
Lexique● A11Y
Accessibility
● RGAA
Référentiel Général d'Accessibilité pour les Administrations
● WCAG
Web Content Accessibility Guidelines
W3C
● AccessiWeb
AccessiWeb est une marque déposée par l'association BrailleNet
Référentiels / Formations / Label (conformité) / Projets de recherche
nAcademy Le 20 janvier 2015 Neuros
Aujourd'hui...● Accessibilité● RGAA 3● Les critères
nAcademy Le 20 janvier 2015 Neuros
Accessibilité : rappel
nAcademy Le 20 janvier 2015 Neuros
L'accessibilité ?● A destination de tous
● Pour l’ensemble des utilisateurs– Contenus et fonctionnalités équivalentes
– Offrir des expériences utilisateurs attractives, simples, claires, et utilisables
● Exigence fondamentale – Au même titre que la sécurité, la performance, etc.
nAcademy Le 20 janvier 2015 Neuros
➢Handicaps Visuels ✔ Troubles de la vision✔ Absence d'écran✔ Vision floue✔ Absence d'éléments petits
✔ Perception des couleurs
✔ Daltonien
✔ Yeux sensible
✔ Soleil
Les types de handicaps
nAcademy Le 20 janvier 2015 Neuros
➢Handicaps Visuels
➢Handicaps Auditifs
✔ Surdités
✔ Totale ou partielle
✔ Problèmes de lectures
✔ Bruit ambiant VS mp3
Les types de handicaps
nAcademy Le 20 janvier 2015 Neuros
➢Handicaps Visuels
➢Handicaps Auditifs➢Handicaps Moteurs
✔ Paralysie
✔ Problème souris
✔ Problème clavier [TAB]
✔ Certaines maladies
✔ Les personnes agées
✔ Boutons trop rapprochés
✔ Durée de sessions
Les types de handicaps
nAcademy Le 20 janvier 2015 Neuros
➢Handicaps Visuels
➢Handicaps Auditifs➢Handicaps Moteurs➢Handicaps Cognitifs
✔Trouble de la mémoire
✔ Handicaps temporaires
✔ Problème icône / menu
✔ Difficulté de lecture
✔ Eviter les gifs animés
Les types de handicaps
nAcademy Le 20 janvier 2015 Neuros
➢Handicaps Visuels
➢Handicaps Auditifs➢Handicaps Moteurs➢Handicaps Cognitifs
➢La Barrière de la langue
✔ Langue étrangère (FR)
✔ Les abréviations
✔ Le langage SMS
Les types de handicaps
nAcademy Le 20 janvier 2015 Neuros
➢Handicaps Visuels
➢Handicaps Auditifs➢Handicaps Moteurs➢Handicaps Cognitifs
➢La Barrière de la langue
✔ Les anciens navigateurs
✔ Le matériel
✔ modem
➢Autres
Les types de handicaps
nAcademy Le 20 janvier 2015 Neuros
RGAA 3
nAcademy Le 20 janvier 2015 Neuros
Les dates importantes RGAA 1/2● L'article 47 de la loi n° 2005102 du 11 février 2005
Egalité des droits et des chances, la participation et la citoyenneté des personnes handicapées, fait de l’accessibilité une exigence pour tous les services de communication publique en ligne de l’État, des collectivités territoriales et des établissements publics qui en dépendent.
Source : http://references.modernisation.gouv.fr/rgaaaccessibilite
nAcademy Le 20 janvier 2015 Neuros
Les dates importantes RGAA 2/2● Le décret n°2009546 du 14 mai 2009
Impose une mise en œuvre de l’accessibilité dans un délai de deux ans (à partir de la publication du décret) pour les services de communication publique en ligne de l'Etat et des établissements publics qui en dépendent, et de trois ans pour les services de communication publique en ligne des collectivités territoriales et des établissements publics qui en dépendent.
Source : http://references.modernisation.gouv.fr/rgaaaccessibilite
Aujourd'hui
2.2.1 : compatible AccessiWeb 2.2• Figé sans la prise en compte des évolutions du HTML
4 % des sites Webs publics respectent la loi• Etude Mai 2014 de BrailleNet
nAcademy Le 20 janvier 2015 Neuros
Pourquoi RGAA 3.0 ?● Avant AccessiWeb et HTML5Aria
– S'appuient du norme internationale : WCAG 2.0
● La 3.0 : fork de AccessiWeb et HTML5Aria– Avec le soutien de BrailleNet
– Fin des 2 référenciels
● Apparition d'un label
● Roadmap : – Actuellement 3.0 béta
– Mise en application premier Semestre 2015
nAcademy Le 20 janvier 2015 Neuros
Grille comparaison
http://wiki.accedeweb.com/notices/graphiqueergonomique/grilledecorrespondanceswcagaccessiwebrgaa
WCAG / AccessiWeb / RGAA
• Exemples
nAcademy Le 20 janvier 2015 Neuros
Dans RGAA 3.0● 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.
nAcademy Le 20 janvier 2015 Neuros
nAcademy Le 20 janvier 2015 Neuros
✔ Alternative textuelle ?✔ Balise alt✔ Attribut aria-label
✔ Alternative pertinente ?✔ Balise object
✔ Attribut type image✔ Captcha
✔ Solution alternative✔ Légende d'image
✔ Reliée à l'image correspondante
Images
Liste des critères (1 à 5)
nAcademy Le 20 janvier 2015 Neuros
✔ Titre de cadre✔ Balise iframe
✔ Attribut title ?
Images
Cadres
Liste des critères (1 à 5)
nAcademy Le 20 janvier 2015 Neuros
✔ L'information ne doit pas être donnée uniquement par la couleur
✔ Contrastes de couleurs suffisamment élevés
✔ Contrastes entre la couleur de fond et la couleur de texte
Images
Cadres
Couleurs
Liste des critères (1 à 5)
nAcademy Le 20 janvier 2015 Neuros
✔ Pour chaque média✔ Une transcription textuelle
✔ Sous-titre synchronisés✔ Contrôle de la consultation
Images
Cadres
Multimédia
Liste des critères (1 à 5)
Couleurs
nAcademy Le 20 janvier 2015 Neuros
✔ Pour chaque tableau de données complexe
✔ Un résumé✔ Un titre pertinent
✔ Identifier l'en-tête✔ Mise en forme✔ Balises
✔ Table – row – col✔ Attribut thead, tfoot
Liste des critères (1 à 5)
Images
Cadres
Couleurs
Multimédia
Tableaux
nAcademy Le 20 janvier 2015 Neuros
✔ Donner des intitulés de lien explicites✔ Eviter titre de lien
Liens
Liste des critères (6 à 10)
nAcademy Le 20 janvier 2015 Neuros
✔ Prévoir une alternative pertinente✔ Balise script VS noscript✔ Script contrôlable par le clavier ou la souris
✔ Echap, Tab, Flèches
Liens
Scripts
Liste des critères (6 à 10)
nAcademy Le 20 janvier 2015 Neuros
✔ Présence de type de document et valide ?
✔ Balise doctype✔ Attribut lang✔ Balise title✔ Balise dir (direction)
Liens
Scripts
Eléments Obligatoires
Liste des critères (6 à 10)
nAcademy Le 20 janvier 2015 Neuros
✔ Utiliser des titres, des listes, des abréviations, des citations✔ Balise H (h1/h2/h3...)✔ Chaque page
✔ Header / nav / main / footer✔ Chaque liste
✔ ul / li / ol
Liens
Scripts
Structure de l'information
Liste des critères (6 à 10)
Eléments Obligatoires
nAcademy Le 20 janvier 2015 Neuros
✔ Feuilles de styles✔ Zoom des caractères✔ Liens identifiables✔ Textes cachés sont correctement restitués
Liste des critères (6 à 10)
Liens
Scripts
Eléments Obligatoires
Structure de l'information
Présentation de l'information
nAcademy Le 20 janvier 2015 Neuros
✔ Associés un champ avec une étiquette
✔ Balise title / label
✔ Grouper les champs✔ Balise fieldset / legend / optgroup
✔ Structurer les listes de choix
✔ Attribut id
✔ Vérifier la présence d'aide à la saisie✔ Contrôle de saisie
✔ Balise required
Formulaires
Liste des critères (11 à 13)
nAcademy Le 20 janvier 2015 Neuros
✔ Modes de navigations (mini 2)
✔ Menu ✔ plan de site ✔ moteur de recherche✔ Fil d'ariane (+page active)
✔ Ordre de tabulation
Formulaires
Navigation
Liste des critères (11 à 13)
nAcademy Le 20 janvier 2015 Neuros
✔ Accès à l'utilisateur✔ Procédés de raffraichissement
✔ Indiqué quand une fenêtre s'ouvre
✔ attribut target="_blank"✔ Rendre accessible les documents en téléchargement
Formulaires
Navigation
Consultation
Liste des critères (11 à 13)
nAcademy Le 20 janvier 2015 Neuros
Prévision de classification● Le RGAA 3.0 et le label "eaccessible"
– Engagement Dec 2014, à l’occasion de la Conférence nationale du handicap
– Entièrement compatible avec la norme ISO/IEC 40500:2012
– Sera conforme aux WCAG 2.0Un seul carré rempli : la démarche est formalisée et lancée et 50 critères du niveau A sont validés
Deux carrés remplis : niveau A atteint
Trois carrés remplis : niveau A + 50% du niveau AA atteint
Quatre carrés remplis : niveau A et AA atteint, c’est le niveau légal pour le RGAA 3.0. Il est indiqué par une petite flèche bleue sous le quatrième carré
Cinq carrés remplis : des critères AAA sont validés, en plus de tous les critères A et AA
nAcademy Le 20 janvier 2015 Neuros
Plus loin● RGAA3 : référentiel technique
● RGAA et le label eaccessible
● Access42http://access42.net/
http://www.vtech.fr/n/lergaaetlelabeleaccessible/n:199
https://references.modernisation.gouv.fr/sites/default/files/RGAA3/referentiel_technique.htm
nAcademy Le 20 janvier 2015 Neuros
Merci● Source
– Le portail des documents de référence
http://references.modernisation.gouv.fr/rgaaaccessibilite
Questions
@hellosct1
@neuro_paris
nAcademy Le 20 janvier 2015 Neuros
Qui... est Christophe Villeneuve ?
<<
afup – lemug.fr – mysql – mariadb – drupal – demoscene – firefoxos – drupagora – phptour – forumphp – solutionlinux – demoinparis – ici et maintenant – eyrolles – editions eni – programmez – linux pratique – webriver – phptv – neuros elephpant