160 likes | 331 Views
ARIA. Accessible Rich Internet Application. Le WEB avant…. Des Contenus Structurés. Des effets dynamiques. Ajax. Application RIA. Images. Menu Déroulant. Formulaires. Nouveaux Composants. Liens. De la neige en hiver. Contrôle de formulaire. Textes. Multimédia. HTML.
E N D
ARIA Accessible Rich Internet Application
Le WEB avant…. Des Contenus Structurés Des effets dynamiques Ajax Application RIA Images Menu Déroulant Formulaires Nouveaux Composants Liens De la neige en hiver Contrôle de formulaire Textes Multimédia HTML Javascript
Le WEB maintenant Des Contenus Structurés Du comportement Ajax Images Formulaires Nouveaux Composants Liens Application RIA Textes Multimédia Javascript HTML
Problèmes…. <span>Volume</span> <div><button></button></div> </span>0%</span> Utiliser Javascript pour définir un composant Le web fonctionne en mode client-serveur HTML ne permet pas de créer des composants 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 Rechargement De page <span>Volume</span> <div><button></button></div> </span>0%</span>
Problèmes pour l’accessibilité… <span>Volume</span> <div><button></button></div> </span>0%</span> C’est quoi ce truc ? <span>Volume</span> <div><button></button></div> </span>0%</span> 0% Volume Heu … <span>Volume</span> <div><button></button></div> </span> 48% </span> 48% Volume 0% 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 <div style="display: block;" class="jcarousel-next ></div> Les éléments de formulaire L’élément object <div style="display: block;" class="jcarousel-prev></div> Je peux Je peux pas
Solution : Aria pour… Informer de l’état et des propriétés d’un composant Définir les composants Slider Navigation Menu Application 48% Volume 1 2 3 4 valuenow:48% « Volume 48%, volume 49%... » Informer des misesa jour dynamique Rendre les composants utilisables au clavier Tabindex Flèche de direction Live region
L’API ARIA Définis des attributs et des valeurs Contenu role Javascript (slider, menu, navigation, application…) Aria Navigateur state, properties API ACC Système cheked, valuenow, expanded, labeledby Information Etends le role de tabindex Tabindex=0 focus valuenow:48%... « Volume 48%, volume 49%... » focus Tabindex=-1
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"> Attributs ARIA <ul role="group"> <li id="oranges" role="treeitem" tabindex="-1">Oranges</li> Role Labelledby Expanded Tabindex <li class="groupHeader" id="apples" role="treeitem" tabindex="-1" aria-expanded="false">
ARIA Exemple : Landmak Fonctionnalité Landmarks Liste des zones Banner Navigation Main Contentinfo
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 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