1. Pourquoi un site web accessible ?

2. Principes fondamentaux des WCAG

3. Thématiques et exemples de critères

4. Chiche !

Pourquoi un site accessible ?

• Respecter la loi
• Obtenir un label, un trophée
• Faire notre B.A. annuelle (décennale) pour ces pôôvres handicapés

Pourquoi un site accessible ?

• Respecter la loi
• Obtenir un label, un trophée
• Faire notre B.A. annuelle (décennale) pour ces pôôvres handicapés

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

L’accessibilité web, 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

• Directive européenne en cours d’élaboration

Référentiels

• Norme internationale WCAG2 (WAI / W3C)

• Méthode d’application pour les sites publics : RGAA - Référentiel général d'accessibilité pour les administrations

Maintenant tous les sites publics sont accessibles

\o/

Enfin presque, il n'en manque que 95%

1. Pourquoi un site web accessible ?

2. Principes fondamentaux des WCAG*

3. Thématiques et exemples de critères

4. Chiche !

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.

1. Pourquoi un site web accessible ?

2. Principes fondamentaux des WCAG

3. Thématiques et exemples de critères

4. Chiche !

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 web accessible ?

2. Principes fondamentaux des WCAG

3. Thématiques et exemples de critères

4. Chiche !

Enlarge your a11y!

• Ajouter un persona présentant un handicap
• Ajouter une situation de handicap dans des stories
• Prévoir des points de contrôle dans le workflow
• Automatiser les tests qui peuvent l’être
• Pair-coder les résolutions de problèmes
• Mutualiser une banque de composants
• Avoir un référent (veille, contact interne et externe)

Côté dev

5 réflexes à acquérir…

• Utiliser les balises html appropriées (ex. button)
• Toujours compléter le tag <img /> avec l'attribut alt
  
• Associer chaque élément de formulaire à son label grâce aux attributs for et id
• Ajouter un attribut lang sur la balise <html>
• Afficher par défaut, masquer avec javascript

… et 4 tests avant de commiter

• Naviguer sur la page et utiliser les fonctionnalités à l'aide du clavier
• Modifier la taille des caractères
• Désactiver les feuilles de style
• Valider le html

Quelques outils

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