1 / 15

ARIA

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.

selene
Download Presentation

ARIA

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. ARIA Accessible Rich Internet Application

  2. 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

  3. Le WEB maintenant Des Contenus Structurés Du comportement Ajax Images Formulaires Nouveaux Composants Liens Application RIA Textes Multimédia Javascript HTML

  4. 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

  5. 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>

  6. 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 …

  7. Problèmes pour l’accessibilité… Vous êtes ici Afficher les actualités Cool… AJAX Vous êtes toujours ici ! Afficher les actualités Ha bon…

  8. 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

  9. 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

  10. 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

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

  12. ARIA Exemple : Landmak Fonctionnalité Landmarks Liste des zones Banner Navigation Main Contentinfo

  13. 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)

  14. 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 !

  15. 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

More Related