atelier RGAA Parisweb 2007

Slide 1: Aurélien Levy Expert accessibilité chez Tektonika, co-auteur du RGAA Contributeur openweb.eu.org Collectif de promotion des standards du Web Membre du Web Standards Project www.webstandards.org Blog www.fairytells.net

Slide 2: Tektonika : activités et services http://www.tektonika.com Accessibilité Audit, A.M.O, formation, réalisation… Développement LAMP, SPIP, Intranet, Extranet sur mesure… Editorial Architecture de l’information, redaction, rewriting…

Slide 3: Laurent Denis Expert accessibilité chez Temesis, co-auteur du RGAA 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 www.blog-and-blues.org

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

Slide 5: 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

Slide 7: 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 l’alternative Présence description longue Pertinence description longue

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

Slide 10: 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 l’audio description

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

Slide 13: 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

Slide 14: 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

Slide 15: Contenus textuels Démo : glossaire RGAA

Slide 17: 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

Slide 18: 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

Slide 19: 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

Slide 20: Contenu tabulaires Démo : paris.fr

Slide 22: Présentation et mise en forme Règles à suivre : Prévoir un moyen d’accès à l’information 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

Slide 23: Présentation et mise en forme Vérification : Absence d’informations 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 d’attribut de présentation Absence d’informations disponible uniquement avec les CSS et/ou les images

Slide 24: Présentation et mise en forme Vérification : Respect du rôle sémantique des éléments Possibilité d’agrandir 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 l’ensemble du site

Slide 25: Présentation et mise en forme Démo : Ville de Nantes Semaine de l’emploi des personnes handicapées Recrutement de la Marine

Slide 27: 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

Slide 28: Structure page et site Vérification : Conformité de l’arbre 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 d’accesskey et d’un plan du site fonctionnel Présence des balises fieldset/legend, optgroup/label Présence d’un titre au page et de balises meta

Slide 29: Structure page et site Démo : Fiche RGAA Le Monde Changement d’adresse

Slide 31: 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

Slide 32: 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

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

Slide 34: 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

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

Slide 36: 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

Slide 37: Liens et navigation Démo : www.ooshop.com

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

Slide 40: Script et multimédia Vérification : Présence d’une alternative aux object, applet et embed Présence d’une alternative au code javascript Equivalence de l’information et accessibilité de l’alternative Maintient de l’accessibilité du code général en javascript Possibilité de désactiver une mise à jour automatique Présence d’un avertissement /accès à la mise à jour Maintient des fonctions d’historique de navigation

Slide 41: Script et multimédia Démo : Menu déroulant Validation formulaire accessible Ajax accessible Jkrowling, avatar neuf telecom, frise europe

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

Slide 44: 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

Slide 45: Plan de l'intervention Questions / réponses Contacts : Laurent Denis laurent.denis@temesis.com Aurélien Levy levy@tektonika.com

Slideshare.net (beta)