Mesure de la conformité WCAG 2.0 via le référentiel AccessiWeb 2.2 avec HTML5/ARIA 13 décembre 2012 17 ème séminaire AccessiWeb.

Présentation au sujet: "Mesure de la conformité WCAG 2.0 via le référentiel AccessiWeb 2.2 avec HTML5/ARIA 13 décembre 2012 17 ème séminaire AccessiWeb."— Transcription de la présentation:

1 Mesure de la conformité WCAG 2.0 via le référentiel AccessiWeb 2.2 avec HTML5/ARIA 13 décembre 2012 17 ème séminaire AccessiWeb

2 Intervenants Denis Boulay, Association BrailleNet, denis.boulay@accessiweb.org @accessiweb denis.boulay@accessiweb.org Jean-Pierre Villain, Qélios jpvillain@yahoo.fr @villainjp jpvillain@yahoo.fr

3 Sommaire en 7 points Rappels 1.Préambule 2.Introduction 3.Les principes 4.Base de références 5.Exemples – Préambule – Thématique Images 6.Le futur référentiel AccessiWeb HTML5 / ARIA

4 Introduction et rappels

5 Rappel du contexte : Evolution des technologies Evolution des usages Nouvelles plateformes Utilisation grandissante du HTML 5 (présent dans les CMS) Une des conséquences : Demandes de labellisations "HTML 5" Dans les faits : Référentiel AccessiWeb actuel pas adapté pour de telles demandes

6 Introduction et rappels Objectifs et besoins opérationnels : Besoin dun nouveau référentiel MAIS Difficile à mettre en œuvre dans un contexte dimplémentation progressive par les AT/UA/OS Nécessité de mettre en place des procédures de tests supplémentaires

7 Introduction et rappels Un plan en deux étapes : 1.Mise en place dune procédure adaptée dans le cadre de la labellisation Pourquoi ? Pour répondre à un besoin immédiat Pour tester - en situation – certains principes qui seront adoptés pour le nouveau référentiel (voir par ailleurs) 2.Production progressive du nouveau référentiel (premier trimestre 2013)

8 Introduction et rappels Comment fonctionne la méthode décriture des référentiels AW ? Rédaction du référentiel par un groupe restreint dExperts Pilotage BrailleNet/Qélios dans le cas du référentiel AW version 2.0 à 2.2 Appels à des Experts Référents pour avis précis (15 ER actifs) Validation finale et publication Les mises à jours fonctionnent sur ce modèle Recensement des retours issus de la liste GTA, des labellisations… Modifications apportées soumises aux ER Publication dune nouvelle version + listes des changements

9 1 Procédure adaptée pour la labellisation de site en HTML5 Préambule

10 Rappel HTML 5 Plus quune simple évolution, HTML 5 est une refondation du langage HTML Nouveaux éléments Formulaire, éléments sectionnants, images… Nouveaux attributs Une centaine de nouveaux attributs ou valeurs, par exemple 18 nouveaux attributs et 12 nouveaux types uniquement pour lélément input. APIs : 2D/3D, Multimédia, Local Storage, Edition, Drag an Drop…

11 Une procédure délaboration très compliquée entre le W3C et le WhatWG La méthode Modulaire pour le W3C (plusieurs modules de spécifications) Unitaire pour le WhatWG (Un seul corps de spécifications Le versionnage Version (5.0, 5.1… Next) pour le W3C Pas de version (Html Living Standard) pour le WhatWG Principaux problèmes Laccessibilité Prise en charge dARIA, élément, rôle de title….

12 Pourquoi AW 2.2 nest pas adapté pour HTML5/ARIA Les différences de fond et les évolutions sont trop nombreuses pour porter AW 2.2 vers HTML 5 HTML5 supprime ou modifie des éléments Par exemple summary pour les tableaux, longdesc pour les images Outline pour le titrage… La notion dalternative et de compatibilité pour javascript telle que définie par AW 2.2 nest pas adaptée à HTML 5 Prise en charge de lAPI ARIA

13 Procédure adaptée pour la labellisation de site en HTML5 Introduction 2

14 Cartographie de ladaptation pour le labellisation HTML5/ARIA 6 principes Destinés à assurer la transition entre AW 2.2 et HTML5/ARIA Liste des adaptations connues Adaptation des critères AW 2.2 (critères, tests, conditions, cas particuliers, notes techniques) Base de référence AT/UA/OS Destinée à gérer la notion de « compatible avec laccessibilité » Base de connaissance Qualifier, autant que possible des widgets ARIA pour laccessibilité Base de connaissance Qualifier, autant que possible des widgets ARIA pour laccessibilité

15 Procédure et état davancement à Novembre 2012 BrailleNet et le groupe décriture proposent Le groupe dExperts référents discutent et approuvent Publications Principes Base de référence Adaptations Approuvés (sauf Navigation Clavier ) En discussion En préparation Publication Objectif : Courant Janvier 2013

16 3 Procédure adaptée pour la labellisation de site en HTML5 Les principes

17 Recourir à des alternatives accessibles, si nécessaire 1 Si un élément HTML5/ARIA nest pas compatible avec laccessibilité, il faudra implémenter un dispositif alternatif conforme AW 2.2 / Compatible Non Compatible Conforme AW 2.2 Non Compatible Présence dune alternative texte ou Sauf exception répertoriée, les alternatives accessibles devront être disponibles sans recourir à une manipulation de lutilisateur comme la désactivation du support dune technologie, par exemple.

18 Rétrocompatibilité 2 Maintenir une rétrocompatibilité stricte avec le référentiel AccessiWeb 2.2, sauf exception répertoriée, pour le cas délément absents ou déclarés « obsolètes » par HTML5 mais requis par AW 2.2. summary Obsolète non-conforme Equivalents HML5 Non-Compatibles summary ! Labsence de validité du code HTML5/ARIA résultante est prise en charge via une déclaration de conformité partielle. En HTML 5 Obsolète Conforme Obsolète Non- Conforme Validation Warning Failure

19 Privilégier les éléments HTML5/ARIA si le support de laccessibilité est amélioré 3 Privilégier les éléments HTML5/ARIA équivalant ou non à des éléments définis dans le référentiel AW 2.2, si le support de laccessibilité est amélioré. Landmark role Améliore laccessibilité mais absence de support au clavier banner, main, navigation, search… + Skip links !

20 Alternative à JavaScript 4 Sauf indication contraire lors de la procédure de labellisation, ne recourir aux alternatives à JavaScript que lorsque le dispositif ou la fonctionnalité est incompatible avec laccessibilité.. Widget ARIA, Evènement ou dispositif JavaScript Compatible Alternative compatible Lalternative pourra constituer en la mise à disposition dun contenu alternatif conforme ou lutilisation équivalente dun élément défini par le référentiel AW 2.2. Non Compatible Alternative Systématique

21 Navigation au clavier [en discussion] 5 Assurer la navigation au clavier sur et dans un composant complexe via la touche tabulation, au moins, sauf si lutilisateur est informé au préalable du fonctionnement au clavier du composant complexe Les objections du groupe des Experts Référents ne permettent pas dapprouver ce principe en létat. Des consultations et de la recherche documentaire sont en cours. Questions Navigation séquentielle obligatoire ? Respecter les Design Patterns ARIA ? Comment informer lutilisateur ? Widgets ARIA

22 Robustesse 6 Respecter la sémantique HTML5 et ne pas modifier le rôle natif dun élément via ARIA sauf si cela permet daméliorer la compatibilité avec laccessibilité et ne contrevient pas à lun des principes de ce document. La note « Using Aria in HTML » définit pour HTML5 les rôles utilisables pour chaque élément HTML5 ainsi que le mappage requis si le support nest pas assuré. role= button role= heading Mappage autorisé Mappage refusé Modifier le rôle natif dun élément HTML 5 HTML L.S Autorisé Restrictions Surcharger un rôle natif via un rôle ARIA équivalent HTML L.S Refusé Failure HTML 5 Autorisé Restrictions + behavior

23 4 Base de référence Compatibilité avec laccessibilité

24 Rappel : compatibilité avec laccessibilité et problématiques liées Dispositif, éléments, fonctionnalité, technologie Compatible avec les technologies dassistance et les fonctionnalités daccessibilité des systèmes dexploitation Non Compatible Alternative Compatible Le support dHTML5/ARIA (2012, 2013, 2014… ??) Variable, irrégulier et en cours dimplémentation Compliqué à implémenter par les AT Interprétations inconstantes pour les propriétés ARIA par exemple

25 Exemple : lier une légende à une image (Novembre 2012) texte Conforme ARIA Pas supporté par les AT Pas compatible (probablement jamais) texte Conforme HTML5 Support incomplet Pas compatible (2013, 2014…. ??) texte Conforme HTML5/ARIA Patch ARIA provisoire Compatible (2013, 2014… ??)

26 Compatible avec laccessibilité ? Technologie dassistance Navigateur Système dexploitation API(s) dAccessibilité + + + 1.Tester quoi ? 2. Sur quelle base ? 3. Comment tester ?

27 Approche proposée [en discussion] #1 Etablir une base de référence représentative UA + AT OS + Exemple de base de référence - JAWS 13 Fr / FF 13 / WIN 7 - JAWS 13 Fr / IE 9 / WIN 7 - NVDA 2012-3 / FF 16 / WIN 7 - ZoomText Fr V1 / FF 16 / WIN 7 - ZoomText Fr V2 / IE 9 / WIN 7

28 Approche proposée [en discussion] #2 Déterminer les conditions et le seuil pour déclarer quun dispositif est compatible avec laccessibilité [1]. Tous les dispositifs HTML5/ARIA dans un même site sont fonctionnels pour une même configuration. [2.a] Un dispositif HTML5/ARIA est considéré comme accessible s'il est fonctionnel pour au moins une configuration pour chaque système d'exploitation présent dans la base de référence. [2.b] Un dispositif HTML5/ARIA est considéré comme accessible s'il est fonctionnel pour x% des configurations présentes. [2.c]. Un dispositif HTML5/ARIA est considéré comme accessible s'il est fonctionnel pour une liste spécifique de configuration au moins. Principe général Conditions et seuils

29 Approche proposée [en discussion] #3 Etablir une méthode de gestion de la base de référence [1]. Pour les AT « payantes » la version de référence est lavant-dernière version [1] Référencement dune nouvelle configuration [2] Versionnage dune composante (AT, UA, OS) dune configuration référencée [3]. Déférencement dune configuration (régression, abandon du support) Principe général Cas identifiés nécessitant une mise à jour [1]. La base de référence et ses mises à jour sont gérés directement par le propriétaire du site (Conditions à définir) Cas des environnement maitrisés

30 Approche proposée [en discussion] #4 Etablir une méthodologie de test Comment tester ? Etablir une base de connaissance -Bibliothèque JS -Tableau de compatibilité de létat de lart Ces deux problématiques sont complexes et nécessitent des moyens

31 Exemple dadaptation du référentiel AW 2.2 Préambule 5

32 Exemple dadaptation : préambule Objectif Fournir aux producteurs de contenus toutes les adaptations « connues » issues de : Spécifications Etat de lart Résultat de tests Moyens Suppression, ajout, modification dun critère, dun test, dune condition… Ajout de notes techniques et/ou de cas particuliers permettant de préciser des aspects techniques particuliers

33 Exemple dadaptation du référentiel AW 2.2 Thématique 1 : Images

34 Exemple dadaptation : thématique 1 Images #1 Critères modifiés Critère 1.2 [Bronze] Pour chaque image de décoration ayant une alternative textuelle, cette alternative est-elle vide (Hors cas particulier) ? - Test 1.2.1 : Pour chaque image de décoration (balise img) ayant un attribut alt, le contenu de cet attribut est-il vide (alt="") (Hors cas particulier) ? Ajout dun cas particulier pour prendre en charge lutilisation dune légende (figcaption) liée à une image de décoration. Dans ce cas la notre technique de WAI « Techniques for providing useful text alternatives demande que lalternative soit renseignée par un nom dimage au moins.

35 Exemple dadaptation : thématique 1 Images #2 Cas particulier Cas particulier pour le critère 1.2 : La note technique "Techniques for providing useful text alternatives" recommande, lorsquun élément FIGCAPTION est utilisé pour créer un titre ou une légende à une image, que lalternative soit renseignée (attribut ALT) afin de créer une association implicite entre limage et son titre ou sa légende. Cette implémentation est actuellement laissée au libre choix de lauteur. Dans ce cas, le critère 1.2 sur les images de décoration est Non-Applicable. La pertinence de lalternative sera évaluée conformément à la note technique "Techniques for providing useful text alternatives" - section "The figure and figcaption elements" - exemple C qui stipule que, dans ce cas, lalternative doit permettre didentifier limage (label), notamment par rapport à sa légende;

36 Exemple dadaptation : thématique 1 Images #3 Critères ajoutés Critère HTML5-1 [Bronze] Chaque image de décoration ne doit pas posséder de titre, cette règle est-elle respectée ? - Test HTML5-1.1 Chaque image de décoration (balise IMG) ne doit pas posséder dattribut TITLE, cette règle est-elle respectée ? La notre technique de WAI « Techniques for providing useful text alternatives interdit lutilisation de lattribut title pour donner un nom (label) à une image de décoration. Cette disposition est une violation assumée de la spécification HTML 5 qui recommande cet usage.

37 Exemple dadaptation : thématique 1 Images #4 Critères ajoutés Critère HTML5-3 [Bronze] Pour chaque image vectorielle de décoration ayant une alternative, cette alternative est-elle vide ? - Test HTML5-3.1 : Chaque image vectorielle (balise SVG) non porteuse dinformation vérifie-t-elle une de ces conditions ? : o Lélément SVG ne contient pas dalternative textuelle o Lélément SVG contient une alternative sous la forme dune image de décoration (attribut ALT vide) Prise en charge du cas dune image SVG de décoration

38 Exemple dadaptation : thématique 1 Images #5 Critères ajoutés Critère HTML5-4 [Bronze] Chaque image vectorielle porteuse dinformation a-t-elle une alternative ? - Test HTML5-4.1 : Chaque image vectorielle (balise SVG) porteuse dinformation vérifie-t-elle une de ces conditions ? : o Lélément SVG contient une alternative textuelle o Lélément SVG contient une alternative sous la forme dune image possédant un attribut ALT o Un lien adjacent permet daccéder à une alternative Prise en charge du cas dune image SVG porteuse dinformation, obligation dune alternative.

39 Exemple dadaptation : thématique 1 Images #6 Critères ajoutés Critère HTML5-5 [Bronze] Pour chaque image vectorielle porteuse dinformation ayant une alternative, cette alternative est-elle pertinente ? - Test HTML5-5.1 : Chaque image vectorielle (balise SVG) porteuse dinformation vérifie-t-elle une de ces conditions ? : o Lélément SVG contient une alternative textuelle pertinente o Lélément SVG contient une alternative sous la forme dune image possédant un attribut ALT dont le contenu est pertinent o Lalternative accessible via un lien adjacent est pertinente Prise en charge du cas dune image SVG porteuse dinformation, pertinence de lalternative.

40 Exemple dadaptation : thématique 1 Images #7 Notes techniques Note 1 : Pour créer une légende HTML5/ARIA propose lutilisation dun attribut TITLE sur une image de décoration ou une image porteuse dinformation. Dans lun ou lautre des cas la restitution (alternative seule, alternative et titre ou titre seul) ne peut être garantie avec suffisamment de robustesse. Comme le spécifie la note technique "Techniques for providing useful text alternatives" cette utilisation nest pas appropriée (cf critère additionnels). Note 2 : Lélément APPLET est déclaré obsolète non conforme en HTML 5, néanmoins les tests 1.1.4, 1.2.3, 1.3.4, 1.4.3, 1.6.3, 1.7.4, 1.8.4, 1.9.4 restent applicables si lélément est implémenté (cf principe 2) Note 3 : Dans le cas de lutilisation dun élément AREA sans attribut HREF, HTML 5 recommande que lattribut ALT soit absent. Néanmoins les tests 1.1.2 et 1.2.2 restent applicables (cf principe 2).

41 Exemple dadaptation : thématique 1 Images #8 Notes techniques Note 4 : Compte tenu du fait que le test AW2.2 [1.6.1] stipule quun texte adjacent peut faire office de description détaillée (à la condition que la présence de la description détaillée soit signalée dans lalternative), lassociation explicite créé via les éléments FIGURE, FIGCAPTION et le rôle GROUP pourra être considérée comme une alternative pour la description détaillée. Dans ce cas, le test 1.6.1 sera réputé valide et le test 1.7.1 applicable. Note 5 : Bien que le support pour laccessibilité des images bitmap ou des formes 2D implémentées via lélément CANVAS ait beaucoup progressé, il est encore insuffisant. En conséquence lélément CANVAS ne peut pas être utilisé pour embarquer une image porteuse dinformation.

42 Exemple dadaptation : thématique 1 Images #9 Eléments non traités [en cours] Attribut longdesc pour créer une description détaillée : Le statut de lattribut longdesc, déclaré « obsolète non conforme » est encore indéfini. Utilisation du rôle « presentation » pour traiter les images de décoration notamment : Objection relevée par Aurélien dans la discussion en cours. (La note technique «Techniques for providing useful text alternatives » ne fait pas mention de cette technique)

43 6 Le futur référentiel AW HTML5/ARIA

44 Merci de votre attention Questions ? Réactions ? Suggestions ? Précisions ?