Ce diaporama a bien été signalé.
Le téléchargement de votre SlideShare est en cours. ×

HTML5, ARIA et accessibilité du Web: où en est-on?

Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité

Consultez-les par la suite

1 sur 38 Publicité

HTML5, ARIA et accessibilité du Web: où en est-on?

Télécharger pour lire hors ligne

Le HTML5 révolutionne le Web. Mais qu'en est-il de son accessibilité? Comment rendre accessible une application développée avec la technologie du web d'aujourd'hui et de demain?
Cette présentation de Jean-Pierre Villain (Qelios), donnée lors de la Conférence Romande sur l'Accessibilité Web 2013 (CRAW2013) fait le point sur les principaux challenges posés, et les solutions disponibles.

Le HTML5 révolutionne le Web. Mais qu'en est-il de son accessibilité? Comment rendre accessible une application développée avec la technologie du web d'aujourd'hui et de demain?
Cette présentation de Jean-Pierre Villain (Qelios), donnée lors de la Conférence Romande sur l'Accessibilité Web 2013 (CRAW2013) fait le point sur les principaux challenges posés, et les solutions disponibles.

Publicité
Publicité

Plus De Contenu Connexe

Similaire à HTML5, ARIA et accessibilité du Web: où en est-on? (20)

Plus par Qelios (11)

Publicité

HTML5, ARIA et accessibilité du Web: où en est-on?

  1. 1. HTML 5 /ARIA et l'accessibilité du Web Où en est-on ? Conférence Romande sur l’Accessibilité du Web – Lausanne – Avril 2013
  2. 2. HTML 4 Le Web de grand-papa
  3. 3. A v a n t – p r o p o s Le développement Web en HTML 4 Pour l'accessibilité  Facile  Stable  Prédictif  JS = alternative "WCAG est ton ami" Pour le Web Site Perso Site Corporate Site marchand Application
  4. 4. HTML 5 Le Web mutant
  5. 5. A v a n t – p r o p o s Le développement Web en HTML 5 Pour l'accessibilité  En développement  Instable  Imprévisible  JS = JS "WCAG fait ce qu'il peut" Pour le Web Canvas Audio Vidéo SVG Drag and Drop MathML CSS 3.0 Touch Event Geo Location Web Socket Web Storage AJAX WAI ARIA Web GL Micro Data Calendar API File API Web Workers
  6. 6. A v a n t – p r o p o s Quelques nouveautés Modifications Groupe <figure> <figcaption> <main> Contenu <mark> <small> <time> <wbr> Embeded <video> <audio> <source> <track> <canvas> Interactif <details> <summary> <menu> <menuitem> <dialog> Structure <article> <section> <nav> <aside> <header> <footer> <address> Formulaire <datalist> <keygen> <output> Types search tel date email password number range color Attributs required multiple pattern min max step placeholder autofocus autocomplete <progress> <meter> Eléments <a> <h1> <p> Un lien peut contenir des éléments de type block Eléments / Attribut obsolètes Non conformes <applet> <acronym> <bgsound> <tt> longdesc target summary scrolling Conformes (warning) <doctype> border name size
  7. 7. ARIA Le Web accessible
  8. 8. Avant - propos ARIA Technologie d’assistance API Accessibilité Système Navigateur Web Comment un lecteur d’écran sait de quoi il parle ? Zone de liste déroulante Choose one or more users avery 1 sur 4 Deux documents :  L'API  Role  State  Properties  Best practices  Design Pattern  Comportement  Gestion clavier
  9. 9. Avant - propos Pour HTML tout est défini dans les spécifications Lien, c’est super Titre de niveau 1, c’est super Graphique, c’est super Bouton, c’est super <a href=‘’> C’est super </a> <h1> C’est super </h1> <img src=‘’ alt=‘C’est super’ /> <input type=‘submit’ value=‘C’est super’ /> Case à cocher, cochée, c’est super Le lecteur d’écran dispose de toutes les informations renvoyées par le navigateur et les adapte comme il le souhaite :
  10. 10. Avant - propos Avec Javascript Problème pour l’utilisateur C’est quoi ce truc ? Volume 0% <div><span>0%</span> <div><a></a> </div></div> Heu … Volume 0% <div><span>0%</span> <div> <a></a> </div></div> Volume 48% Ha! bon … <div><span> 48% </span> <div> <a></a> </div></div> Identifier – Utiliser - Comprendre
  11. 11. Avant - propos Objectifs de l'API ARIA Avantages  Implémentation de mieux en mieux supportée par les navigateurs  Support en amélioration constante sur les AT  Prise en charge par les bibliothèques JavaScript  Facile à implémenter Désavantages  Gestion de l'utilisation au clavier très complexe  Différence d'interprétation de certaines propriétés par les AT  Tests obligatoires 1. Définir les composants d'interface et de structure 2. Informer de l'état et des propriétés des composants d'interface 3. Informer et gérer les mises à jour de contenus dynamiques 4. Rendre les composants utilisables au clavier Exemple simple
  12. 12. Les boites de dialogue : role = alertdialog Inconvénient Pas stylable N’accepte que du texte Avantage C’est une vraie fenêtre modale Ne nécessite aucun traitement Alerte Javascript Inconvénient Ce n’est pas une vraie fenêtre modale Avantage Personnalisable à 100% Alerte ARIA Objectif : créer une boite d’alerte alternative aux méthodes alert, promprt, confirm de JS. Attention : il faut maîtriser les limites des boites de dialogues ARIA ! HTML 5 <dialog> ARIA - Exemples
  13. 13. Les live region, la propriété aria-live Objectif : informer des mises à jour dynamiques et gérer l’interaction entre la zone de mise à jour et les actions de l’utilisateur Principe : on attribue des valeurs de gestion des signalements de mise à jour sur l'élément mis à jour Propriétés complémentaires atomic : true|false Toute la zone ou seulement la partie mise à jour est lue relevant: addition|removal Les ajouts et les suppressions de contenus (dom) sont signalés relevant: text|all Seuls les changements de texte ou tous les changements sont signalés aria-busy: true|false Signale que la zone est en train d’être mise à jour ARIA - Exemples
  14. 14. Attention Récupération d'information de contexte avec labelledby et describedby labelledby et describedby permettent de lier des contenus les uns aux autres. Ces deux attributs sont omniprésents dans les implémentations ARIA. L’une des utilisations est de produire des messages lors de l’utilisation d’un composant. Labelledby et describedby ne fonctionnent pas avec tous les éléments :  fonctionnent lorsque le Design Pattern le requiert  Fonctionnent avec les éléments de formulaire Exemple un formulaire intelligent ARIA - Exemples
  15. 15. WCAG Vs HTML 5 / ARIA
  16. 16. Avant - propos Ce qui ne changera pas Techniques  Les principes  Les règles  Les critères  La conformité Ces éléments font partie du bloc "normatif" de WCAG 2.0 ; ils sont indifférents aux technologies. En HTML 5, il faut adresser les mêmes problématiques avec les mêmes objectifs Ce qui va changer  Les techniques  Les notes techniques Un travail exploratoire est en cours pour les techniques. Des notes techniques sont adossées à la spécification pour certaines problématiques particulières 10 techniques "HTML 5" tabindex required placeholder <section> <article> <aside> <nav> <track> Notes techniques 2 notes techniques 30 techniques "ARIA" heading controls landmarks alert range label labelledby describedby checked expanded Alternative d'image Utilisation d'Aria
  17. 17. WCAG Vs HTML5 / ARIA Principales évolutions
  18. 18. Images Images légendées FIGURE et FIGCAPTION <figure> <img src="pic.jpg"> <figcaption> Légende de l'image </figcaption> </figure> <figure role="group" > <img src="pic.jpg" alt="photo 1" > <figcaption> Légende de l'image (photo 1) </figcaption> </figure> Spécification HTML5 Fallback note WCAG  L'atrribut ARIA role="group" permet de créer une relation explicite entre l'image et sa légende  La présence d'un "label" (nom de l'image) dans l'alternative permet de créer une relation implicite entre l'image et sa légende  <figure> et <figcaption> ne sont pas encore supportées par les technologies d'assistance.  Utiliser des fallback Source : note technique WCAG Support (Accessibilité HTML 5)
  19. 19. Images Utilisation de l'attribut TITLE Spécification HTML5 <img src="pic.jpg" alt="la tour eiffel" title="Copyright : AFP 2013"> <img src="pic.jpg" alt="La tour eiffel Copyright : AFP 2013">  <figure role="group" > <img src="pic.jpg" alt="La tour eiffel " > <figcaption> Photo: Copyright : AFP 2013</figcaption> </figure> Recommandation note WCAG Source : note technique WCAG Support (Accessibilité HTML 5)  L'attribut title ne doit jamais être utilisé pour insérer une alternative.  Des informations complémentaires (des métadonnées, par exemple) (copyright, date, auteur…) ne doivent jamais être données dans l'alternative ALT.  Bien que suggerées par HTML 5, ces informations ne doivent jamais être données via un title.
  20. 20. Images Absence d'attribut ALT pour une image légendée Source : note technique WCAG Support (Accessibilité HTML 5)  L'attribut alt doit toujours être présent !  Lorsque les AT le supporteront, le motif défini par la spécification deviendra utilisable. <figure> <img src="pic.jpg"> <figcaption> Légende de l'image </figcaption> </figure> Spécification HTML5 <figure role="group"> <img src="pic.jpg" alt="photo 1"> <figcaption> Légende de l'image (photo 1) </figcaption> </figure> Fallback HTML5 Avec Firefox, le parent de l'image (FIGURE) est labellisé avec FIGCAPTION. Une AT pourrait utilisée cette valeur comme Alternative de l'image. Exemple de comportement attendu via une API d'accessibilité
  21. 21. Images Utilisation de SVG Source : html5accessibility.com Support (Accessibilité HTML 5) ? <svg height="100px" width="100px" role="img" aria- label="Titre et description"> <title>Titre</title> <desc>Description</desc> <rect fill="green" height="100px" width="100px"/> </svg> SVG inline <svg height="100px" width="100px" > <rect fill="green" height="100px" width="100px"/> </svg> <a href="description.htm">Description </a> Fallback  role="img" et aria-label permettent aux AT de restituer le tracé comme une "image" dont le nom est le contenu de aria-label
  22. 22. Images Utilisation de CANVAS Source : http://www.paciellogroup.com/blog/201 2/06/html5-canvas-accessibility-in- firefox-13/ Support (Accessibilité HTML 5)  Firefox et IE implémentent correctement l'élément canvas, le contenu textuel est vocalisé et tabulable. <canvas id="example" width="260" height="200"> <h2>Exemple de formes géométriques déssinées avec canvas</h2> <p> Un rectangle avec une bordure noire contient trois formes : un <a href="http://en.wikipedia.org/wiki/Square" onfocus="drawSquare();" onblur="drawPicture();">carré</a> vert et un <a href="http://en.wikipedia.org/wiki/Triangle"onfocus="drawTriangle();" onblur="drawPicture();">triangle</a> bleu recouvrent partiellement un <a href="http://en.wikipedia.org/wiki/Circle" onfocus="drawCircle();" onblur="drawPicture();">cercle</a> rose</p> </canvas>
  23. 23. Multimédia Support (Accessibilité HTML 5) Utilisation de <VIDEO> et <TRACK>  Les éléments <VIDEO> et <TRACK> sont supportés par les navigateurs mais l'accessibilité est variable.  Problème :  Exposition partielle des contrôles (sauf pour IE 10)  Accessibilité des contrôles au clavier médiocre (sauf pour IE10  Audio-description inexploitable <VIDEO> <TRACK> ATTENTION  L'audio-description n'est pas supportée actuellement  Utiliser une vidéo alternative <video src="brave.webm"> <track kind=subtitles src=brave.en.vtt srclang=en label="English"> <track kind=captions src=brave.en.hoh.vtt srclang=en label="Sous-trage malentendants"> </video> L'attribut KIND indique le type de sous-titrage :  Subtitles : sous-titrage de traduction  Caption : sous-titrage pour malentendants
  24. 24. Multimédia Support (Accessibilité HTML 5) Stratégie d'implémentation si <video> est requis <VIDEO> <TRACK> ATTENTION  L'audio-description n'est pas supportée actuellement  Utiliser une vidéo alternative Vidéo avec sous-titrage uniquement 1. Utilisation de <video> et <track> en désactivant les contrôles natifs par une surcouche de contrôle Javascript Utiliser des framerworks : - Playr : http://www.delphiki.com/html5/playr/ - Acorn video : http://ghinda.net/acornmediaplayer/ Vidéo avec sous-titrage et audio-description 1. Utilisation de <video> et <track> en désactivant les contrôles natifs par une surcouche de contrôle Javascript Utiliser des framerworks comme videojs, par exemple 2. Utiliser une vidéo alternative où l'audio-description est intégrée en dur à la bande son principale. Avantage : on peut remonter ! Dans tous les cas : Proposer une alternative : Vidéo sous-titrée en dur Vidéo audio-décrite en dur Lecteur FLASH accessible (Youtube ?)
  25. 25. Liens Support (Accessibilité HTML 5) Utilisation de A Href avec des contenus de type bloc Html 5 autorise l'utilisation d'éléments de type block dans un lien (A HREF). Ce type de lien est supporté par toutes les AT mais peut causer des problèmes de restitution. Cette utilisation est à éviter Problème potentiels  NVDA /JAWS : répétition de liens pour chaque élément de contenus sur certaines fonctionnalités  VOICE OVER : texte répétés plusieurs fois de suite  JAWS : disparition des titres via la liste des titres de la page Stratégie d'implémentation si cette utilisation est requise  Placer l'information essentielle (qui rend le lien explicite) en début de contenus.  Utiliser un wrapper traité en JS (attention : testez !) Attention  Ne pas utiliser de lien dans un lien
  26. 26. JavaScript Support (Accessibilité HTML 5) Utilisation de dispositifs JavaScript Pour AccessiWeb L'absence d'alternative à JavaScript est acceptée pour des contenus en HTML 5 L'utilisation de JavaScript est prédominante en HTML 5 :  Pilotage d'API (par exemple, canvas)  Mise à disposition de composants complexes  Mise à disposition de fallback, basés sur Javascript, pour des composants natifs HTML 5 non supportés (slider en fallback de range, par exemple) Stratégie de gestion des dispositifs JavaScripts  Pas d'alternative obligatoire, si le dispositif est accessible et utilisable avec JS activé  Utilisation de ARIA pour rendre les dispositifs JS accessibles  Tester dans les AT l'accessibilité produite par les dispositifs Javascript
  27. 27. <body> <header> <nav> <footer> <article> <aside> <section> <h1> <header> <footer> Structure Utilisation des éléments de structures Attention !  SECTION  ARTICLE  FOOTER  ADDRESS L'usage de ces éléments portent encore à débats. Notamment l'utilisation des éléments SECTION et ARTICLE semblent poser beaucoup de problèmes aux producteurs de contenus.
  28. 28. Utilisation de l'Outline Attention Structure L'outline représente la structure du document basée sur les éléments sectionnants répartis en 3 catégories <body> <nav> <article> <section> <aside> Racine de section Section Section Implicite <h1> … <h6> L'OUTLINE est sujet à de nombreuses controverses. On peut imaginer que, faute d'un usage suffisamment stable, il ne sera finalement pas utilisé pour l'accessibilité. Utiliser le plan du document (H1 – H6) !
  29. 29. Support insuffisant des nouveaux types de formulaire Support (Accessibilité HTML 5) color date (month week datetime) email number time url required placeholder Support insuffisant des nouveaux éléments interactifs <details> <meter> <output> Utiliser des composants ou des méthodes alternatives en Javascript Attention ! A tester : le support évolue très vite sur ces éléments. ! Attention ! placeholder ne peut pas remplacer un label ! Formulaire et éléments interactifs
  30. 30. Support (Accessibilité HTML 5)c ? Support partiel des nouveaux éléments de formulaire <datalist> <progress> <range> <progress> <datalist> <range> Formulaire et éléments interactifs
  31. 31. Utilisation de <main> pour indiquer la zone de contenu principal Navigation Support (Accessibilité HTML 5) <main> Attention  <main> devrait être unique dans la page  Il existe une différence d'interprétation entre HTML 5 et HTML LV !  Les liens d'accès rapides devront continuer d'être utilisés !
  32. 32. Utilisation de <nav> pour indiquer les zones de navigation principales Support (Accessibilité HTML 5) Attention ! <nav> : <nav> <nav>  doit être consacré aux éléments de navigation principaux  Les liens de pied de page se structurent avec <footer> plutôt qu'avec <nav> Navigation
  33. 33. Utilisation des landmarks ARIA Support (Accessibilité HTML 5) Les rôles landmark ARIA permettent de positionner des "repères" sur la structure du document pour faciliter la navigation. L'utilisation de ces repères sera rendue obligatoire banner : zone d’en-tête navigation zone de navigation Main : la zone de contenu principal Contentinfo : zone d’information propre au document search: zone de recherche complementary zone de contenu complémentaire Mapping HTML 5 Landmark HTML5 Banner Header Main main Navigation Nav Complementary Aside Contentinfo footer Navigation
  34. 34. ARIA Méthodes de conceptions et d'utilisation A consulter Using WAI-ARIA in HTML http://www.w3.org/TR/aria-in- html/ Utiliser de préférence un élément ou un attribut HTML 5 équivalent, sauf si : - Le rendu visuel n'est pas satisfaisant - Les navigateurs ne supportent pas l'élément - Les navigateurs supportent l'élément mais les technologies d'assistance non Ne pas changer le rôle natif d'un élément via ARIA sauf si c'est l'unique solution pour le rendre accessible <h1 role=button> heading button </h1> Ne pas faire Faire <h1> <button> heading button </button> </h1> <button> Text</button> Le titre sera ignoré par les AT
  35. 35. ARIA Vs HTML 5 Méthodes de conceptions et d'utilisation A consulter Using WAI-ARIA in HTML http://www.w3.org/TR/aria-in- html/ Consulter et suivre attentivement les recommandations d'utilisation des rôles ARIA indiqués sur la note !  Restriction d'utilisation des rôles pour chaque élément  Préconisation de surcharge des rôles natifs pour certains éléments
  36. 36. Tester et valider un widget ARIA
  37. 37. Valider un widget ARIA Exemple simple : slider fork JQuery Exemple d'un processus de vérification ARIA Role, State, Properties . Comportement API accessibilité Compatibilité avec la baseline Base de référence ? ? ? ? ? 1. 2 3. ?
  38. 38. Merci de votre attention Qelios – Accessibilité Numérique 04 68 85 25 42 http://qelios.net

×