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

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… Editorial Architecture de l’information, redaction, rewriting…

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

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

Plan de l'intervention Contenus graphiques Contenus animés Contenus textuels Contenus tabulaires Présentation et mise en forme Structure de page et de site Liens et navigation Scripts et multimédias Formulaires et interaction

Contenus graphiques

Contenus animés

Contenus textuels

Contenus tabulaires

Présentation et mise en forme

Structure de page et de site

Liens et navigation

Scripts et multimédias

Formulaires et interaction

Plan de l'intervention Contenus graphiques Contenus animés Contenus textuels Contenus tabulaires Présentation et mise en forme Structure de page et de site Liens et navigation Scripts et multimédias Formulaires et interaction

Contenus graphiques

Contenus animés

Contenus textuels

Contenus tabulaires

Présentation et mise en forme

Structure de page et de site

Liens et navigation

Scripts et multimédias

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

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

Démo :

Musée du Louvre

Photoalto

TéléTVA

Unadev

Plan de l'intervention Contenus graphiques Contenus animés Contenus textuels Contenus tabulaires Présentation et mise en forme Structure de page et de site Liens et navigation Scripts et multimédias Formulaires et interaction

Contenus graphiques

Contenus animés

Contenus textuels

Contenus tabulaires

Présentation et mise en forme

Structure de page et de site

Liens et navigation

Scripts et multimédias

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

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

Démo :

Spot accessibilité loi handicap

Spot langue des signes

Plan de l'intervention Contenus graphiques Contenus animés Contenus textuels Contenus tabulaires Présentation et mise en forme Structure de page et de site Liens et navigation Scripts et multimédias Formulaires et interaction

Contenus graphiques

Contenus animés

Contenus textuels

Contenus tabulaires

Présentation et mise en forme

Structure de page et de site

Liens et navigation

Scripts et multimédias

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

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

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

Démo :

glossaire RGAA

Plan de l'intervention Contenus graphiques Contenus animés Contenus textuels Contenus tabulaires Présentation et mise en forme Structure de page et de site Liens et navigation Scripts et multimédias Formulaires et interaction

Contenus graphiques

Contenus animés

Contenus textuels

Contenus tabulaires

Présentation et mise en forme

Structure de page et de site

Liens et navigation

Scripts et multimédias

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

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

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

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

Démo :

paris.fr

Plan de l'intervention Contenus graphiques Contenus animés Contenus textuels Contenus tabulaires Présentation et mise en forme Structure de page et de site Liens et navigation Scripts et multimédias Formulaires et interaction

Contenus graphiques

Contenus animés

Contenus textuels

Contenus tabulaires

Présentation et mise en forme

Structure de page et de site

Liens et navigation

Scripts et multimédias

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

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

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

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

Démo :

Ville de Nantes

Semaine de l’emploi des personnes handicapées

Recrutement de la Marine

Plan de l'intervention Contenus graphiques Contenus animés Contenus textuels Contenus tabulaires Présentation et mise en forme Structure de page et de site Liens et navigation Scripts et multimédias Formulaires et interaction

Contenus graphiques

Contenus animés

Contenus textuels

Contenus tabulaires

Présentation et mise en forme

Structure de page et de site

Liens et navigation

Scripts et multimédias

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

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

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

Démo :

Fiche RGAA

Le Monde

Changement d’adresse

Plan de l'intervention Contenus graphiques Contenus animés Contenus textuels Contenus tabulaires Présentation et mise en forme Structure de page et de site Liens et navigation Scripts et multimédias Formulaires et interaction

Contenus graphiques

Contenus animés

Contenus textuels

Contenus tabulaires

Présentation et mise en forme

Structure de page et de site

Liens et navigation

Scripts et multimédias

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

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

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

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

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/

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

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

Démo :

www.ooshop.com

Plan de l'intervention Contenus graphiques Contenus animés Contenus textuels Contenus tabulaires Présentation et mise en forme Structure de page et de site Liens et navigation Scripts et multimédias Formulaires et interaction

Contenus graphiques

Contenus animés

Contenus textuels

Contenus tabulaires

Présentation et mise en forme

Structure de page et de site

Liens et navigation

Scripts et multimédias

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

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

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

Démo :

Menu déroulant

Validation formulaire accessible

Ajax accessible

Jkrowling , avatar neuf telecom , frise europe

Plan de l'intervention Contenus graphiques Contenus animés Contenus textuels Contenus tabulaires Présentation et mise en forme Structure de page et de site Liens et navigation Scripts et multimédias Formulaires et interaction

Contenus graphiques

Contenus animés

Contenus textuels

Contenus tabulaires

Présentation et mise en forme

Structure de page et de site

Liens et navigation

Scripts et multimédias

Formulaires et interaction

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

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

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_address] Aurélien Levy [email_address]

Questions / réponses

Contacts :

Laurent Denis [email_address]

Aurélien Levy [email_address]