Formation technique accessibilité

Formation à l’accessibilité
pour les rédacteurs web
Centre d’Expertise en
Accessibilité et Ergonomie web
Kouadio Innocent KOUAME
Senior Web developer & Accessibility Expert
FT/Global IS&T/ISAD/IDEA/EASE (Ergonomics and Accessibility for Everyone)
1
Contexte


L’accessibilité une priorité pour le groupe FT – Orange (Voir
plan conquête 2015)
Evolutions de la réglementation
– En France: loi n°2005-102 du 11 février 2005
– En Europe: plan d’action e-europe 2005

Choix stratégique & économique
2
Qu’est que l’accessibilité?
C’est la propriété d‘un produit ou
service d’être utilisable par tous et
dans tous les contextes
Les 4 grands principes:
Perceptibilité
Opérabilité
Compréhensibilit Robustesse
é
Principes

Couleurs

Navigation clavier

Synthèse vocale / moteur de recherche
Structuration
Contextualisation / Contenu explicite
Alternatives
Orientation

Clarté / Simplicité
4
Application (1/4)

HTML / CSS / Javascript

Couleurs
Informations portées par la couleur
Charte Orange : brand.orange.com
ColorContrastAnalyzer

Navigation clavier
Focus clavier visible
Doubler les événements souris par des événements claviers
5
Application (2/4)

Structuration
<Title> dans la balise head
Utilisation de la sémantique html
Listes <li><ul><ol>, headers <hx>
Tableaux réservés aux données
Tableaux de présentation à éviter

Contextualisation / Contenu explicite
Éviter les intitulés « en savoir plus »
Au besoin ajouter des attributs TITLE aux balises A
6
Application (3/4)

Alternatives
Ajouter des « alt » aux <img>
Transcriptions des vidéos
Script d’interviews

Orientation
Prévenir avant l’ouverture d’une nouvelle fenêtre
7
Application (4/4)

(Orientation) Formulaires
Regrouper les champs avec un <fieldset>
Associer des <label> explicites aux champs de formulaires
Champs obligatoires : title via <abbr> ou <span>

Clarté / simplicité
Éviter termes trop techniques, vocabulaire inhabituel
Éviter les mouvements / clignotements (non désactivables)

Transverse
Balises invisibles mais accessibles
Retour aux fondamentaux
Éviter les versions alternatives accessibles
8
Illustration

Démo Jaws
9
Outils

Brand : brand.orange.com

Color Contrast Analyzer

IE : Accessibility toolbar

Firefox
Firebug, Web developper toolbar
Accessibility toolbar, Ocawa toolbar, Wave toolbar

Validateurs HTML CSS

Ocawa (via le centre d’expertise)

Compothèque (v1)
10
Documentation

Cahier des charges

Règles
11
Questions?
12
… à votre disposition
KOUAME Kouadio Innocent
Senior Web developer & Accessibility Expert
FT/Global IS&T/ISAD/IDEA/EASE (Ergonomics and Accessibility for Everyone)
Email: [email protected]
Office: +33(0)1 57 36 81 85
Merci de votre attention!