Rgaa 3 dans un Web A11Y (accessible)

727 vues

Publié le

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

Publié dans : Internet
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
727
Sur SlideShare
0
Issues des intégrations
0
Intégrations
39
Actions
Partages
0
Téléchargements
8
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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

×