Les Ateliers Info Tonic

Transcription

1 Les Ateliers Info Tonic L accessibilité des sites web : mettre le web à disposition de tous Mardi 12 mars

2 L'accessibilité des sites : mettre le web à disposition de tous

3 Sébastien Huillet Expert Accessiweb

4 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

5 Définition de l'accessibilité Physique Éducatif Civique Culturel / Social Numérique

6 Définition de l'accessibilité numérique Public handicapé Ouverture sur le monde Un matériel adapté Compatibilité et confort de consultation

7 Définition de l'accessibilité numérique Tout public Les seniors Les novices Le matériel

8 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."

9 Définition des normes internationales W3C WAI WCAG, ARIA, ATAG, UAAG

10 La loi, c'est le RGAA article 47 de la loi «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

11 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

12 Le référentiel Accessiweb thématiques 131 critères 3 niveaux : Bronze (A) : 81 critères Argent (AA) : 20 critères Or (AAA) : 30 critères

13 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.

14 Images <img src="fichier_image.jpg" alt="contenu de l'image" />

15 Cadres Donner à chaque cadre et chaque cadre en ligne un titre pertinent.

16 Couleurs Ne pas donner l information uniquement par la couleur et utiliser des contrastes de couleurs suffisamment élevés.

17 Couleurs

18 Liens Donner des intitulés de lien explicites, grâce à des informations de contexte notamment, et utiliser le titre de lien le moins possible.

19 Liens

20 É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.

21 Structuration de l information Utiliser des titres, des listes, des abréviations et des citations pour structurer l information.

22 Structuration de l information

23 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é.

24 Formulaires Structurer les formulaires de manière pertinente, vérifier la présence d aide à la saisie et de contrôle de saisie accessible.

25 Tableaux Donner à chaque tableau de données, un résumé et un titre pertinent, identifier clairement les cellules d en-tête.

26 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

27 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.

28 Multimédia

29 Scripts Donner si nécessaire à chaque script une alternative pertinente.

30 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?

31 Outils et ressources Firefox : Firebug et Web developer Internet Explorer : WAT-C Niveaux de contraste : Contrast analyser Accessibilité flash : adesigner

32 Outils et ressources Accessiweb Open Web Alsacréations Transcender CSS par Andy Clarke

33 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

34 Télécharger les outils

35 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

36 4 bis rue Jules Favre BP Tours Cedex 1 Tél