atelier RGAA Parisweb 2007

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

2. 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…

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

4. 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é

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

7. Contenu graphique <ul><li>Règles à suivre : </li></ul><ul><li>Fournir une alternative textuelle courte adaptée au contexte </li></ul><ul><li>Fournir une description longue si nécessaire </li></ul><ul><li>Vérification : </li></ul><ul><li>Présence attribut alt ou contenu alternatif adjacent </li></ul><ul><li>Pertinence du contenu de l’alternative </li></ul><ul><li>Présence description longue </li></ul><ul><li>Pertinence description longue </li></ul>

8. Contenu graphique <ul><li>Démo : </li></ul><ul><li>Musée du Louvre </li></ul><ul><li>Photoalto </li></ul><ul><li>TéléTVA </li></ul><ul><li>Unadev </li></ul>

10. Contenu animé <ul><li>Règles à suivre : </li></ul><ul><li>Fournir une transcription textuelle </li></ul><ul><li>Fournir des sous-titres et une audio description synchronisée </li></ul><ul><li>Vérification : </li></ul><ul><li>Présence et pertinence de la transcription textuelle </li></ul><ul><li>Présence, pertinence et contrôle des sous-titres </li></ul><ul><li>Présence, pertinence et contrôle de l’audio description </li></ul>

11. Contenu animé <ul><li>Démo : </li></ul><ul><li>Spot accessibilité loi handicap </li></ul><ul><li>Spot langue des signes </li></ul>

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

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

15. Contenus textuels <ul><li>Démo : </li></ul><ul><li>glossaire RGAA </li></ul>

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

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

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

20. Contenu tabulaires <ul><li>Démo : </li></ul><ul><li>paris.fr </li></ul>

22. Présentation et mise en forme <ul><li>Règles à suivre : </li></ul><ul><li>Prévoir un moyen d’accès à l’information autre que la couleur </li></ul><ul><li>Prévoir un contraste suffisent </li></ul><ul><li>Séparer convenablement le contenu de la présentation </li></ul><ul><li>Eviter les changements de luminosité, les clignotements ou les mouvements </li></ul><ul><li>Utiliser une présentation cohérente et accessible </li></ul>

23. Présentation et mise en forme <ul><li>Vérification : </li></ul><ul><li>Absence d’informations véhiculées uniquement par la couleur </li></ul><ul><li>Contraste avec une valeur de 3:1 ou 4:1 </li></ul><ul><li>Utilisation des CSS (image, tableau de mise en forme) </li></ul><ul><li>Absence d’élément ou d’attribut de présentation </li></ul><ul><li>Absence d’informations disponible uniquement avec les CSS et/ou les images </li></ul>

24. Présentation et mise en forme <ul><li>Vérification : </li></ul><ul><li>Respect du rôle sémantique des éléments </li></ul><ul><li>Possibilité d’agrandir les textes sans dégats </li></ul><ul><li>Respecter la linéarisation du contenu </li></ul><ul><li>Possibilité de contrôle des clignotements, mouvements et changements de luminosité </li></ul><ul><li>Cohérence du design sur l’ensemble du site </li></ul>

25. Présentation et mise en forme <ul><li>Démo : </li></ul><ul><li>Ville de Nantes </li></ul><ul><li>Semaine de l’emploi des personnes handicapées </li></ul><ul><li>Recrutement de la Marine </li></ul>

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

28. Structure page et site <ul><li>Vérification : </li></ul><ul><li>Conformité de l’arbre du document </li></ul><ul><li>Absence de balises dépréciées ou obsolètes </li></ul><ul><li>Présence et bonne arborescence des balises Hx </li></ul><ul><li>Utilisation correcte des listes ul, dl, ol et des balises de citations </li></ul><ul><li>Présence d’accesskey et d’un plan du site fonctionnel </li></ul><ul><li>Présence des balises fieldset/legend, optgroup/label </li></ul><ul><li>Présence d’un titre au page et de balises meta </li></ul>

29. Structure page et site <ul><li>Démo : </li></ul><ul><li>Fiche RGAA </li></ul><ul><li>Le Monde </li></ul><ul><li>Changement d’adresse </li></ul>

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

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

33. Liens et navigation <ul><li>Démo : </li></ul><ul><li>liberation.fr </li></ul><ul><li>competitivite.gouv.fr </li></ul>

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

35. Liens et navigation <ul><li>Démo : </li></ul><ul><li>vendee-tourisme.fr/a-suivre/ </li></ul>

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

37. Liens et navigation <ul><li>Démo : </li></ul><ul><li>www.ooshop.com </li></ul>

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

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

41. Script et multimédia <ul><li>Démo : </li></ul><ul><li>Menu déroulant </li></ul><ul><li>Validation formulaire accessible </li></ul><ul><li>Ajax accessible </li></ul><ul><li>Jkrowling , avatar neuf telecom , frise europe </li></ul>

43. Formulaires et interaction <ul><li>Règles à suivre : </li></ul><ul><li>Associer les champs de formulaire à leurs intitulés </li></ul><ul><li>Utiliser des regroupements légendés </li></ul>

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

45. Plan de l'intervention <ul><li>Questions / réponses </li></ul><ul><li>Contacts : </li></ul><ul><li>Laurent Denis [email_address] </li></ul><ul><li>Aurélien Levy [email_address] </li></ul>

atelier RGAA Parisweb 2007

You are reading a preview.

Check these out next

atelier RGAA Parisweb 2007

More Related Content

Similar to atelier RGAA Parisweb 2007 (20)

Recently uploaded (20)