Transcript Accessible Rich Internet Application (ARIA)

ARIA
Accessible Rich
Internet Application
Le WEB avant….
Des Contenus Structurés
Des effets dynamiques
Menu Déroulant
Formulaires
Liens
Images
Textes
Multimédia
HTML
De la neige
en hiver
Contrôle de
formulaire
Javascript
Le WEB maintenant
Des Contenus Structurés
Du comportement
Ajax
Formulaires
Liens
Images
Textes
Multimédia
HTML
Application
RIA
Nouveaux
Composants
Javascript
Problèmes….
HTML ne permet pas
de créer des composants
Le web fonctionne en
mode client-serveur
Limités à
Une action
Le lien
Les éléments de
formulaire
Un rechargement
De page
Solution : utiliser javascript pour…
Ajax
Créer des composants
en ajoutant du comportement
sur des éléments HTML
quelconques
Gérer les requêtes
client-serveur
via l’objet javascript
XMLHttpRequest
Code Html du slider
<span>Volume</span>
<div><button></button></div>
</span>0%</span>
Rechargement
De page
Problèmes pour l’accessibilité…
0%
Volume
<span>Volume</span>
<div><button></button></div>
</span>0%</span>
C’est quoi ce truc ?
Volume
0%
<span>Volume</span>
<div><button></button></div>
</span>0%</span>
48%
<span>Volume</span>
<div><button></button></div>
</span> 48% </span>
Heu …
Volume
Ha bon …
Problèmes pour l’accessibilité…
Vous êtes ici
Afficher les actualités
Cool…
AJAX
Vous êtes toujours ici !
Afficher les actualités
Ha bon…
Problèmes pour l’accessibilité…
Navigation Clavier HTML
Navigation Clavier Javascript
Limitée à
Le lien
Les éléments de
formulaire
L’élément
object
Je peux
<div style="display: block;"
class="jcarousel-next ></div>
<div style="display: block;"
class="jcarousel-prev></div>
Je peux pas
Solution : Aria pour…
1
Définir les composants
Slider
Navigation
Menu
Application
3
Informer des mises
a jour dynamique
Live region
Informer de l’état et
des propriétés d’un
composant
2
Volume
48%
valuenow:48%
« Volume 48%, volume 49%... »
4
Rendre les composants
utilisables au
clavier
Tabindex
Flèche de direction
L’API ARIA
Définis des attributs et des valeurs
role
Contenu
Javascript
(slider, menu, navigation, application…)
Navigateur
Aria
state, properties
API ACC Système
cheked, valuenow, expanded, labeledby
Information
Etends le role de tabindex
Tabindex=0
Tabindex=-1
focus
focus
valuenow:48%...
« Volume 48%, volume 49%... »
ARIA Exemple : Tree Wiew
<h2 id="label_1">Foods</h2>
<ul id="tree1" class="tree" role="tree" arialabelledby="label_1">
<li class="groupHeader" id="fruits" role="treeitem" tabindex="0"
aria-expanded="true">
Attributs ARIA
Role
Labelledby
Expanded
Tabindex
<ul role="group">
<li id="oranges" role="treeitem" tabindex="-1">Oranges</li>
<li class="groupHeader" id="apples" role="treeitem"
tabindex="-1" aria-expanded="false">
ARIA Exemple : Landmak
Landmarks
Fonctionnalité
Liste des zones
Banner
Navigation
Main
Contentinfo
ARIA « in a couple of Week »
ARIA n’est pas supportée par
WCAG 2
ARIA n’est pas supportée par
AccessiWeb ni par RGAA
3 techniques seulement :
Les trois techniques ARIA ne sont
pas supportée, il n’y a pas de
critères.
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)
Tabindex est supporté pour :
- L’ordre de tabulation
- L’accès au clavier
(mais peut nécessiter une
alternative)
ARIA
Deux documents
Peut-on utiliser ARIA ?
La spécification
Oui
description des role, state et
properties
Best practices
Document le plus important !
Tabindex
Landmark
Mais
Pour tout le reste il reste
nécessaire de fournir des
alternatives !
ARIA après…
Changement des méthodes de conception
Concepts 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ées
Nécessité de tests utilisateurs
Nécessité de méthodes d’application spécifiques