Rgaa 3 dans un Web A11Y (accessible)

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


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


Aujourd'hui...● Accessibilité● RGAA 3● Les critères


Accessibilité : rappel


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.


➢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


➢Handicaps Visuels

➢Handicaps Auditifs

✔ Surdités

✔ Totale ou partielle

✔ Problèmes de lectures

✔ Bruit ambiant VS mp3




➢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




➢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





➢La Barrière de la langue

✔ Langue étrangère (FR)

✔ Les abréviations

✔ Le langage SMS





➢La Barrière de la langue

✔ Les anciens navigateurs

✔ Le matériel

✔ modem

➢Autres



RGAA 3


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


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


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


Grille comparaison

http://wiki.accedeweb.com/notices/graphiqueergonomique/grilledecorrespondanceswcagaccessiwebrgaa

WCAG / AccessiWeb / RGAA

• Exemples


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.



✔ 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)


✔ Titre de cadre✔ Balise iframe

✔ Attribut title ?

Images

Cadres



✔ 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



✔ Pour chaque média✔ Une transcription textuelle

✔ Sous-titre synchronisés✔ Contrôle de la consultation

Images

Cadres

Multimédia


Couleurs


✔ 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


Images

Cadres

Couleurs

Multimédia

Tableaux


✔ Donner des intitulés de lien explicites✔ Eviter titre de lien

Liens



✔ Prévoir une alternative pertinente✔ Balise script VS noscript✔ Script contrôlable par le clavier ou la souris

✔ Echap, Tab, Flèches

Liens

Scripts



✔ Présence de type de document et valide ?

✔ Balise doctype✔ Attribut lang✔ Balise title✔ Balise dir (direction)

Liens

Scripts

Eléments Obligatoires



✔ 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




✔ Feuilles de styles✔ Zoom des caractères✔ Liens identifiables✔ Textes cachés sont correctement restitués


Liens

Scripts


Structure de l'information

Présentation de l'information


✔ 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



✔ Modes de navigations (mini 2)

✔ Menu ✔ plan de site ✔ moteur de recherche✔ Fil d'ariane (+page active)

✔ Ordre de tabulation

Formulaires

Navigation



✔ 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



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


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


Merci● Source

– Le portail des documents de référence

http://references.modernisation.gouv.fr/rgaaaccessibilite

Questions

@hellosct1

@neuro_paris


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

Internet

Rgaa 3 dans un Web A11Y (accessible)