Upload
levy-aurelien
View
3.650
Download
0
Embed Size (px)
DESCRIPTION
Présentation faite lors des ateliers du samedi de Parisweb 2007
Citation preview
Aurélien Levy
Expert accessibilité chez Tektonika, co-auteur du RGAA
Contributeur openweb.eu.orgCollectif de promotion des standards du Web
Membre du Web Standards Projectwww.webstandards.org
Blogwww.fairytells.net
Tektonika : activités et services
http://www.tektonika.com
Développement LAMP, SPIP, Intranet, Extranet sur mesure…
Accessibilité Audit, A.M.O, formation, réalisation…
EditorialArchitecture de l’information, redaction, rewriting…
Laurent Denis
Expert accessibilité chez Temesis, co-auteur du RGAA
Contributeur openweb.eu.orgCollectif de promotion des standards du Web
Responsable Opquast.orgListe publique de bonnes pratiques qualité pour les services en ligne
Blogwww.blog-and-blues.org
Temesis : activités et services
http://www.temesis.com
FormationProfessionnels, universités, …
ExpertiseAudit, A.M.O., création de référentiels…
OpquastBonnes 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 l’alternative
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 l’audio 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 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
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
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
Présentation et mise en forme
Démo :Ville de Nantes
Semaine de l’emploi 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 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
Structure page et site
Démo :Fiche RGAA
Le Monde
Changement d’adresse
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 :www.ooshop.com
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 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
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
Script et multimédia
Démo :Menu déroulant
Validation formulaire accessible
Ajax accessible
Jkrowling, avatar neuf telecom, frise 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 [email protected]
Aurélien [email protected]