Présentation à la nAcademy (Janvier 2015) de Neuros : Rgaa 3 dans un Web A11Y par Christophe Villeneuve

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

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

3. nAcademy Le 20 janvier 2015 Neuros ­
Aujourd'hui...
● Accessibilité
● RGAA 3
● Les critères

4. nAcademy Le 20 janvier 2015 Neuros ­
Accessibilité : rappel

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

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

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

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

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

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

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

12. nAcademy Le 20 janvier 2015 Neuros ­
RGAA 3

13. nAcademy Le 20 janvier 2015 Neuros ­
Les dates importantes RGAA 1/2
● L'article 47 de la loi n° 2005­102 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/rgaa­accessibilite

14. nAcademy Le 20 janvier 2015 Neuros ­
Les dates importantes RGAA 2/2
● Le décret n°2009­546 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/rgaa­accessibilite
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

15. nAcademy Le 20 janvier 2015 Neuros ­
Pourquoi RGAA 3.0 ?
● Avant AccessiWeb et HTML5­Aria
– S'appuient du norme internationale : WCAG 2.0
● La 3.0 : fork de AccessiWeb et HTML5­Aria
– 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

16. nAcademy Le 20 janvier 2015 Neuros ­
Grille comparaison
http://wiki.accede­web.com/notices/graphique­ergonomique/grille­de­correspondances­wcag­accessiweb­rgaa
WCAG / AccessiWeb / RGAA
• Exemples

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

18. nAcademy Le 20 janvier 2015 Neuros ­

19. 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)

20. nAcademy Le 20 janvier 2015 Neuros ­
✔ Titre de cadre
✔ Balise iframe
✔ Attribut title ?
Images
Cadres
Liste des critères (1 à 5)

21. 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)

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

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

24. nAcademy Le 20 janvier 2015 Neuros ­
✔
Donner des intitulés de
lien explicites
✔
Eviter titre de lien
Liens
Liste des critères (6 à 10)

25. 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)

26. 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)

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

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

29. 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)

30. 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)

31. 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)

32. nAcademy Le 20 janvier 2015 Neuros ­
Prévision de classification
● Le RGAA 3.0 et le label "e­accessible"
– 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.0
Un 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

33. nAcademy Le 20 janvier 2015 Neuros ­
Plus loin
● RGAA3 : référentiel technique
● RGAA et le label e­accessible
● Access42
http://access42.net/
http://www.vtech.fr/n/le­rgaa­et­le­label­e­accessible/n:199
https://references.modernisation.gouv.fr/sites/default/files/RGAA3/referentiel_technique.htm

34. nAcademy Le 20 janvier 2015 Neuros ­
Merci
●
Source
– Le portail des documents de référence
http://references.modernisation.gouv.fr/rgaa­accessibilite
Questions
@hellosct1
@neuro_paris

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