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

HTML 5 /ARIA
et l'accessibilité du Web
Où en est-on ?
Conférence Romande sur l’Accessibilité du Web – Lausanne – Avril 2013

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

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

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

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

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
Support
 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
Support
 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
?
<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
 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
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
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
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
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
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
<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
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
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

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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

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

Ähnlich wie HTML5, ARIA et accessibilité du Web: où en est-on? (20)

Mehr von Qelios

Mehr von Qelios (11)

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