41
ARIA au pays du Web Jean-Pierre Villain - Qelios W3Café Accessibilité - Paris – Avril 201 Les images utilisées dans cette présentation sont extraites des films « alice au pays des merveilles » de Tim Burton et « 2001 l ’odysée de l’espace » de Stanley Kubric

Aria au pays du Web

Embed Size (px)

DESCRIPTION

 

Citation preview

Page 1: Aria au pays du Web

ARIA au pays du Web

Jean-Pierre Villain - Qelios

W3Café Accessibilité - Paris – Avril 2011Les images utilisées dans cette présentation sont extraites des films « alice au pays des merveilles » de Tim Burton et « 2001 l ’odysée de

l’espace » de Stanley Kubric

Page 2: Aria au pays du Web

ARIA au pays du Web

Html Javascript

Une (très) brèveHistoire du

Web Dynamique

Page 3: Aria au pays du Web

ARIA au pays du Web

Images

Liens Formulaires

MultimédiaTextes

Des Contenus Structurés Des effets dynamiques

Menu Déroulant

De la neige en hiver

Contrôle de formulaire

199919951992

HTML 1.0 Javascript HTML 4.01

HTML Javascript

2000

XHTML

Page 4: Aria au pays du Web

ARIA au pays du Web

XMLHttpRequest2002

Page 5: Aria au pays du Web

ARIA au pays du Web

Images

Liens Formulaires

MultimédiaTextes

Des Contenus Structurés

1998

MSXML

HTML Javascript

Ajax

NouveauxComposantsApplication

RIA

Du comportement

2002

XmlHttpRequest

2005

Ajax

2006

ARIA

2014

HTML5

Page 6: Aria au pays du Web

ARIA au pays du Web

HTML ne permet pas de créer des composants

Le web fonctionne en mode client-serveur

Limités à

Le lien

Les éléments deformulaire

Une action

Un rechargementde page

Les limites du développement Web classique

Page 7: Aria au pays du Web

ARIA au pays du Web

Créer des composantsen ajoutant du comportement

sur des éléments HTMLquelconques

Code Html du slider Rechargement

De page

Ajax

Gérer les requêtes client-serveur

via l’objet JavascriptXMLHttpRequest

La solution : utiliser Javascript pour :

<div><span>0%</span><div><a></a></div></div>

Page 8: Aria au pays du Web

ARIA au pays du Web

Le Web Dynamiqueet l’utilisateur

Page 9: Aria au pays du Web

ARIA au pays du Web

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

Page 10: Aria au pays du Web

ARIA au pays du WebPour 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 :

Page 11: Aria au pays du Web

ARIA au pays du Web

Avec JavascriptLes problématiques

utilisateurs

Page 12: Aria au pays du Web

ARIA au pays du WebProblè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

Page 13: Aria au pays du Web

ARIA au pays du WebProblème pour l’utilisateur

Cool…

Afficher les actualités

Vous êtes ici

Afficher les actualités

Ha! bon…

AJAXVous êtes toujours ici !

Page 14: Aria au pays du Web

ARIA au pays du WebProblème pour l’utilisateur

<div style="display: block;" class="jcarousel-next ></div>

Navigation Clavier HTML

Limitée à

Le lien

Les éléments deformulaire

L’élémentobject

<div style="display: block;" class="jcarousel-prev></div>

Navigation Clavier Javascript

Je peux Je peux pas

Page 15: Aria au pays du Web

ARIA au pays du WebSolution : ARIA

Définir les composantsDéfinir la structure

SliderNavigationMenuApplicationBanner

1 Informer de l’état et des propriétés d’un

composant

2

Volume 48%

valuenow:48%« 48%, 49%... »

Informer des misesà jour dynamiques

3

Live region

Rendre les composantsutilisables au

clavier

4

TabindexFlèche de direction

Page 16: Aria au pays du Web

ARIA au pays du Web

Définit des attributs et des valeursrôle

(slider, menu, navigation, application…)

state, propertiescheked, valuenow, expanded, labeledby

Etend le rôle de tabindex

Tabindex=0

Tabindex=-1

focus

focus

Contenu

Javascript

Navigateur Aria

API ACC Système

Information

« 48%, 49%... »

Page 17: Aria au pays du Web

ARIA au pays du Web

<h2 id="label_1">Foods</h2>

<ul id="tree1" class="tree" role="tree" aria-labelledby="label_1">

<li class="groupHeader" id="fruits" role="treeitem" tabindex="0" aria-expanded="true">

<ul role="group"> <li id="oranges" role="treeitem" tabindex="-1">Oranges</li>

<li class="groupHeader" id="apples" role="treeitem" tabindex="-1" aria-expanded="false">

Exemplesd’attributs ARIA

RôleLabelledbyExpandedTabindex

L’implémentation utilise de simples attributs HTML

Les valeurs dynamiques sont gérées depuis la couche Javascript

Les comportements (l’affichage d’un sous-niveau de liste, par exemple ) sont également gérésdepuis la couche Javascript

Page 18: Aria au pays du Web

ARIA au pays du Web

ARIA par l’exemple

Page 19: Aria au pays du Web

ARIA au pays du Web

1. Guider l’utilisateurLes landmarks

Page 20: Aria au pays du Web

ARIA au pays du WebLes landmarks, role= banner, main, search…

Objectif : créer des points de repère et de navigation dans la structure de la page

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

form

zone de formulaire

applicationzone qui

contient une « application »

Le rôle application indique aux technologies d’assistance de modifier la gestion des évènements claviers, la navigation notamment, pour utiliser la configuration habituelle dans une application logicielle

!!

Page 21: Aria au pays du Web

ARIA au pays du Web

banner

main

contentinfo

search

complementary

Exemple : Implémentation des landmarks chez Alsacréationsnavigation

Page 22: Aria au pays du Web

ARIA au pays du Web

2. Les boites de dialogue

Page 23: Aria au pays du Web

ARIA au pays du WebLes boites de dialogue : role = alertdialog

InconvénientPas stylableN’accepte que du texte

AvantageC’est une vraie fenêtre modaleNe nécessite aucun traitement

Alerte Javascript

InconvénientCe n’est pas une vraie fenêtre modale

AvantagePersonnalisable à 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 !

Page 24: Aria au pays du Web

ARIA au pays du Web

3. Des composantscomplexes

User Friendly

Page 25: Aria au pays du Web

ARIA au pays du Web

Le Slider clandestin

<div...><img …/></div>

Page 26: Aria au pays du Web

ARIA au pays du Web

Le Slider qui parle

<div><span>0$</span><a href=‘#’ aria-valuenow="0" aria-valuetext="0 $" role="slider" aria-valuemin="0" aria-valuemax="100" title="price" style="left: 0%;"></a></div>

price Potentiomètre 0 $1 $2 $3 $4 $5 $6 $

Page 27: Aria au pays du Web

ARIA au pays du WebExemple : une barre de progression, role=progressbar

<div role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" aria-labelledby="progressMsg" aria-valuetext=‘’0 %"></div>

Le principe est identique à celui d’un slider et utilise les mêmes attributs et le même fonctionnement enchainé. Implicitement, le composant est déclaré en « readonly » de telle sorte que l’utilisateur ne puisse pas interagir avec lui.

NVDA propose deux restitutions :Vocale (annonce des valeurs)Par bip sonore

Par défaut, Jaws annonce la valeur atteinteà intervalles réguliers

Page 28: Aria au pays du Web

ARIA au pays du WebExemple : messages avec labelledby et describedbylabelledby 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.

Commande de fruits groupage

Quantité 10 kilos

édition avec autocomplétion

Attention au délai :Plus de 30 kg : prévoir 10 jours….sélectionné 10

Id : unite

<input id="commande" value="10" aria-labelledby="label commande unite" aria-describedby="disponible" type="text">

Id : commande

Id : disponibleId : label

Page 29: Aria au pays du Web

ARIA au pays du Web

4. Les Live Régions

Page 30: Aria au pays du Web

ARIA au pays du WebLes 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

Propriétés aria-live

aria-live=off Valeur par défaut, la zone n’est pas lue du tout.

aria-live=polite La zone est lue quand l’utilisateur a terminé son action.

aria-live=assertive La zone est lue en interrompant l’utilisateur dés que c’est possible.

aria-live=rude La zone est lue en interrompant l’utilisateur immédiatement.

Page 31: Aria au pays du Web

ARIA au pays du WebLes live region, les propriétés complémentairesObjectif : informer de l’état de la zone mise à jour, gérer le contenu de la zone mise à jour

Propriétés

atomic = true/false Toute la zone ou seulement la partie mise à jour est lue

relevant = additions /removalLes 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

Page 32: Aria au pays du Web

ARIA au pays du WebUne live region avec aria-live polite

La zone mise à jour est lue

aria-live=‘’polite’’

L’utilisateur est occupé; la zone n’est plus lue

focus()

Page 33: Aria au pays du Web

ARIA au pays du WebLive regions : un chat avec ajax et aria-live

<ul aria-atomic="false" aria-live="polite" id="chat-area"><li class="welcome"> Bienvenue</li><li><span>Invité </span>Bonjour tout le monde</li> </ul>

Lire uniquement le contenu mis à jour, c’est-à-dire le dernier texte inséré.

Lire la zone mise à jour quand l’utilisateur est disponible.Donc, quand il a terminé, son message notamment.

http://ideance.net/publications/live-regions/index.html

Page 34: Aria au pays du Web

ARIA au pays du Web

Contrôle au clavier

Page 35: Aria au pays du Web

ARIA au pays du WebContrôles au clavier, la problématique

Paradigme

Tout est utilisable avec la touche de tabulation

Pour certains éléments comme les listes de formulaires les flèches de direction servent à naviguer dans les éléments (item de liste)

HTML

Principes

La touche tabulation navigue d’un composant à l’autre

Des touches dédiées comme les flèches de direction, la touche escape, la barre d’espace apportent des fonctionnalités de contrôle

ARIA

C’est une problématique très difficile.

Il faut s’inspirer du fonctionnement de

applications!!

Page 36: Aria au pays du Web

ARIA au pays du WebContrôles au clavier, la navigation

tabindex=0

tabindex=-1

flêches de direction

barre d’espace

touche escape

Permet à un élément quelconque de recevoir le focus de tabulation

Retire un élément du plan de tabulation

Naviguer dans les éléments d’un composant

Activer / désactiver

Désactiver /annuler une action

Touches dédiées

Page 37: Aria au pays du Web

ARIA au pays du WebContrôles au clavier, exemples

Naviguer dans une fausse fenêtre modale

Gérer la navigation dans le système d’actualité de Yahoo

Naviguer dans un système d’onglets

Page 38: Aria au pays du Web

ARIA au pays du WebProblématiques utilisateurs

Les technologies d’assistance annoncent, pour certains rôle le type de navigation attendue.

Exemple avec slider et jaws : « utiliser les touches flèchés… ».

Comment être sur que c’est réellement le cas ?

Les utilisateurs qui ne peuvent pas utiliser de souris ne recoivent pas d’informations sur la navigation

Comment les informer ?

Conserver le paradigme de tabulation et ajouter des

navigations auxiliaires

Respecter impérativement les

Design Pattern préconisés par

ARIA!!

Page 39: Aria au pays du Web

ARIA au pays du Web

Tester ARIA

Page 40: Aria au pays du Web

02ARIA au pays du WebProblématiques utilisateurs

Outils d’inspection d’évènement, attributs et

propriétés

Les technologies d’assistance

JAWS / NVDA

Visioneuse de parole

Inspect 32 ICITA Toolbar

Juicy Toolbar

Sur des applications RIA complexes.

Tests Utilisateurs!!

Page 41: Aria au pays du Web

ARIA au pays du Web

Merci de votre attention

Les démos de l’atelier sont disponibles sur www.qelios.net/demo_aria