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

5 235 vues

Publié le

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.

0 commentaire
7 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
5 235
Sur SlideShare
0
Issues des intégrations
0
Intégrations
777
Actions
Partages
0
Téléchargements
49
Commentaires
0
J’aime
7
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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

  1. 1. HTML 5 /ARIAet laccessibilité du WebOù en est-on ?Conférence Romande sur l’Accessibilité du Web – Lausanne – Avril 2013
  2. 2. HTML 4Le Web de grand-papa
  3. 3. A v a n t – p r o p o sLe développement Web en HTML 4Pourlaccessibilité Facile Stable Prédictif JS = alternative"WCAG est ton ami"Pour le WebSite Perso Site CorporateSite marchand Application
  4. 4. HTML 5Le Web mutant
  5. 5. A v a n t – p r o p o sLe développement Web en HTML 5 Pourlaccessibilité En développement Instable Imprévisible JS = JS"WCAG fait ce quil peut"Pour le WebCanvasAudioVidéoSVGDragandDropMathMLCSS3.0TouchEventGeoLocationWebSocketWebStorageAJAXWAIARIAWebGLMicroDataCalendarAPIFileAPIWebWorkers
  6. 6. A v a n t – p r o p o sQuelques nouveautés ModificationsGroupe<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>TypessearchteldateemailpasswordnumberrangecolorAttributsrequiredmultiplepatternminmaxstepplaceholderautofocusautocomplete<progress><meter>Eléments <a><h1><p>Un lien peut contenir deséléments de type blockEléments / Attribut obsolètesNonconformes<applet><acronym><bgsound><tt>longdesctargetsummaryscrollingConformes(warning)<doctype>bordernamesize
  7. 7. ARIALe Web accessible
  8. 8. Avant - proposARIATechnologied’assistanceAPI AccessibilitéSystèmeNavigateurWebComment un lecteur d’écran sait dequoi il parle ?Zone de liste déroulanteChoose one or more usersavery1 sur 4Deux documents : LAPI Role State Properties Best practices Design Pattern Comportement Gestion clavier
  9. 9. Avant - proposPour HTML tout est défini dans lesspécificationsLien, c’est superTitre de niveau 1, c’est superGraphique, c’est superBouton, 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 superLe lecteur d’écran dispose de toutes les informationsrenvoyées par le navigateur et les adapte comme il lesouhaite :
  10. 10. Avant - proposAvec JavascriptProblème pour l’utilisateurC’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 - proposObjectifs de lAPI ARIA Avantages Implémentation de mieux enmieux supportée par lesnavigateurs Support en améliorationconstante sur les AT Prise en charge par lesbibliothèques JavaScript Facile à implémenterDésavantages Gestion de lutilisation auclavier très complexe Différence dinterprétationde certaines propriétés parles AT Tests obligatoires1. Définir les composants dinterface et de structure2. Informer de létat et des propriétés des composants dinterface3. Informer et gérer les mises à jour de contenus dynamiques4. Rendre les composants utilisables au clavierExemple simple
  12. 12. Les boites de dialogue : role = alertdialogInconvénientPas stylableN’accepte que du texteAvantageC’est une vraie fenêtremodaleNe nécessite aucuntraitementAlerte JavascriptInconvénientCe n’est pas une vraiefenêtre modaleAvantagePersonnalisable à 100%Alerte ARIAObjectif : créer une boite d’alerte alternative aux méthodesalert, promprt, confirm de JS. Attention : il faut maîtriser leslimites des boites de dialogues ARIA !HTML 5<dialog>ARIA - Exemples
  13. 13. Les live region, la propriété aria-liveObjectif : informer des mises à jour dynamiques et gérerl’interaction entre la zone de mise à jour et les actions del’utilisateurPrincipe : on attribue des valeurs de gestion des signalements demise à jour sur lélément mis à jourPropriétéscomplémentairesatomic : true|falseToute la zone ou seulement lapartie mise à jour est luerelevant: addition|removalLes ajouts et les suppressionsde contenus (dom) sontsignalésrelevant: text|allSeuls les changements de texteou tous les changements sontsignalésaria-busy: true|falseSignale que la zone est en traind’être mise à jourARIA - Exemples
  14. 14. AttentionRécupération dinformation decontexte avec labelledby et describedbylabelledby et describedby permettent de lier des contenus lesuns aux autres.Ces deux attributs sont omniprésents dans les implémentationsARIA.L’une des utilisations est de produire des messages lors del’utilisation d’un composant.Labelledby et describedby nefonctionnent pas avec tous leséléments : fonctionnent lorsque leDesign Pattern le requiert Fonctionnent avec leséléments de formulaireExemple un formulaire intelligentARIA - Exemples
  15. 15. WCAGVsHTML 5 / ARIA
  16. 16. Avant - proposCe 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 sontindifférents aux technologies.En HTML 5, il faut adresser les mêmesproblématiques avec les mêmesobjectifsCe qui va changer Les techniques Les notes techniquesUn travail exploratoire est en courspour les techniques.Des notes techniques sont adosséesà la spécification pour certainesproblématiques particulières10 techniques "HTML 5"tabindexrequiredplaceholder<section><article><aside><nav><track>Notes techniques2 notes techniques30 techniques "ARIA"headingcontrolslandmarksalertrangelabellabelledbydescribedbycheckedexpandedAlternative dimageUtilisation dAria
  17. 17. WCAG Vs HTML5 / ARIAPrincipales évolutions
  18. 18. ImagesImages légendées FIGURE et FIGCAPTION<figure><img src="pic.jpg"><figcaption>Légende de limage</figcaption></figure><figure role="group" ><img src="pic.jpg" alt="photo 1" ><figcaption>Légende de limage (photo 1)</figcaption></figure>Spécification HTML5 Fallback note WCAG Latrribut ARIA role="group" permet de créer une relationexplicite entre limage et sa légende La présence dun "label" (nom de limage) dans lalternativepermet de créer une relation implicite entre limage et salégende <figure> et <figcaption> ne sont pas encore supportées par lestechnologies dassistance. Utiliser des fallbackSource : note technique WCAGSupport(Accessibilité HTML 5)
  19. 19. ImagesUtilisation de lattribut TITLESpécification HTML5<img src="pic.jpg"alt="la tour eiffel"title="Copyright : AFP2013"><img src="pic.jpg"alt="La tour eiffelCopyright : AFP 2013"><figure role="group" ><img src="pic.jpg" alt="La toureiffel " ><figcaption>Photo: Copyright : AFP2013</figcaption></figure>Recommandation note WCAGSource : note technique WCAGSupport(Accessibilité HTML 5) Lattribut title ne doit jamais être utilisé pour insérer unealternative. Des informations complémentaires (des métadonnées, parexemple) (copyright, date, auteur…) ne doivent jamais êtredonnées dans lalternative ALT. Bien que suggerées par HTML 5, ces informations ne doiventjamais être données via un title.
  20. 20. ImagesAbsence dattribut ALT pour une image légendéeSource : note technique WCAGSupport(Accessibilité HTML 5) Lattribut alt doit toujours être présent ! Lorsque les AT le supporteront, le motif défini par laspécification deviendra utilisable.<figure><img src="pic.jpg"><figcaption>Légende de limage</figcaption></figure>Spécification HTML5<figure role="group"><img src="pic.jpg" alt="photo 1"><figcaption>Légende de limage (photo 1)</figcaption></figure>Fallback HTML5Avec Firefox, le parent delimage (FIGURE) est labelliséavec FIGCAPTION.Une AT pourrait utiliséecette valeur commeAlternative de limage.Exemple de comportement attendu via une API daccessibilité
  21. 21. ImagesUtilisation de SVGSource : html5accessibility.comSupport(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 letracé comme une "image" dont le nom est le contenu dearia-label
  22. 22. ImagesUtilisation de CANVASSource :http://www.paciellogroup.com/blog/2012/06/html5-canvas-accessibility-in-firefox-13/Support(Accessibilité HTML 5) Firefox et IE implémententcorrectement lélément canvas, lecontenu textuel est vocalisé ettabulable.<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édiaSupport(Accessibilité HTML 5)Utilisation de <VIDEO> et <TRACK> Les éléments <VIDEO> et <TRACK> sont supportés par lesnavigateurs mais laccessibilité est variable. Problème : Exposition partielle des contrôles (sauf pour IE 10) Accessibilité des contrôles au clavier médiocre (sauf pourIE10 Audio-description inexploitable<VIDEO><TRACK>ATTENTION Laudio-description nest passupporté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-tragemalentendants"></video>Lattribut KIND indique le type de sous-titrage : Subtitles : sous-titrage de traduction Caption : sous-titrage pour malentendants
  24. 24. MultimédiaSupport(Accessibilité HTML 5)Stratégie dimplémentation si <video> est requis<VIDEO><TRACK>ATTENTION Laudio-description nest passupportée actuellement Utiliser une vidéo alternativeVidéo avec sous-titrage uniquement1. Utilisation de <video> et <track> en désactivant les contrôlesnatifs par une surcouche de contrôle JavascriptUtiliser des framerworks :- Playr : http://www.delphiki.com/html5/playr/- Acorn video : http://ghinda.net/acornmediaplayer/Vidéo avec sous-titrage et audio-description1. Utilisation de <video> et <track> en désactivant les contrôlesnatifs par une surcouche de contrôle JavascriptUtiliser des framerworks comme videojs, par exemple2. Utiliser une vidéo alternative où laudio-description estinté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 durVidéo audio-décrite en durLecteur FLASH accessible (Youtube ?)
  25. 25. LiensSupport(Accessibilité HTML 5)Utilisation de A Href avec des contenus de type blocHtml 5 autorise lutilisation délémentsde type block dans un lien (A HREF).Ce type de lien est supporté par toutesles AT mais peut causer des problèmesde restitution.Cette utilisation est à éviterProblème potentiels NVDA /JAWS : répétition de liens pour chaque élément decontenus 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 pageStratégie dimplémentation si cette utilisation est requise Placer linformation essentielle (qui rend le lien explicite) endébut de contenus. Utiliser un wrapper traité en JS (attention : testez !)Attention Ne pas utiliser de lien dansun lien
  26. 26. JavaScriptSupport(Accessibilité HTML 5)Utilisation de dispositifs JavaScriptPour AccessiWebLabsence dalternative àJavaScript est acceptée pourdes contenus en HTML 5Lutilisation de JavaScript est prédominante en HTML 5 : Pilotage dAPI (par exemple, canvas) Mise à disposition de composants complexes Mise à disposition de fallback, basés sur Javascript, pourdes composants natifs HTML 5 non supportés (slider enfallback de range, par exemple)Stratégie de gestion des dispositifs JavaScripts Pas dalternative obligatoire, si le dispositif est accessible etutilisable avec JS activé Utilisation de ARIA pour rendre les dispositifs JS accessibles Tester dans les AT laccessibilité produite par les dispositifsJavascript
  27. 27. <body><header><nav><footer><article> <aside><section><h1><header><footer>StructureUtilisation des éléments de structures Attention ! SECTION ARTICLE FOOTER ADDRESSLusage de ces éléments portentencore à débats.Notamment lutilisation deséléments SECTION et ARTICLEsemblent poser beaucoup deproblèmes aux producteurs decontenus.
  28. 28. Utilisation de lOutline AttentionStructureLoutline 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 desectionSectionSectionImplicite<h1>…<h6>LOUTLINE est sujet à denombreuses controverses.On peut imaginer que, fautedun usage suffisammentstable, il ne sera finalementpas utilisé pourlaccessibilité.Utiliser le plan dudocument(H1 – H6) !
  29. 29. Support insuffisant des nouveaux types deformulaireSupport(Accessibilité HTML 5)colordate (month week datetime)emailnumbertimeurlrequiredplaceholderSupport insuffisant des nouveauxéléments interactifs<details><meter><output>Utiliser des composants ou desméthodes alternatives enJavascriptAttention !A tester : le support évolue trèsvite sur ces éléments. !Attention !placeholder ne peut pasremplacer un label !Formulaire et éléments interactifs
  30. 30. Support(Accessibilité HTML 5)c?Support partiel des nouveaux éléments deformulaire<datalist><progress><range><progress><datalist><range>Formulaire et éléments interactifs
  31. 31. Utilisation de <main> pour indiquer lazone de contenu principalNavigationSupport(Accessibilité HTML 5)<main>Attention <main> devrait être uniquedans la page Il existe une différencedinterprétation entreHTML 5 et HTML LV ! Les liens daccès rapidesdevront continuer dêtreutilisés !
  32. 32. Utilisation de <nav> pour indiquer leszones de navigation principalesSupport(Accessibilité HTML 5)Attention !<nav> :<nav><nav> doit être consacré aux élémentsde navigation principaux Les liens de pied de page sestructurent avec <footer> plutôtquavec <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.Lutilisation de ces repères sera rendue obligatoirebanner : zone d’en-têtenavigationzone denavigationMain : la zone de contenu principalContentinfo : zone d’information propre au documentsearch: zone de recherchecomplementaryzone decontenucomplémentaireMapping HTML 5Landmark HTML5Banner HeaderMain mainNavigation NavComplementary AsideContentinfo footerNavigation
  34. 34. ARIAMéthodes de conceptions et dutilisation A consulterUsing WAI-ARIA in HTMLhttp://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 nest pas satisfaisant- Les navigateurs ne supportent pas lélément- Les navigateurs supportent lélément mais les technologiesdassistance nonNe pas changer le rôle natif dun élément via ARIA sauf sicest lunique 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 5Méthodes de conceptions et dutilisation A consulterUsing WAI-ARIA in HTMLhttp://www.w3.org/TR/aria-in-html/Consulter et suivre attentivement les recommandationsdutilisation des rôles ARIA indiqués sur la note ! Restriction dutilisation 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 ARIAExemple simple : slider fork JQuery Exemple dunprocessus devérificationARIA Role, State,Properties. ComportementAPI accessibilitéCompatibilité avecla baselineBase de référence?????1.23.?
  38. 38. Merci de votre attentionQelios – Accessibilité Numérique04 68 85 25 42http://qelios.net

×