ARIA

Accessible Rich Internet Application

Le WEB avant….

Images

Liens Formulaires

MultimédiaTextes

ApplicationRIA

Des Contenus Structurés

HTML

Des effets dynamiques

Menu Déroulant

De la neige en hiver

Contrôle de formulaire

Javascript

Le WEB maintenant

Images

Liens Formulaires

MultimédiaTextes

Ajax

NouveauxComposantsApplication

RIA

Des Contenus Structurés

HTML

Du comportement

Javascript

Problèmes….

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

Solution : utiliser javascript pour…

Créer des composantsen ajoutant du comportement

sur des éléments HTMLquelconques

<span>Volume</span><div><button></button></div>

</span>0%</span>

Code Html du slider Rechargement

De page

Ajax

Gérer les requêtes client-serveur

via l’objet javascriptXMLHttpRequest

Problèmes pour l’accessibilité…

C’est quoi ce truc ?

Heu …

Volume 0%

Volume 0%

Volume 48%

Ha bon …

<span>Volume</span><div><button></button></div>

</span>0%</span>

<span>Volume</span><div><button></button></div>

</span>0%</span>

<span>Volume</span><div><button></button></div>

</span> 48% </span>

Problèmes pour l’accessibilité…

Cool…

Afficher les actualités

Ha bon…

Afficher les actualités

AJAX

Vous êtes ici

Vous êtes toujours ici !

Problèmes pour l’accessibilité…

<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 : Aria pour…

Définir les composants

SliderNavigationMenuApplication

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

composant

2

Volume 48%

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

Informer des misesa jour dynamique

3

Live region

Rendre les composantsutilisables au

clavier

4

TabindexFlèche de direction

L’API ARIA

Définis des attributs et des valeursrole

(slider, menu, navigation, application…)

state, propertiescheked, valuenow, expanded, labeledby

Etends le role de tabindex

Tabindex=0

Tabindex=-1

focus

focus

Contenu

Javascript

Navigateur Aria

API ACC Système

Information

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

ARIA Exemple : Tree Wiew

<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">

Attributs ARIA

RoleLabelledbyExpandedTabindex

ARIA Exemple : Landmak

Landmarks FonctionnalitéListe des zones

BannerNavigationMainContentinfo

ARIA « in a couple of Week »

ARIA n’est pas supportée par

WCAG 2

3 techniques seulement :

ARIA 1 : describedby (alternative aux labels)

ARIA 2 : required (contrôle de champ obligatoires)

ARIA 3: valuemin, valuemax (contrôle de valeur dans un champ de formulaire)

ARIA n’est pas supportée par

AccessiWeb ni par RGAA

Les trois techniques ARIA ne sont pas supportée, il n’y a pas de critères.

Tabindex est supporté pour :

-L’ordre de tabulation-L’accès au clavier

(mais peut nécessiter une alternative)

ARIA

Deux documents

La spécification

description des role, state et properties

Best practices

Document le plus important !

Peut-on utiliser ARIA ?

Oui

TabindexLandmark

MaisPour tout le reste il reste nécessaire de fournir des

alternatives !

ARIA après…

Changement des méthodes de conceptionConcepts hérités de l’IHM et du développement Logiciel

Fin des alternatives à javascript

Navigation clavier enrichie mais problématiques complexes

Méthodes d’évaluation plus évoluéesNécessité de tests utilisateurs

Nécessité de méthodes d’application spécifiques