Cet article est destiné aux personnes voulant créer des applications internet riches avec une fonctionnalité de glisser-déposer et souhaitant la rendre accessible. Aucune connaissance préalable de WAI-ARIA n’est nécessaire, mais il est recommandé de lire mon Introduction à WAI-ARIA avant de commencer cet article. Une connaissance de base du script est nécessaire pour comprendre exactement ce qui se passe dans l’exemple de code, mais cette connaissance n’est pas nécessaire pour comprendre les concepts de base.

Je vous propose d’aller sur la page de test d’un glisser/déposer avec WAI-ARIA.

Vous pouvez déplacer les éléments à la souris, comme vous pouvez le faire sur d’autres applications ; mais vous pouvez aussi utiliser le clavier.

• Cliquer sur le lien de la page de test (clic molette pour ouvrir un nouvel onglet et garder cette même page ouverte)
• Valider 2 x « la touche TAB » (touche au dessus du verrouillage de majuscule ; si au dessus de shift gauche)
• Valider la touche « entrée »
• Valider la touche « flèche bas »
• Valider la touche « entrée »

Magie, le groupe Art Brut est dans les rejected artists. Imaginez-vous un instant la joie d’une personne, à la main tremblante, naviguant au clavier.

Articles similaires :

1. Commencer avec WAI-ARIA
2. Introduction à WAI ARIA chez les intégristes
3. La communauté WAI-ARIA
4. WAI-ARIA sur Google health
5. Safari 4.0 (ne) supporte (pas) les rôles ARIA

Safari supports Accessible Rich Internet Applications (ARIA). The ARIA standard helps web developers make dynamic web content more accessible for people with disabilities. With ARIA, sites taking advantage of advanced technologies like AJAX and JavaScript can now easily interoperate with assistive technologies.

Chez The Paciello Group, on dit qu’en fait ça marche pas du tout ; ou alors leurs tests ne sont pas très performants.

Articles similaires :

1. La communauté WAI-ARIA
2. Introduction à WAI ARIA chez les intégristes
3. WAI ARIA – Applications riches Internet accessibles
4. Commencer avec WAI-ARIA
5. WAI-ARIA sur Google health

En effet, le lecteur d’écran est un assistance audio pour les mal-voyant. Au passage sur une zone de lien, le lecteur renvoie un signal audiophonique correspondant au texte lié à ce lien.

Si le libellé « lien » est associé à un lien, je vais manquer d’informations à propos de la destination vers laquelle je serai redirigé. Si le libellé « inviter » est associé à un bouton, c’est un peu pareil.

Sur la page Augmenting Button Text with ARIA, il est possible de voir plusieurs exemples de d’utilisation d’ARIA pour enrichir les indications textuelles de navigation.

Si vous ne disposez pas d’un lecteur d’écran à porté de main, je vous conseille l’utilisation de WebAnywhere.

Grâce à cette application, vous pouvez naviguer avec un lecteur d’écran directement à partir du web.

Articles similaires :

1. Glisser-déposer accessible avec WAI-ARIA
2. jQuery : plugin ARIA
3. Introduction à WAI ARIA chez les intégristes
4. WAI-ARIA sur Google health
5. Commencer avec WAI-ARIA

Pour définir ces rôles, états et propriétés dans le code HTML d’une page, il est nécessaire de passer par une librairie JavaScript.

jARAI est une extension jQuery permettant la gestion d’ARIA pour des interfaces riches. Une explication de son fonctionnement est disponible sur le site de Chris Hoffman : jARIA jQuery Plugin – Outstanding Elephant.

Articles similaires :

1. Commencer avec WAI-ARIA
2. ColorBox, plugin lightbox pour jquery
3. Plugin jQuery : tablesorter
4. jQuery Accessible RIA : fonctionnalités jQuery accessibles
5. La communauté WAI-ARIA

YAML Debug fait penser non pas à Firebug, mais à certaines fonctions de Web Developer: il modifie l’affichage et les contenus de la page pour mettre en évidence le nom des balises HTML, la structure des div, etc.

Pour résumer, YAML debug est un bookmarklet (pas une extension), un code javascript qui s’exécute sur presque tous les navigateurs. Ses fonctionnalités sont multiples ; afficher :

• Les attribut alt vides
• Les élément dépréciés
• Les éléments vides
• Les styles inline
• La structure sémantique
• La structure de la page
• Les ancres
• Les titres
• Les élément de langue (lang)
• Les rôles et propriétés WAI ARIA
• Les liens de la page

Cet outil permet même d’afficher l’ensemble des fichiers CSS avec leur arborescence et de les désactiver pour avoir une notion de leur impact sur la page testée.

Articles similaires :

1. YAML -Yet Another Multicolumn Layout : un framework CSS pour TYPO3
2. YAML, le FrameWork CSS, sort sa version 3.2
3. Acmeism : YAML, TestML and C’Dent avec Ingy Döt Net
4. CSS Bake, outil de veille graphique
5. Intégration video : tags et sous titres

Cet article est destiné à des personnes ne connaissant pas ARIA. Vous devriez avoir une bonne connaissance du langage HTML et des problèmes que peuvent rencontrer les personnes handicapées sur le web. Connaître quelques application web “riches” (RIA) d’un point de vue utilisateur serait un plus. Après avoir lu cet article, vous comprendrez à quoi sert ARIA, comment l’intégrer à vos sites, et comment l’utiliser dès immédiatement et même sur le plus simple des sites pour le rendre plus accessible.

Voir Introduction à WAI ARIA chez les intégristes.

Articles similaires :

1. WAI ARIA – Applications riches Internet accessibles
2. Glisser-déposer accessible avec WAI-ARIA
3. Safari 4.0 (ne) supporte (pas) les rôles ARIA
4. La communauté WAI-ARIA
5. Commencer avec WAI-ARIA

Cette recommandation W3C améliore l’usabilité des interfaces de Google health pour les lecteurs vocaux. Je vous laisse lire l’article du blog de google à ce propos, ARIA For GWT: My health Is feeling accessible, pour prendre connaissance des améliorations.

WAI-ARIA permet de donner un retour vocal pour la navigation sonore, il donne une information sur l’état des zones de la page. WAI-ARIA donne la possibilité d’intégrer des raccourcis clavier sur les interfaces, par exemple pour Google Health, les raccourcis claviers :

• ESC :: Retour au profil principal
• . :: Affiche les actions disponibles avec une complétion
• ? :: Aide pour clavier vocal
• = :: Agrandi la zone sélectionnée
• - :: Minimise la zone sélectionnée
• GAUCHE :: Catégorie précédente
• DROITE :: Catégorie suivante
• HAUT :: Elément précédent au sein d’une catégorie
• BAS :: Elément suivant au sein d’une catégorie

Ces améliorations correspondent aux recommandations du DHTML Style Guide, un guide pour l’uniformisation de l’utilisation des raccourcis clavier.

Lire Google Health et Microsoft HealthVault : la concurrence de la santé en ligne va être rude.

Articles similaires :

1. La communauté WAI-ARIA
2. Glisser-déposer accessible avec WAI-ARIA
3. WAI ARIA – Applications riches Internet accessibles
4. Safari 4.0 (ne) supporte (pas) les rôles ARIA
5. Introduction à WAI ARIA chez les intégristes

Avec des solutions JavaScript en l’absence de perception visuelle, les informations implicites visibles telles que « le menu est ouvert », ou « la branche de ce sous-menu est déployée », ne sont pas fournies intrinsèquement aux utilisateurs de lecteurs d’écran,…ARIA promet de fournir aux utilisateurs des technologies d’assistance assez d’informations pour qu’ils aient une expérience de navigation similaire à la navigation visuelle.

L’implémentation de WAI-ARIA est désormais effective sur les nouveaux navigateurs, de nombreuses librairies JavaScript l’intègrent (Dojo, JQuery, GWT, YUI…) ; ainsi certains se lancent dans l’écriture de leurs premières pages utilisant cette technologie.

L’université de l’Illinois propose deux ressources intéressantes : composants (widgets) exploitant ARIA et barre d’outils permettant de contrôler l’accessibilité.

David Bolter sur mindforks nous informe de son travail dans WAI-ARIA evangelism, dojo, jQuery, comment il aide la communauté jQuery à ajouter ARIA à jQuery UI.

Articles similaires :

1. jQuery : plugin ARIA
2. La communauté WAI-ARIA
3. Safari 4.0 (ne) supporte (pas) les rôles ARIA
4. Glisser-déposer accessible avec WAI-ARIA
5. WAI ARIA – Applications riches Internet accessibles

Consulter la page des présentations de la conférence Scripting Enabled.

Articles similaires :

1. T3CON08 : la conférence TYPO3 2008
2. Accessibilité, ne pas trop en faire
3. TYPO3 conférence 2009
4. Keynote de la TYPO3 Conference 2008 par Kasper
5. Bernard Stiegler : conférence à Paris du 8 septembre 2009

Cette Free ARIA Community présente ses axes de travail sous Google Groupes :

• JavaScript toolkits
• Testing tools for authors
• Testcases
• Training materials
• Browsers
• Assistive technologies

Articles similaires :

1. Safari 4.0 (ne) supporte (pas) les rôles ARIA
2. Commencer avec WAI-ARIA
3. WAI-ARIA sur Google health
4. WAI ARIA – Applications riches Internet accessibles
5. Introduction à WAI ARIA chez les intégristes