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
Recommended
