Aurélien Levy Expert accessibilité chez Tektonika, co-auteur du RGAATektonika Contributeur openweb.eu.org Collectif de promotion des standards du Web Membre du Web Standards Project Blog

Tektonika : activités et services Développement LAMP, SPIP, Intranet, Extranet sur mesure… Accessibilité Audit, A.M.O, formation, réalisation… Editorial Architecture de linformation, redaction, rewriting…

Laurent Denis Expert accessibilité chez Temesis, co-auteur du RGAATemesis Contributeur openweb.eu.org Collectif de promotion des standards du Web Responsable Opquast.org Liste publique de bonnes pratiques qualité pour les services en ligne Blog

Temesis : activités et services Formation Professionnels, universités, … Expertise Audit, A.M.O., création de référentiels… Opquast Bonnes pratiques qualité

Plan de l'intervention 1.Contenus graphiques 2.Contenus animés 3.Contenus textuels 4.Contenus tabulaires 5.Présentation et mise en forme 6.Structure de page et de site 7.Liens et navigation 8.Scripts et multimédias 9.Formulaires et interaction

Plan de l'intervention 1.Contenus graphiques 2.Contenus animés 3.Contenus textuels 4.Contenus tabulaires 5.Présentation et mise en forme 6.Structure de page et de site 7.Liens et navigation 8.Scripts et multimédias 9.Formulaires et interaction

Contenu graphique Règles à suivre : Fournir une alternative textuelle courte adaptée au contexte Fournir une description longue si nécessaire Vérification : Présence attribut alt ou contenu alternatif adjacent Pertinence du contenu de lalternative Présence description longue Pertinence description longue

Contenu graphique Démo : Musée du Louvre Photoalto TéléTVA Unadev

Plan de l'intervention 1.Contenus graphiques 2.Contenus animés 3.Contenus textuels 4.Contenus tabulaires 5.Présentation et mise en forme 6.Structure de page et de site 7.Liens et navigation 8.Scripts et multimédias 9.Formulaires et interaction

Contenu animé Règles à suivre : Fournir une transcription textuelle Fournir des sous-titres et une audio description synchronisée Vérification : Présence et pertinence de la transcription textuelle Présence, pertinence et contrôle des sous-titres Présence, pertinence et contrôle de laudio description

Contenu animé Démo : Spot accessibilité loi handicap Spot langue des signes

Plan de l'intervention 1.Contenus graphiques 2.Contenus animés 3.Contenus textuels 4.Contenus tabulaires 5.Présentation et mise en forme 6.Structure de page et de site 7.Liens et navigation 8.Scripts et multimédias 9.Formulaires et interaction

Contenus textuels Règles à suivre : Utiliser un langage clair et simple, une rédaction logique et ordonnée Privilégier les contenus textuels Proposer des illustrations visuelles ou sonores Expliciter les sigles Identifier la langue, son sens de lecture, et leurs changements

Contenu textuels Vérification : Liens pour la compréhension des contenus Rédaction : phrases simples, forme active, vocabulaire simple, information importante au début Remplacement des éléments non textuels par des styles CSS Présence d'illustrations visuelles ou sonores Présence du balisage explicitant la première occurrence d'une abréviation ou d'un acronyme. Présence des informations de langue et sens de lecture

Contenus textuels Démo : glossaire RGAA

Plan de l'intervention 1.Contenus graphiques 2.Contenus animés 3.Contenus textuels 4.Contenus tabulaires 5.Présentation et mise en forme 6.Structure de page et de site 7.Liens et navigation 8.Scripts et multimédias 9.Formulaires et interaction

Contenus tabulaires Règles à suivre : Utiliser les balises html d'en-têtes de lignes et de colonnes Associer les cellules de données aux en-têtes de lignes et de colonnes Donner un titre et un résumé aux tableaux de données Proposer des valeurs de remplacement pour les en- têtes de tableaux de données

Contenus tabulaires Règles à suivre : Ne pas utiliser de tableaux pour la mise en page sauf si leur linéarisation est correcte Ne pas utiliser les éléments spécifiques aux tableaux de données pour des tableaux de mise en page

Contenu tabulaires Vérification: Présence de l'élément th utilisation de scope, ou id headers pour les tableaux simples utilisation de id headers pour les tableaux complexes Absence d'éléments ou attributs th, caption, thead, tbody, tfoot, scope, headers, axis dans les tableaux de présentation Présence d'un titre Présence d'un résumé différent du titre Présence et pertinence d'abréviations des en-têtes Absence de tableau de présentation injustifié Absence d'éléments parasitant la lecture linéaire d'un tableau de présentation

Contenu tabulaires Démo : paris.fr

Plan de l'intervention 1.Contenus graphiques 2.Contenus animés 3.Contenus textuels 4.Contenus tabulaires 5.Présentation et mise en forme 6.Structure de page et de site 7.Liens et navigation 8.Scripts et multimédias 9.Formulaires et interaction

Présentation et mise en forme Règles à suivre : Prévoir un moyen daccès à linformation autre que la couleur Prévoir un contraste suffisent Séparer convenablement le contenu de la présentation Eviter les changements de luminosité, les clignotements ou les mouvements Utiliser une présentation cohérente et accessible

Présentation et mise en forme Vérification : Absence dinformations véhiculées uniquement par la couleur Contraste avec une valeur de 3:1 ou 4:1 Utilisation des CSS (image, tableau de mise en forme) Absence délément ou dattribut de présentation Absence dinformations disponible uniquement avec les CSS et/ou les images

Présentation et mise en forme Vérification : Respect du rôle sémantique des éléments Possibilité dagrandir les textes sans dégats Respecter la linéarisation du contenu Possibilité de contrôle des clignotements, mouvements et changements de luminosité Cohérence du design sur lensemble du site

Présentation et mise en forme Démo : Ville de Nantes Semaine de lemploi des personnes handicapées Recrutement de la Marine

Plan de l'intervention 1.Contenus graphiques 2.Contenus animés 3.Contenus textuels 4.Contenus tabulaires 5.Présentation et mise en forme 6.Structure de page et de site 7.Liens et navigation 8.Scripts et multimédias 9.Formulaires et interaction

Structure page et site Règles à suivre : Créer des pages valides Hiérarchiser et structurer convenablement le contenu Utiliser de préférence les technologies W3C et une version récente de leur spécification Proposer un ordre logique de parcours au clavier Proposer des raccourcis clavier et un plan du site Regrouper les informations de même nature Enrichir le contenu de méta données

Structure page et site Vérification : Conformité de larbre du document Absence de balises dépréciées ou obsolètes Présence et bonne arborescence des balises Hx Utilisation correcte des listes ul, dl, ol et des balises de citations Présence daccesskey et dun plan du site fonctionnel Présence des balises fieldset/legend, optgroup/label Présence dun titre au page et de balises meta

Structure page et site Démo : Fiche RGAA Le Monde Changement dadresse

Plan de l'intervention 1.Contenus graphiques 2.Contenus animés 3.Contenus textuels 4.Contenus tabulaires 5.Présentation et mise en forme 6.Structure de page et de site 7.Liens et navigation 8.Scripts et multimédias 9.Formulaires et interaction

Liens et navigation Règles à suivre : Fournir des liens explicites quant à leur destination et à leur comportement Fournir des informations sur l'architecture générale du site Fournir des mécanismes de navigation cohérents, sous forme de menus Fournir des liens d'accès rapide ou d'évitement Fournir des images avec zones cliquables côté client Faciliter l'usage du moteur de recherche

Liens et navigation Vérification : Libellés ou title uniques, concis, non vides Libellés ou title explicitant l'action, la cible, le mode de consultation, compréhensibles hors contexte Absence d'ouvertures de nouvelles fenêtres sans avertissement, via target, javascript ou un objet externe, ou sans action de l'utilisateur Accessibilité des images avec zones cliquables côté serveur

Liens et navigation Démo : liberation.fr competitivite.gouv.fr

Liens et navigation Vérification : Présence et visibilité d'un menu de navigation, d'éléments de navigation dans un groupe de page Cohérence de la position, de la présentation et du comportement des menus et barres de navigation Regroupement, identification et accès fonctionnel aux regroupements de liens important

Liens et navigation Démo : vendee-tourisme.fr/a-suivre/

Liens et navigation Vérification : Absence de meta, de script ou d'objet provoquant un rafraîchissement automatique Présence et pertinence des titres de cadres Identification et description complémentaire des cadres Présence d'un moyen de passer l'art Ascii multi-ligne Présence de modes de recherche alternatifs

Liens et navigation Démo :

Plan de l'intervention 1.Contenus graphiques 2.Contenus animés 3.Contenus textuels 4.Contenus tabulaires 5.Présentation et mise en forme 6.Structure de page et de site 7.Liens et navigation 8.Scripts et multimédias 9.Formulaires et interaction

Script et multimédia Règles à suivre : Prévoir une alternative Prévoir lutilisation par plusieurs périphérique daccès Rendre intrinsèquement accessible les éléments programmables Avertir lutilisateur et permettre laccès aux éventuelles mises à jours du contenu Utiliser convenablement les éléments en fonction de leur rôle en attendant ARIA

Script et multimédia Vérification : Présence dune alternative aux object, applet et embed Présence dune alternative au code javascript Equivalence de linformation et accessibilité de lalternative Maintient de laccessibilité du code général en javascript Possibilité de désactiver une mise à jour automatique Présence dun avertissement /accès à la mise à jour Maintient des fonctions dhistorique de navigation

Script et multimédia Démo : Menu déroulant Validation formulaire accessible Ajax accessible JkrowlingJkrowling, avatar neuf telecom, frise europeavatar neuf telecomfrise europe

Plan de l'intervention 1.Contenus graphiques 2.Contenus animés 3.Contenus textuels 4.Contenus tabulaires 5.Présentation et mise en forme 6.Structure de page et de site 7.Liens et navigation 8.Scripts et multimédias 9.Formulaires et interaction

Formulaires et interaction Règles à suivre : Associer les champs de formulaire à leurs intitulés Utiliser des regroupements légendés

Formulaires et interaction Vérification : Absence d'élément de formulaire sans étiquette et identifiant ou sans title Association visuelle et structurelle des étiquettes aux champs Présence d'un regroupement de contrôles de formulaire dans un élément fieldset Absence d'éléments fieldset sans élément legend pertinent Présence des éléments optgroup et des attributs label Pertinence des éléments legend et des attributs label

Plan de l'intervention Questions / réponses Contacts : Laurent Denis Aurélien Levy