nAcademy  Le 20 janvier 2015 Neuros ­ 
RGAA 3 dans un Web A11Y
Christophe Villeneuve
Référentiel Général d'Accessibilité p...
nAcademy  Le 20 janvier 2015 Neuros ­ 
Lexique
● A11Y
Accessibility
● RGAA
Référentiel Général d'Accessibilité pour les Ad...
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
– Cont...
nAcademy  Le 20 janvier 2015 Neuros ­ 
➢Handicaps Visuels ✔ Troubles de la vision
✔ Absence d'écran
✔ Vision floue
✔ Absen...
nAcademy  Le 20 janvier 2015 Neuros ­ 
➢Handicaps Visuels
➢Handicaps Auditifs
✔ Surdités
✔ Totale ou partielle
✔ Problèmes...
nAcademy  Le 20 janvier 2015 Neuros ­ 
➢Handicaps Visuels
➢Handicaps Auditifs
➢Handicaps Moteurs
✔ Paralysie
✔ Problème so...
nAcademy  Le 20 janvier 2015 Neuros ­ 
➢Handicaps Visuels
➢Handicaps Auditifs
➢Handicaps Moteurs
➢Handicaps Cognitifs
✔Tro...
nAcademy  Le 20 janvier 2015 Neuros ­ 
➢Handicaps Visuels
➢Handicaps Auditifs
➢Handicaps Moteurs
➢Handicaps Cognitifs
➢La ...
nAcademy  Le 20 janvier 2015 Neuros ­ 
➢Handicaps Visuels
➢Handicaps Auditifs
➢Handicaps Moteurs
➢Handicaps Cognitifs
➢La ...
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° 2005­102 du 11 février 2...
nAcademy  Le 20 janvier 2015 Neuros ­ 
Les dates importantes RGAA 2/2
● Le décret n°2009­546 du 14 mai 2009
Impose une mis...
nAcademy  Le 20 janvier 2015 Neuros ­ 
Pourquoi RGAA 3.0 ?
● Avant AccessiWeb et HTML5­Aria
– S'appuient du norme internat...
nAcademy  Le 20 janvier 2015 Neuros ­ 
Grille comparaison
http://wiki.accede­web.com/notices/graphique­ergonomique/grille­...
nAcademy  Le 20 janvier 2015 Neuros ­ 
Dans RGAA 3.0
● Document introduction
– Anciennement appelé RGAA, oui, comme le déc...
nAcademy  Le 20 janvier 2015 Neuros ­ 
nAcademy  Le 20 janvier 2015 Neuros ­ 
✔ Alternative textuelle ?
✔ Balise alt
✔ Attribut aria-label
✔ Alternative pertinen...
nAcademy  Le 20 janvier 2015 Neuros ­ 
✔ Titre de cadre
✔ Balise iframe
✔ Attribut title ?
Images
Cadres
Liste des critère...
nAcademy  Le 20 janvier 2015 Neuros ­ 
✔ L'information ne doit
pas être donnée
uniquement par la couleur
✔ Contrastes de c...
nAcademy  Le 20 janvier 2015 Neuros ­ 
✔ Pour chaque média
✔ Une transcription
textuelle
✔ Sous-titre synchronisés
✔ Contr...
nAcademy  Le 20 janvier 2015 Neuros ­ 
✔
Pour chaque tableau de
données complexe
✔
Un résumé
✔
Un titre pertinent
✔
Identi...
nAcademy  Le 20 janvier 2015 Neuros ­ 
✔
Donner des intitulés de
lien explicites
✔
Eviter titre de lien
Liens
Liste des cr...
nAcademy  Le 20 janvier 2015 Neuros ­ 
✔ Prévoir une alternative
pertinente
✔ Balise script VS noscript
✔ Script contrôlab...
nAcademy  Le 20 janvier 2015 Neuros ­ 
✔ Présence de type de
document et valide ?
✔ Balise doctype
✔ Attribut lang
✔ Balis...
nAcademy  Le 20 janvier 2015 Neuros ­ 
✔ Utiliser des titres, des
listes, des abréviations,
des citations
✔ Balise H (h1/h...
nAcademy  Le 20 janvier 2015 Neuros ­ 
✔
Feuilles de styles
✔
Zoom des caractères
✔
Liens identifiables
✔
Textes cachés so...
nAcademy  Le 20 janvier 2015 Neuros ­ 
✔
Associés un champ avec
une étiquette
✔
Balise title / label
✔
Grouper les champs
...
nAcademy  Le 20 janvier 2015 Neuros ­ 
✔ Modes de navigations
(mini 2)
✔ Menu
✔ plan de site
✔ moteur de recherche
✔ Fil d...
nAcademy  Le 20 janvier 2015 Neuros ­ 
✔ Accès à l'utilisateur
✔ Procédés de
raffraichissement
✔ Indiqué quand une
fenêtre...
nAcademy  Le 20 janvier 2015 Neuros ­ 
Prévision de classification
● Le RGAA 3.0 et le label "e­accessible"
– Engagement D...
nAcademy  Le 20 janvier 2015 Neuros ­ 
Plus loin
● RGAA3 : référentiel technique
● RGAA et le label e­accessible
● Access4...
nAcademy  Le 20 janvier 2015 Neuros ­ 
Merci
●
Source
– Le portail des documents de référence
http://references.modernisat...
nAcademy  Le 20 janvier 2015 Neuros ­ 
Qui... est Christophe Villeneuve ?
<<
afup – lemug.fr – mysql – mariadb – drupal – ...
Prochain SlideShare
Chargement dans…5
×

Rgaa 3 dans un Web A11Y (accessible)

894 vues

Publié le

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

Publié dans : Internet
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Rgaa 3 dans un Web A11Y (accessible)

  1. 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. 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. 3. nAcademy  Le 20 janvier 2015 Neuros ­  Aujourd'hui... ● Accessibilité ● RGAA 3 ● Les critères
  4. 4. nAcademy  Le 20 janvier 2015 Neuros ­  Accessibilité : rappel
  5. 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. 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. 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. 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. 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. 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. 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. 12. nAcademy  Le 20 janvier 2015 Neuros ­  RGAA 3
  13. 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. 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. 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. 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. 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. 18. nAcademy  Le 20 janvier 2015 Neuros ­ 
  19. 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. 20. nAcademy  Le 20 janvier 2015 Neuros ­  ✔ Titre de cadre ✔ Balise iframe ✔ Attribut title ? Images Cadres Liste des critères (1 à 5)
  21. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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

×