QELIOS – Expertise 30 minutes pour L'Accessibilité du WEB Jean-Pierre Villain Rencontres Mondiales du Logiciel Libre Amiens – Juillet 2007 Licence Creative Common - Paternité-Pas d'Utilisation Commerciale-Partage des Conditions Initiales à l'Identique 2.0 France

I n t r o d u c t i o n 1994 : W3C 1996 : WAI 1998 : WCAG 1.0 Depuis le début du Web, l'accessibilité des contenus électroniques est au coeur de toutes les spécifications des langages web. L'interopérabilité Navigateur Aide technique Ordinateur Matériel nomade Moyen d'accès 2008 : WCAG 2.0 ? Le handicap Visuel Auditif Moteur Cognitif Tim Berners Lee, directeur du W3C " Mettre le Web et ses services à la disposition de tous les individus, quels que soient leur matériel ou logiciel, leur infrastructure réseau, leur langue maternelle, leur culture, leur localisation géographique, ou leurs aptitudes physiques ou mentales. " La définition officielle de l'accessibilité : " Le pouvoir du web est dans son universalité. Un aspect essentiel est qu'il soit accessible à tout le monde quel que soit le handicap " C'est un enjeu majeur pour le web actuel.

L e H a n d i c a p e t l e W e b #1 33% de la population 15% des internautes Doublement dans la prochaine décennie 98% Sites Web Européens Inaccessibles En France : personnes concernées Visuels Moteurs Auditifs Cognitifs : Pluri-physiques : Pathologies diverses / vieillissement Source enquête HID / INSEE ,77 21,63 7,69 7,21 12,02 45,67 % : : : : Les 6 grandes situations de handicap

L e H a n d i c a p e t l e W e b #2 Accéder Percevoir Utiliser Comprendre Pour tous, la visite d'un site web est soit difficile, soit impossible, par manque d'adaptation aux situations de handicap. Problèmes rencontrés Handicapés visuels : image, vidéo, signalétique Handicapés moteurs : difficultés d'utilisation des souris et clavier traditionnels. Handicapés cognitifs : sens et compréhension Seniors : difficultés cumulées ( vision, difficultés d'apprentissage, atteintes neuro-motrices ) Handicapés auditifs : son ( paroles, musique )

L e H a n d i c a p e t l e W e b #3 Les outils et les aides techniques Matériel Tablette Braille Clavier adapté Joystick Trackball Head-stick Logiciels Lecteur d'écran Navigateur vocaux Loupe d'écran Des aides très diverses

N o r m e s e t l é g i s l a t io n s #1 Les normes et recommandations W.A.I / WCAG points de contrôle 14 directives Accessiweb 13 directives 92 points de contrôle Les W.C.A.G (Web Content Accessibility Guideline 1.0), recommandations éditées par le W.A.I (Web Accessibility Initiative) sont la base technique de l'ensemble des normes et labels. WAI WCAG 1.0 DGME R.G.A.A Guide et label Accessiweb Europe / WAB cluster Le référentiel de la DGME est la base normative pour les sites publics en France. R.G.A.A 14 directives 194 tests EURACERT / UWEM 14 directives 150 tests WCAG 2.0 En cours d'élaboration UWEM 1.0

QELIOS – Expertise 5 pas vers l'Accessibilité du WEB Jean-Pierre Villain Rencontres Mondiales du Logiciel Libre Amiens – Juillet 2007 Licence Creative Common - Paternité-Pas d'Utilisation Commerciale-Partage des Conditions Initiales à l'Identique 2.0 France

5 pas vers l’Accessibilité du web #1 Introduction L'accessibilité du web repose sur un certain nombre de fondamentaux dont deux sont particulièrement importants : Assurer une transformation élégante : Minimiser les tables de mise en forme, utiliser CSS et adopter le principe de la séparation de la structure, du contenu et de la présentation. Cela favorise l'interopérabilité et permet à l'utilisateur d'adapter les contenus selon ses préférences. Produire un code robuste : Privilégier les technologies normalisées par le W3C, notamment l'utilisation d'une DTD appropriée pour Html. Respecter la sémantique du balisage et vérifier ou valider le code, s'assurer, notamment, que les balises sont correctement implémentées. A retenir Minimiser les tables de mise en forme Utiliser CSS Respecter la sémantique du balisage Vérifier le code

5 pas vers l’Accessibilité du web #2 Pas d’information Alt nul L’image n’apporte pas d’information (décoration, illustration décorative) On implémente un attribut alt nul (alt="") WCAG 1.1 Eléments concernés Img Area Input type= "image“ Applet (Déprécié) L’alternative s’implémente via l'attribut alt. On ne doit pas décrire l’image elle-même mais restituer l’information nécessaire à la compréhension du contenu. C’est le contexte d’utilisation qui détermine la nature de l’alternative. Image lien Fonction du lien 1. Donner une alternative aux images (1) L’image apporte une information (illustration informative) L’alternative doit être courte et concise et intégrée au mieux dans le flux du texte. L’image est utilisée comme contenu d’un lien L’information à restituer est la fonction du lien. Information nécessaire à la compréhension Alternative courte et concise

5 pas vers l’Accessibilité du web #3 Description détaillée Alt + longdesc Si une image nécessite une description détaillée (graphique, illustration informative complexe...) On implémente un attribut longdesc qui référence l’url d’une page qui contient la description détaillée. Cette description détaillée vient compléter l’alternative implémentée via l’attribut alt. WCAG 1.1 Eléments concernés Img Area Input type= "image“ Applet (Déprécié) Certains agents utilisateur ne supportant pas longdesc, il peut être utile d’implémenter un lien en dur adjacent à l’image. 1. Donner une alternative aux images (2) Enfin, une image légendée ne nécessite pas d’alternative si la légende est suffisante pour restituer l’information nécessaire à la compréhension.

5 pas vers l’Accessibilité du web #4 1. Donner une alternative aux images Exemples Une image de décoration Une image apportant une information nécessaire à la compréhension Une image lien Une image nécessitant une description détaillée Graphique montrant l'évolution des salaires de ces trois dernières années : - En 2005 : +7% - En 2006 : - 3% - En 2007 : +5% La description détaillée contenue dans la page graph.htm

5 pas vers l’Accessibilité du web #5 Courts (80 caractères) Les liens de la page doivent être explicites (compréhensibles hors contexte). Il faut éviter les liens du type “cliquez ici”, “lire la suite”,”en savoir plus” qui seront incompréhensibles hors contexte. WCAG 13.1 Eléments concernés Les liens Si nécessaire, on utilise l’attribut title pour expliciter un lien. 2. Expliciter les liens, implémenter des liens d’accès rapide (1) Les aides techniques disposent de fonctionnalités qui permettent aux utilisateurs d’utiliser la liste des liens de la page comme élément de navigation. Les liens de la page doivent être courts. Eviter de créer des liens sur des paragraphes entiers. Limiter la longueur des liens (dans l’ideal, 80 caractères) Explicites (Compréhensibles Hors contexte) Title

5 pas vers l’Accessibilité du web #6 Le strict nécessaire Il faut limiter leur usage au strict nécessaire. L’objectif est de fournir une aide, pas de construire un sommaire de la page. WCAG 13.6 Eléments concernés Les liens d’accès rapide 2. Expliciter les liens, implémenter des liens d’accès rapide (2) Les liens d’accès rapide (“aller au contenu”...) sont les seules aides que l’ont peut implémenter pour les utilisateurs qui ne peuvent pas utiliser de souris. Ils sont indispensables pour diminuer le nombre de tabulations nécessaires à la navigation. Ne pas les cacher Ne surtout pas les cacher. Ils doivent être affichés comme premiers éléments de la page en clair.

5 pas vers l’Accessibilité du web #7 Tableaux de données Caption Summary Th Scope=“cols|rows” Headers=“id en-tête” Les tableaux de données doivent avoir : Un titre via l’élément caption Un résumé via l’attribut summary De vrais en-tête via l’élément th Un mécanisme de liaison entre les données et les en-têtes via l’attribut scope sur les cellules d’en-têtes (th) ou via l’attribut headers sur les cellules de données (td) WCAG 5.1 – 5.2 – 5.3 – 5.5 Eléments concernés table 3. Faire de vrais tableaux de données, contrôler la linéarisation des tableaux de mise en forme (1) 2007Vendeurs2006 Dupont Durand Evolution du C.A 250,00350,00 275,00230,00 Correctement implémenté la première ligne de données de ce tableau sera restituée vocalement de la manière suivante : " Vendeur dupont, , "

5 pas vers l’Accessibilité du web #8 Exemples 3. Faire de vrais tableaux de données, contrôler la linéarisation des tableaux de mise en forme (1) 2007Vendeurs2006 Dupont Durand Evolution du C.A 250,00350,00 275,00230,00 Evolution du C.A Vendeurs Dupont 250,00 350,00...

5 pas vers l’Accessibilité du web #9 Tableaux de mise en forme Td uniquement Linéarisation correcte Les tableaux de mise en forme doivent pouvoir se linéariser correctement. Certaines aides techniques (lecteur d’écran) restituent les tableaux de manière linéaire (cellule après cellule, de gauche à droite, ligne par ligne). Il est important de vérifier que l’organisation des contenus ne pose pas de problèmes de compréhension. WCAG 5.1 – 5.2 – 5.3 – 5.5 Eléments concernés table 3. Faire de vrais tableaux de données, contrôler la linéarisation des tableaux demise en forme (1) Titre 1 Titre 2 Contenu 1Contenu 2 Titre 1 Titre 2 Contenu 1 Contenu 2 Tableau de mise en formeLinéarisation Les tableaux de mise en forme ne doivent comporter que des cellules td (pas de caption, pas de summary, pas de th)

5 pas vers l’Accessibilité du web #10 Label Fieldset legend Chaque étiquette de champs doit être implémentée via l’élément label lié au champs via l’attribut for (valeur=id du champs). Les champs de type “reset” ou submit” ne sont pas concernés. WCAG 12.3 – 12.4 Eléments concernés Form Input Select textarea 4. Structurer les formulaires (1) Les formulaires sont des éléments très importants, ils doivent être correctement structurés (label, fieldset, legend) et ne poser aucune ambiguité. Il convient de structurer le formulaire en regroupant les ensembles de champs thématiques via l’élément fieldset associé à un titre via l’élément legend. Nom Login Connection Se connecter

5 pas vers l’Accessibilité du web #11 4. Structurer les formulaires (1) Nom Login Connection Se connecter Exemples Connection Nom Login

5 pas vers l’Accessibilité du web #12 Expliciter le commentaire du bouton de validation. Assurer des indications et contrôles de saisie accessibles WCAG 12.3 – 12.4 Eléments concernés Form Input type=« submit » Input type=« image » Button Contrôle de saisie 4. Structurer les formulaires (2) Le formulaire doit être cohérent, les indications, aides ou contrôles de saisie ne doivent pas poser de problème de compréhension. Nom (*) Login (*) Connection Le commentaire du bouton de validation doit être pertinent et explicite. Eviter les commentaires comme “ok”, “valider”,”envoyer” qui ne sont pas compréhensibles hors contexte. Le cas échéant, utiliser l’attribut title (ou alt pour un champs de type image) pour expliciter le commentaire. Se connecter (*) : champs obligatoires Nom (*) Login (*) Connection Se connecter (*) : champs obligatoires Mauvais exempleBon exemple

5 pas vers l’Accessibilité du web #13 Créer des titres de document explicites Structurer de manière pertinente le contenu via une hiérarchie de titre WCAG Eléments concernés Élément title (head) H1 à H6 5. Titrer et structurer les contenus Le contenu d’une page doit être structuré par une hiérarchie de titre. Le langage html dispose de 6 niveaux de titre (h1 à h6) qui permettent aux aides techniques de construire un sommaire dynamique du contenu utilisé comme élément de navigation. Le titre du document (élément title de l’en-tête head) doit être explicite. Le titre du document est utilisé pour la gestion de l’historique et la liste des fenêtres ouvertes, notamment. Le titre ne doit poser aucun problème d’identification. L'accessibilité du web Recommandations WAI WCAG 1.0 WCAG 2.0 Liste des titres Les aides techniques transforment la liste des titres en élément de navigation

5 pas vers l’Accessibilité du web #14 5. Titrer et structurer les contenus Exemples L'accessibilité du web Recommandations WAI WCAG 1.0 WCAG 2.0 Liste des titres Les aides techniques transforment la liste des titres en élément de navigation L'accessibilité du web Recommandations WAI WCAG 1.0 WCAG 2.0 Structurer le contenu Cine plus – page d'accueil Cine plus – les sorties du mois Cine plus – recherche, résultats 1 à 14 sur 20 pour shrek Titrer le document

5 pas vers l’Accessibilité du web #15 Conclusion Penser globalement, agir localement, se former et s'informer. L'accessibilité du web ne peut se concevoir que dans une démarche globale et en aval d'un projet de développement. La formation des intervenants, techniques et rédactionnels, est un passage obligé. Etablir des fondations saines, recourir au conseil et à l'expertise Il est toujours plus difficile de réparer que de préparer, de subir que d'anticiper. Le recours à des spécialistes et à de l'expertise est le plus sûr garant d'un projet réussi. Veiller et pérenniser Faire un site accessible n'est rien sans la mise en place de processus de veille et d'alerte crédibles et efficaces.

5 pas vers l’Accessibilité du web #15 Références Labels et normes Web Accessibility Initiative (en) Web Accessibility Initiative (en) Directives pour l'accessibilité aux contenus Web Introduction à l'accessibilité du Web Composantes essentielles de l'accessibilité Web Liste des points de contrôles pour WCAG Documents du W3C/WAI Outils d'évaluation et barre d'outils Web developper Gecko (Chris Pederick) (en) Web Accessibility Toolbar pour IE (WHAT-C / Braillenet) Hi Software / Cynthia (en) Accessiweb R.G.A.A. nisation.gouv.fr Euracert Sites intéressants Open Web Pompage Forum Alsacréations Annuaire Webonorme Blog accessibilité accessibilite.com/blog/ Blog Fairytells Blog and blues