1. Pourquoi un site accessible ?

2. Principes fondamentaux des WCAG

3. Thématiques RGAA

4. Autres référentiels – Charte Pidila

Pourquoi un site accessible ?

• Chercher le trophée du super code
• Obtenir un label officiel
• Faire notre B.A. annuelle (décennale) pour ces pauvres handicapés

Pourquoi un site accessible ?

• Chercher le trophée du super code
• Obtenir un label officiel
• Faire notre B.A. annuelle (décennale) pour ces pauvres handicapés

Text

Enfin si un peu, mais surtout...

On travaille
pour des
vrais gens

Benjamin

 ... revient du ski. Il s'est foulé le poignet ; manipuler la souris lui est difficile, un trackpad encore plus.

Que peut-on faire pour lui ?

Maxence

Comme presque 10% des hommes, il est daltonien. Il a du mal à percevoir les différences de couleurs.

Que peut-on faire pour lui ?

Géraldine

... commence à être presbyte. En fin de journée les caractères des sites qu'elle fréquente sont souvent trop petits pour elle.

Que peut-on faire pour elle ?

Tanguy

... est développeur. Il est aveugle depuis la naissance et a appris à se servir d'une revue d'écran.

Que peut-on faire pour lui ?

Priscille

... travaille sur un plateau. Elle a coupé le son de son ordi pour ne pas déranger ses collègues mais voudrait bien lire cette vidéo.

Que peut-on faire pour elle ?

Bertrand

... est nouveau père d'une petite fille qui dort peu. Il est crevé et a du mal à se concentrer.

Que peut-on faire pour lui ?

Benoît

... code partout, tout le temps, même sur son mobile. Il consulte beaucoup de documentation. Pour ne pas griller tout son forfait data, il a désactivé les images et le javascript sur son navigateur

Que peut-on faire pour lui ?

Voir autrement, l’ordinateur accessible

Loi n° 2005-102, article L. 114

Constitue un handicap, au sens de la présente loi, toute limitation d’activité ou restriction de participation à la vie en société subie dans son environnement par une personne en raison d’une altération substantielle, durable ou définitive d’une ou plusieurs fonctions physiques, sensorielles, mentales, cognitive ou psychiques, d’un polyhandicap ou d’un trouble de santé invalidant.

L’accessibilité, c'est permettre à tous l’utilisation d’internet, intranet ou extranet :

• quel que soit son handicap, même ponctuel, ses compétences ou son contexte de navigation

• et/ou utilisant des logiciels et matériels spécifiques : plage braille, lecteur d’écran, zoom, dispositifs de pointage, etc.

Textes

• Loi n° 2005-102 du 11 février 2005

• Décret d’application n° 2009-546 du 14 mai 2009

• Arrêté du 21 octobre 2009 relatif au RGAA

• Directive européenne en cours d’élaboration

Référentiels

• Norme internationale WCAG2 (WAI / W3C)

• Méthode d’application : RGAA 3 depuis juin 2015

Maintenant tous les sites publics sont accessibles

\o/

1. Pourquoi un site accessible ?

2. Principes fondamentaux des WCAG

3. Thématiques RGAA

4. Autres référentiels – Charte Pidila

Principe 1 : Perceptible

L’information et les composants de l’interface utilisateur doivent être présentés à l’utilisateur de façon à ce qu’il puisse les percevoir.

Perceptible

• Proposer des équivalents textuels à tout contenu non textuel ;
• Proposer des versions de remplacement aux média temporels ;
• Créer un contenu qui puisse être présenté de différentes manières sans perte d'information ni de structure  ;
• Faciliter la perception visuelle et auditive du contenu par l'utilisateur, notamment en séparant le premier plan de l'arrière-plan.

Principe 2 : Utilisable

Les composants de l’interface utilisateur et de navigation doivent être utilisables.

Utilisable

• Rendre toutes les fonctionnalités accessibles au clavier ;
• Laisser à l'utilisateur suffisamment de temps pour lire et utiliser le contenu ;
• Ne pas concevoir de contenu susceptible de provoquer des crises ;
• Fournir à l'utilisateur des éléments d'orientation pour naviguer, trouver le contenu et se situer dans le site.

Principe 3 : Compréhensible

Les informations et l'utilisation de l'interface utilisateur doivent être compréhensibles.

Compréhensible

• Rendre le contenu textuel lisible et compréhensible ;
• Faire en sorte que les pages apparaissent et fonctionnent de manière prévisible ;
• Aider l'utilisateur à éviter et à corriger les erreurs de saisie.

Principe 4 : Robuste

Le contenu doit être suffisamment robuste pour être interprété de manière fiable par une large variété d'agents utilisateurs, y compris les technologies d'assistance.

Robuste

• Optimiser la compatibilité avec les agents utilisateurs actuels et futurs, y compris les technologies d'assistance.

4 tests rapides pour tous

• Naviguer sur la page à l'aide du clavier.
• Modifier la taille des caractères.
• Désactiver les images, désactiver les feuilles de style, désactiver les deux.
• Désactiver javascript.

4 extensions navigateur

• WCAG Contrast Checker.
• HeadingsMap.
• AXe Developer Tools.
• Fangs.

Diagnostic.css

+ 1 snippet javascript

1. Pourquoi un site accessible ?

2. Principes fondamentaux des WCAG

3. Thématiques RGAA

4. Autres référentiels – Charte Pidila

13 thématiques

1. Images

2. Cadres

3. Couleurs

4. Multimédia

5. Tableaux

6. Liens

7. Scripts

8. Éléments obligatoires

9. Structuration de l’information

10. Présentation de l’information

11. Formulaires

12. Navigation

13. Consultation

1. Images

Fournir une alternative textuelle courte adaptée au contexte (lien, décoration, information)

-> Métiers : développeur, intégrateur, contributeur

2. Cadre

Doter chaque cadre en ligne (iframe) d’un titre pertinent

-> Métiers : développeur, intégrateur, contributeur

3. Couleurs

L’information ne doit pas être donnée uniquement par la couleur

-> Métiers : designer, développeur , intégrateur

4. Multimédia

Chaque média temporel ou non temporel doit être compatible avec les technologies d’assistance

-> Métier : développeur, intégrateur

5. Tableaux

Chaque cellule doit pouvoir être associée avec ses entêtes

-> Métier : développeur, intégrateur

6. Liens

Chaque lien doit être explicite

-> Métiers : designer, contributeur

7. Scripts

Les scripts doivent être contrôlables par le clavier et la souris

-> Métier : développeur, intégrateur

8. Éléments obligatoires

Chaque page web doit avoir un titre de page pertinent

-> Métier : contributeur, développeur, intégrateur

9. Structuration de l’information

Chaque page web doit contenir les éléments <header>, <nav>, <main>, <footer>

-> Métiers : intégrateur, développeur

10. Présentation de l’information

La page doit rester compréhensible lorsque les feuilles de style sont désactivées

-> Métier : intégrateur, développeur

11. Formulaires

Chaque champ de formulaire doit avoir une étiquette (for/id) avec un id unique dans la page

-> Métier : intégrateur, développeur

12. Navigation

Le menu (ou l’élément de navigation principal) doit être à la même place dans tout le site

-> Métiers : ergonome, designer

13. Consultation

L’utilisateur doit être averti lors de l’ouverture d’une nouvelle fenêtre

-> Métier : designer, intégrateur, développeur, rédacteur

On s'entraîne ?

Un site au hasard…

http://www.journal-officiel.gouv.fr/index.html

Les design patterns ARIA

Si un composant développé avec javascript correspond à l’un des motifs de conception définis par l’API ARIA, il doit s’y conformer (RGAA3, critère 7.1.3).

-> W3C Design patterns WAI-ARIA

5 exemples pratiques par Heydon Pickering
le megamenu d’Adobe amélioré par Terrill Thompson

1. Pourquoi un site accessible ?

2. Principes fondamentaux des WCAG

3. Thématiques RGAA

4. Autres référentiels – Charte Pidila

Les autres référentiels

• La charte internet de l’État. 153 tests. Remplace la « charte ergonomique » de 2008.
• Green IT. 72 critères (dont quelques-uns applicables au web)
• Opquast Website. 65 bonnes pratiques
• Mobile (maison). 12 critères socle accessibilité/bonnes pratiques

153 + 72 + 65 + 12 + env 300 = ???

Au. Secours.

Charte Pidila

100 points de repère plutôt destinés aux chefs de projet

Déployable en 380 tests détaillés

Filtrables par référentiel

Filtrables par métier

Accompagnée d’une extension pour Firefox (Opquast Desktop) augmentée d’un plugin spécifique (Charte DILA)