les images utilisées dans cette présentation sont extraites des films « alice au pays des...

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

Une (très) brèveHistoire du

Web Dynamique

Images

Liens Formulaires

MultimédiaTextes

Des Contenus Structurés Des effets dynamiques

Menu Déroulant

De la neige en hiver

Contrôle de formulaire

199919991995199519921992

HTML 1.0 Javascript HTML 4.01

HTML Javascript

20002000

XHTML

XMLHttpRequest2002

Images

Liens Formulaires

MultimédiaTextes

Des Contenus Structurés

19981998

MSXML

HTML Javascript

Ajax

NouveauxComposantsApplication

RIA

Du comportement

20022002

XmlHttpRequest

20052005

Ajax

20062006

ARIA

20142014

HTML5

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

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>

Le Web Dynamiqueet l’utilisateur

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

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 :

Avec JavascriptLes problématiques

utilisateurs

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

Problème pour l’utilisateur

Cool…

Afficher les actualités

Vous êtes ici

Afficher les actualités

Ha! bon…

AJAXVous êtes toujours ici !

Problè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

Solution : ARIADé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

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%... »

<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

ARIA par l’exemple

1. Guider l’utilisateurLes landmarks

Les 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

!!

banner

main

contentinfo

search

complementary

Exemple : Implémentation des landmarks chez Alsacréationsnavigation

2. Les boites de dialogue

Les 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 !

3. Des composantscomplexes

User Friendly

Le Slider clandestin

……

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

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 $

Exemple : 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

Exemple : 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 : uniteId : unite

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

Id : commandeId : commande

Id : disponibleId : disponibleId : labelId : label

4. Les Live Régions

Les live region, la propriété aria-liveObjectif : 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.

Les 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

Une live region avec aria-live polite

La zone mise à jour est lue

aria-live=‘’polite’’aria-live=‘’polite’’

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

focus()focus()

Live 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

Contrôle au clavier

Contrô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!!

Contrô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

Contrô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

Problé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!!

Tester ARIA

Problématiques utilisateursOutils 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!!

Merci de votre attention

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