Cr??er un Catalogue interactif accessible - E-accessibility

1. e-accessibility Le label responsable Handicap et accessibilité numérique : Flipbook, catalogue interactif, Erreurs à éviter, comment choisir? « Mettre le Web et ses services à la disposition de tous les individus, quel que soit leur matériel ou logiciel, leur infrastructure réseau, leur langue maternelle, leur culture, leur localisation géographique, ou leurs aptitudes physiques ou mentales. » Tim Berners-Lee, directeur du W3C N.B. : Un Catalogue interactif peut aussi s’appeler e-Catalogue, e-Brochure, Flipbook …

2. Les évolutions depuis 2005 Progrès et accessibilité e-accessibility Le label responsable • Catalogue interactif accessible : quelques définitions … • Catalogue interactif = solution de virtualisation des documents • Catalogue interactif = interface (contenant) + document (contenu) • Interfaceaccessible = navigation full clavier + compatibilité avec les technologies d’assistance (lecteur d’écran type Jaws utilisé par les non-voyants) • Documentaccessible = tous les contenus rendus accessibles (document PDF, player & vidéo, animations, etc.) • Accessibilité = Conformément aux normes WCAG 2.0 + ARIA du W3C • Qu’en est-il de l’accessibilité des solutions du marché ? • Beaucoup de solutions se disent accessibles en proposant juste le document (contenu) en version HMTL = interface non utilisable par les pers. handicapées • Encore faut-il que la version HTML soit conforme aux normes d’accessibilité ?(Niveaux de titres, changements de langue, liens, tableaux, etc.) • Pour s’en assurer : exigez des tests par des non-voyants via Jaws !

3. PDF accessible, Catalogue accessible Les erreurs à éviter e-accessibility Le label responsable • Comment éviter les solutionsnon-conformes ? • Bluff de l’esthétisme : Une belle interface accompagnée de textes en Html sans balises de navigation n’est pas interprétable, donc solution non accessible • Bluff de la synthèse vocale: L’utilisation d’une synthèse vocale (de type ReadSpeaker) pour lire un texte Html n’est pas une preuve d’accessibilité, surtout sans les balises de navigation= non accessible • Pas d’alternatives textuelles = Pas d’interprétation d’images, de boutons d’écrans, de mots simplifiés (ex: 33M = 33 Millions) = non accessible • Comment un non-voyant navigue avec JAWS ? • Jaws = lecteur d’écran utilisé par une personne non-voyante permettant d’interpréter un texte (donc Prise en compte desbalises de navigation) au format HMTL ou PDF accessible. Cette lecture est accompagnée d’une synthèse vocale. • Les raccourcis natifs de Jaws permettent à l’utilisateur de naviguer plus facilement, le cas contraire, la navigation sera extrêmement difficile.

4. Étude de Cas A (1/3) Interface HTML (Sans Balises de navigation) e-accessibility Le label responsable N.B. : Pour le respect de la société concernée, son nom ne sera pas divulgué. 2 409 11 592 230 … ?(1) (voir diapo 3/3) Ce texte est-il cohérent ? Sans Balises de navigation, une personne non-voyante ne peut ni accéder au contenu, ni s’orienter, ni interpréter le contenu de ce texte 46 M =« 46 M » = « 46 Millions » = ? Est-ce évident ? 12 5 621 ? (2) (voir diapo 3/3)

5. Étude de Cas A (2/3) Interface graphique – Mode Recherche (Sans Balises de navigation) e-accessibility Le label responsable Holding est le mot recherché Ce texte est-il compréhensible par une personne valide ? Et pour personne handicapée ?

6. Étude de Cas A (3/3) Interface graphique du catalogue interactif (Sans Balises de navigation) e-accessibility Le label responsable 12 5 621 ?(2) (voir diapo 1/3)Avec une interface graphique, il est possible de comprendre ces chiffres en utilisant le camembert. 2 409 11 592 230 … ? (1) (voir diapo 1/3)Chaîne de chiffres déchiffrée … 46 M correspond à 46 Millions

7. Étude de Cas B (1/2) Interface HTML (Sans Balises de navigation) e-accessibility Le label responsable N.B. : Pour le respect de la société concernée, son nom ne sera pas divulgué. Que se passe t’il lorsqu’on tente d’afficher l’image de cette page ? Réponse à la page suivante

8. Étude de Cas B (2/2) Interface HTML en papier peint (Sans Balises de navigation) e-accessibility Le label responsable En affichant l’image, à notre grande surprise, nous découvrons un papier peint. Les images doivent être séparées des unes des autres afin de pouvoir être interprétées. Impossibilité d’inclure des alternatives textuelles. Avec ce papier peint, impossibilité de navigation (accès au contenu, orientation, interprétation) Texte incrusté à l’image sans aucune alternative textuelle

9. Ergonomie, Balises de navigation Comment choisir ? e-accessibility Le label responsable • Les critères d’accessibilité : • Lisibilité (Readability) : Texte lisible par tous et sur tout format (Html, PDF …) • Utilisabilité (Usability) : Ergonomie (Navigation clavier, image avec alternative textuelle, Zoom, Confort de lecture, adaptation des couleurs …) • Conformité (Suitability) : Les normes WCAG 2.0 & ARIA et Les niveaux de conformité Simple A, Double A, Triple A • Accessibilité= Lisibilité + Utilisabilité + Conformité • A quoi sert une balise de navigation ? • Une solution accessible est une solution dont la navigation permet l’accès à un contenu (Tableau, Niveaux de titre, Camembert etc.) ainsi qu’à son interprétation • Les balises de navigation et les alternatives textuelles servent aussi d’orientation et d’interprétation pour la personne non-voyante • Un texte lisible non navigable n’est pas accessible pour une pers. non-voyante • La navigation doit être possible par la souris et par le clavier (tabulation)

10. Le handicap, une expertise Les bons réflexes e-accessibility Le label responsable • Prestationsérieuse= Tests de conformitéobligatoires • Une solution accessible est obligatoirement soumise à des tests de conformité (appelés aussi Tests utilisateur) par des utilisateurs non-voyants • Par défaut, il est prioritaire que les tests de conformité se déroulent lors des rendez-vous de démonstration • Récapitulatif • Un expert est toujours en collaboration avec une personne handicapée dans tous ses projets. Dans le cas contraire, soyez vigilant ! • Les balises de navigation (tables, niveaux de titres …) sont obligatoires afin de permettre l’accès au contenu, l’orientation et l’interprétation par une personne non-voyante en utilisant un lecteur d’écran tel que Jaws • Les tests de conformité sont obligatoires • Les critères d’accessibilité obligatoires (lisibilité, utilisabilité, conformité) vous serviront à avoir une vision globale de l’accessibilité numérique et vous permettrontd’éviter le bluff …

11. Questions et Sensibilisation Conseil d’expert en accessibilité e-accessibility Le label responsable • Soyez vigilant ! • Aidez-vous de ce guide pour mieux choisir • Un catalogue accessible commence par l’accessibilité de vos fichiers PDF ainsi que de la page HMTL : Faites les tester ! • Renseignez-vous sur les différentes balises de navigation afin de mieux comprendre l’ergonomie de l’application (info-bulle, niveaux de titre, etc.) • Ne gaspillez pas votre budget dans des applications inappropriées ! • Demandez conseil ! Des questions sur l’accessibilité numérique ? Pour mieux vous informer, veuillez contacter l’association « e-accessibility » : http://www.e-accessibility.info ou bien contact@e-accessibility.info Le label Web pour les sites Le label PDF pour les publications