SlideShare une entreprise Scribd logo
HTML 5 /ARIA
et l'accessibilité du Web
Où en est-on ?
Conférence Romande sur l’Accessibilité du Web – Lausanne – Avril 2013
HTML 4
Le Web de grand-papa
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
HTML 5
Le Web mutant
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
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
ARIA
Le Web accessible
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
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 :
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
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
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
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
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
WCAG
Vs
HTML 5 / ARIA
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
WCAG Vs HTML5 / ARIA
Principales évolutions
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)
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.
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é
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
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>
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
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 ?)
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
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
<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.
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) !
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
Support
(Accessibilité HTML 5)c
?
Support partiel des nouveaux éléments de
formulaire
<datalist>
<progress>
<range>
<progress>
<datalist>
<range>
Formulaire et éléments interactifs
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 !
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
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
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
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
Tester et valider un widget ARIA
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.
?
Merci de votre attention
Qelios – Accessibilité Numérique
04 68 85 25 42
http://qelios.net

Contenu connexe

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

20081113 - Nantes Jug - Apache Maven
20081113 - Nantes Jug - Apache Maven20081113 - Nantes Jug - Apache Maven
20081113 - Nantes Jug - Apache Maven
Arnaud Héritier
 
Silverlight 4
Silverlight 4Silverlight 4
Silverlight 4
Frédéric Queudret
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
CARA_Lyon
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
CARA_Lyon
 
Aria au pays du Web
Aria au pays du WebAria au pays du Web
Aria au pays du WebJPVillain
 
WebSphere Portal & Rich Internet Applications
WebSphere Portal & Rich Internet ApplicationsWebSphere Portal & Rich Internet Applications
WebSphere Portal & Rich Internet ApplicationsVincent Perrin
 
Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016
Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016
Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016
Tarik Zakaria Benmerar
 
react-fr.pdf
react-fr.pdfreact-fr.pdf
react-fr.pdf
ssuser65180a
 
HTML5 & SilverLight 5
HTML5 & SilverLight 5HTML5 & SilverLight 5
HTML5 & SilverLight 5
Frédéric Harper
 
Asp Au Service Des Mv Ps
Asp Au Service Des Mv PsAsp Au Service Des Mv Ps
Asp Au Service Des Mv PsGregory Renard
 
Html5 & ie
Html5 & ieHtml5 & ie
Html5 & ie
Hafid Denguir
 
Presentation Spring, Spring MVC
Presentation Spring, Spring MVCPresentation Spring, Spring MVC
Presentation Spring, Spring MVCNathaniel Richand
 
Architecture, bonnes pratiques et recettes pour la réussite de vos projets av...
Architecture, bonnes pratiques et recettes pour la réussite de vos projets av...Architecture, bonnes pratiques et recettes pour la réussite de vos projets av...
Architecture, bonnes pratiques et recettes pour la réussite de vos projets av...
Microsoft Technet France
 
Fondamentaux d'architecture d'une application Flex
Fondamentaux d'architecture d'une application FlexFondamentaux d'architecture d'une application Flex
Fondamentaux d'architecture d'une application Flex
david deraedt
 
Fondamentaux d'architecture d'une application Flex
Fondamentaux d'architecture d'une application FlexFondamentaux d'architecture d'une application Flex
Fondamentaux d'architecture d'une application Flex
david deraedt
 
La mobilité dans Drupal
La mobilité dans DrupalLa mobilité dans Drupal
La mobilité dans Drupal
Adyax
 
Ajax et Accessibilite
Ajax et AccessibiliteAjax et Accessibilite
Ajax et Accessibilitemikeh
 
Mappingobjetrelationnel[1]
Mappingobjetrelationnel[1]Mappingobjetrelationnel[1]
Mappingobjetrelationnel[1]linasafaa
 
Symfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 PerformantSymfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 Performant
Hugo Hamon
 
Nouveautés html5 et css3 dans internet explorer 10
Nouveautés html5 et css3 dans internet explorer 10Nouveautés html5 et css3 dans internet explorer 10
Nouveautés html5 et css3 dans internet explorer 10
davrous
 

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

20081113 - Nantes Jug - Apache Maven
20081113 - Nantes Jug - Apache Maven20081113 - Nantes Jug - Apache Maven
20081113 - Nantes Jug - Apache Maven
 
Silverlight 4
Silverlight 4Silverlight 4
Silverlight 4
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
 
Aria au pays du Web
Aria au pays du WebAria au pays du Web
Aria au pays du Web
 
WebSphere Portal & Rich Internet Applications
WebSphere Portal & Rich Internet ApplicationsWebSphere Portal & Rich Internet Applications
WebSphere Portal & Rich Internet Applications
 
Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016
Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016
Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016
 
react-fr.pdf
react-fr.pdfreact-fr.pdf
react-fr.pdf
 
HTML5 & SilverLight 5
HTML5 & SilverLight 5HTML5 & SilverLight 5
HTML5 & SilverLight 5
 
Asp Au Service Des Mv Ps
Asp Au Service Des Mv PsAsp Au Service Des Mv Ps
Asp Au Service Des Mv Ps
 
Html5 & ie
Html5 & ieHtml5 & ie
Html5 & ie
 
Presentation Spring, Spring MVC
Presentation Spring, Spring MVCPresentation Spring, Spring MVC
Presentation Spring, Spring MVC
 
Architecture, bonnes pratiques et recettes pour la réussite de vos projets av...
Architecture, bonnes pratiques et recettes pour la réussite de vos projets av...Architecture, bonnes pratiques et recettes pour la réussite de vos projets av...
Architecture, bonnes pratiques et recettes pour la réussite de vos projets av...
 
Fondamentaux d'architecture d'une application Flex
Fondamentaux d'architecture d'une application FlexFondamentaux d'architecture d'une application Flex
Fondamentaux d'architecture d'une application Flex
 
Fondamentaux d'architecture d'une application Flex
Fondamentaux d'architecture d'une application FlexFondamentaux d'architecture d'une application Flex
Fondamentaux d'architecture d'une application Flex
 
La mobilité dans Drupal
La mobilité dans DrupalLa mobilité dans Drupal
La mobilité dans Drupal
 
Ajax et Accessibilite
Ajax et AccessibiliteAjax et Accessibilite
Ajax et Accessibilite
 
Mappingobjetrelationnel[1]
Mappingobjetrelationnel[1]Mappingobjetrelationnel[1]
Mappingobjetrelationnel[1]
 
Symfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 PerformantSymfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 Performant
 
Nouveautés html5 et css3 dans internet explorer 10
Nouveautés html5 et css3 dans internet explorer 10Nouveautés html5 et css3 dans internet explorer 10
Nouveautés html5 et css3 dans internet explorer 10
 

Plus de Qelios

Paris Web 2013 - Atelier, rendre une application accessible en quatre étapes
Paris Web 2013 - Atelier, rendre une application accessible en quatre étapesParis Web 2013 - Atelier, rendre une application accessible en quatre étapes
Paris Web 2013 - Atelier, rendre une application accessible en quatre étapes
Qelios
 
Accessibilité du Web: méthodes d'évaluation rapide
Accessibilité du Web: méthodes d'évaluation rapideAccessibilité du Web: méthodes d'évaluation rapide
Accessibilité du Web: méthodes d'évaluation rapide
Qelios
 
Rendre un portail accessible - journée Accessibilité de l&rsquo;ADULOA
Rendre un portail accessible - journée Accessibilité de l&rsquo;ADULOARendre un portail accessible - journée Accessibilité de l&rsquo;ADULOA
Rendre un portail accessible - journée Accessibilité de l&rsquo;ADULOA
Qelios
 
Prioriser les chantiers d'accessibilité numérique quand tout est à faire
Prioriser les chantiers d'accessibilité numérique quand tout est à fairePrioriser les chantiers d'accessibilité numérique quand tout est à faire
Prioriser les chantiers d'accessibilité numérique quand tout est à faire
Qelios
 
Accessibilité des CMS: présentation Qelios au CMSDay 2012
Accessibilité des CMS: présentation Qelios au CMSDay 2012Accessibilité des CMS: présentation Qelios au CMSDay 2012
Accessibilité des CMS: présentation Qelios au CMSDay 2012
Qelios
 
Aria au pays du web
Aria au pays du webAria au pays du web
Aria au pays du web
Qelios
 
Get the most out of your accessibility expert
Get the most out of your accessibility expertGet the most out of your accessibility expert
Get the most out of your accessibility expert
Qelios
 
WCAG et l&rsquo;accessibilité du Web
WCAG et l&rsquo;accessibilité du WebWCAG et l&rsquo;accessibilité du Web
WCAG et l&rsquo;accessibilité du Web
Qelios
 
Mipaw: Model for a Progressive Implementation of Web Accessibility - Web4All
Mipaw: Model for a Progressive Implementation of Web Accessibility - Web4AllMipaw: Model for a Progressive Implementation of Web Accessibility - Web4All
Mipaw: Model for a Progressive Implementation of Web Accessibility - Web4All
Qelios
 
MIPAW: Modèle d’Implémentation Progressive de l’Accessibilité du Web (FEAN 2012)
MIPAW: Modèle d’Implémentation Progressive de l’Accessibilité du Web (FEAN 2012)MIPAW: Modèle d’Implémentation Progressive de l’Accessibilité du Web (FEAN 2012)
MIPAW: Modèle d’Implémentation Progressive de l’Accessibilité du Web (FEAN 2012)
Qelios
 
MIPAW: Modèle d’Implémentation Progressive de l’Accessibilité du Web
MIPAW: Modèle d’Implémentation Progressive de l’Accessibilité du WebMIPAW: Modèle d’Implémentation Progressive de l’Accessibilité du Web
MIPAW: Modèle d’Implémentation Progressive de l’Accessibilité du Web
Qelios
 

Plus de Qelios (11)

Paris Web 2013 - Atelier, rendre une application accessible en quatre étapes
Paris Web 2013 - Atelier, rendre une application accessible en quatre étapesParis Web 2013 - Atelier, rendre une application accessible en quatre étapes
Paris Web 2013 - Atelier, rendre une application accessible en quatre étapes
 
Accessibilité du Web: méthodes d'évaluation rapide
Accessibilité du Web: méthodes d'évaluation rapideAccessibilité du Web: méthodes d'évaluation rapide
Accessibilité du Web: méthodes d'évaluation rapide
 
Rendre un portail accessible - journée Accessibilité de l&rsquo;ADULOA
Rendre un portail accessible - journée Accessibilité de l&rsquo;ADULOARendre un portail accessible - journée Accessibilité de l&rsquo;ADULOA
Rendre un portail accessible - journée Accessibilité de l&rsquo;ADULOA
 
Prioriser les chantiers d'accessibilité numérique quand tout est à faire
Prioriser les chantiers d'accessibilité numérique quand tout est à fairePrioriser les chantiers d'accessibilité numérique quand tout est à faire
Prioriser les chantiers d'accessibilité numérique quand tout est à faire
 
Accessibilité des CMS: présentation Qelios au CMSDay 2012
Accessibilité des CMS: présentation Qelios au CMSDay 2012Accessibilité des CMS: présentation Qelios au CMSDay 2012
Accessibilité des CMS: présentation Qelios au CMSDay 2012
 
Aria au pays du web
Aria au pays du webAria au pays du web
Aria au pays du web
 
Get the most out of your accessibility expert
Get the most out of your accessibility expertGet the most out of your accessibility expert
Get the most out of your accessibility expert
 
WCAG et l&rsquo;accessibilité du Web
WCAG et l&rsquo;accessibilité du WebWCAG et l&rsquo;accessibilité du Web
WCAG et l&rsquo;accessibilité du Web
 
Mipaw: Model for a Progressive Implementation of Web Accessibility - Web4All
Mipaw: Model for a Progressive Implementation of Web Accessibility - Web4AllMipaw: Model for a Progressive Implementation of Web Accessibility - Web4All
Mipaw: Model for a Progressive Implementation of Web Accessibility - Web4All
 
MIPAW: Modèle d’Implémentation Progressive de l’Accessibilité du Web (FEAN 2012)
MIPAW: Modèle d’Implémentation Progressive de l’Accessibilité du Web (FEAN 2012)MIPAW: Modèle d’Implémentation Progressive de l’Accessibilité du Web (FEAN 2012)
MIPAW: Modèle d’Implémentation Progressive de l’Accessibilité du Web (FEAN 2012)
 
MIPAW: Modèle d’Implémentation Progressive de l’Accessibilité du Web
MIPAW: Modèle d’Implémentation Progressive de l’Accessibilité du WebMIPAW: Modèle d’Implémentation Progressive de l’Accessibilité du Web
MIPAW: Modèle d’Implémentation Progressive de l’Accessibilité du Web
 

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

  • 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. HTML 4 Le Web de grand-papa
  • 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. HTML 5 Le Web mutant
  • 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. 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
  • 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. 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. 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. 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. 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. 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. 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
  • 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. WCAG Vs HTML5 / ARIA Principales évolutions
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. <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. 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. 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. 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. 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. 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. 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. 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. 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. Tester et valider un widget ARIA
  • 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. Merci de votre attention Qelios – Accessibilité Numérique 04 68 85 25 42 http://qelios.net