atelier RGAA Parisweb 2007

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 laurent.denis@temesis.com

Aurélien Levylevy@tektonika.com