Les Ateliers Info Tonic L accessibilité des sites web : mettre le web à disposition de tous Mardi 12 mars 2013 1
L'accessibilité des sites : mettre le web à disposition de tous
Sébastien Huillet Expert Accessiweb www.tribu-and-co.fr
Connaître les fondamentaux de l accessibilité 1. Les bienfaits de l'accessibilité numérique (définition et impacts) 2. Accessiweb : un référentiel accessible (normes et méthodologie) 3. Les bonnes pratiques faciles à mettre en œuvre 4. Les critères pour un site 100% accessible 5. Echanges et tests concrets sur vos sites
Définition de l'accessibilité Physique Éducatif Civique Culturel / Social Numérique
Définition de l'accessibilité numérique Public handicapé Ouverture sur le monde Un matériel adapté Compatibilité et confort de consultation
Définition de l'accessibilité numérique Tout public Les seniors Les novices Le matériel
Définition de l'accessibilité numérique Tim Berners-Lee, directeur du W3C "Mettre le Web et ses services à la disposition de tous les individus, quel que soit leur matériel ou logiciel, leur infrastructure réseau, leur langue maternelle, leur culture, leur localisation géographique, ou leurs aptitudes physiques ou mentales."
Définition des normes internationales W3C WAI WCAG, ARIA, ATAG, UAAG
La loi, c'est le RGAA article 47 de la loi 2005-102 «Les services de communication publique en ligne des services de l État, des collectivités territoriales et des établissements publics qui en dépendent doivent être accessibles aux personnes handicapées.» Création du référentiel RGAA en 2009 Mise en application en 2009 Niveau requis AA Délai de mise en œuvre 2 à 3 ans
Accessiweb, le label made in France BrailleNet, l'association Accessiweb, le centre de ressource : Un référentiel : Accessiweb 2.1 Un Label Bronze, Argent et Or Le GTA, Groupe de Travail Accessiweb
Le référentiel Accessiweb 2.1 13 thématiques 131 critères 3 niveaux : Bronze (A) : 81 critères Argent (AA) : 20 critères Or (AAA) : 30 critères
Les bonnes pratiques faciles à mettre en œuvre Images Donner à chaque image porteuse d information une alternative textuelle pertinente et une description détaillée si nécessaire. Remplacer les images textes par du texte stylé lorsque c est possible.
Images <img src="fichier_image.jpg" alt="contenu de l'image" />
Cadres Donner à chaque cadre et chaque cadre en ligne un titre pertinent.
Couleurs Ne pas donner l information uniquement par la couleur et utiliser des contrastes de couleurs suffisamment élevés.
Couleurs
Liens Donner des intitulés de lien explicites, grâce à des informations de contexte notamment, et utiliser le titre de lien le moins possible.
Liens
Éléments Obligatoires Vérifier que chaque page Web a un code source valide selon le type de document, un titre pertinent et une indication de langue par défaut.
Structuration de l information Utiliser des titres, des listes, des abréviations et des citations pour structurer l information.
Structuration de l information
Présentation de l information Utiliser des feuilles de styles pour contrôler la présentation de l information. Vérifier l effet de l agrandissement des tailles de caractère sur la lisibilité.
Formulaires Structurer les formulaires de manière pertinente, vérifier la présence d aide à la saisie et de contrôle de saisie accessible.
Tableaux Donner à chaque tableau de données, un résumé et un titre pertinent, identifier clairement les cellules d en-tête.
Navigation Faciliter la navigation par au moins deux systèmes de navigation différents : menu de navigation, plan du site, moteur de recherche fil d ariane
Les critères pour un site 100% accessible Multimédia Donner si nécessaire à chaque média temporel une transcription textuelle, des sous-titres synchronisés et une audio-description pertinente.
Multimédia
Scripts Donner si nécessaire à chaque script une alternative pertinente.
Consultation Proposer des versions accessibles ou rendre accessibles les documents en téléchargement. Sont concernés tous les fichiers PDF, Word, Excel Chaque contenu en mouvement ou clignotant est-il contrôlable par l'utilisateur?
Outils et ressources Firefox : Firebug et Web developer Internet Explorer : WAT-C Niveaux de contraste : Contrast analyser Accessibilité flash : adesigner
Outils et ressources Accessiweb Open Web Alsacréations Transcender CSS par Andy Clarke
Conclusion Le site L'agence Web Le client Ouverture du site Structuration de l'information - ergonomie Optimisation du référencement 80 % des critères «simples». Pas de nécessité de concession graphique Structure le projet Meilleure renommée Preuve de qualité - Pérennité Maintenance moins coûteuse
Télécharger les outils http://www.facebook.com/tribuandco http://www.internet-and-co.fr
L accessibilité des sites web Mardi 12 mars 2013 Les prochains ateliers Info Tonic : 9 avril 2013 : comment gérer efficacement ses opérations de marketing direct? 14 mai 2013 : l animation d une page Facebook 11 juin 2013 : la sécurité sur Internet 4
4 bis rue Jules Favre BP 41028 37010 Tours Cedex 1 Tél. 02 47 47 20 00 www.touraine.cci.fr