ARIA, toute une symphonie

Un exposé des avantages d'ARIA — Accessible Rich Internet Applications (même s'il ne faut pas abuser des bonnes choses).

Transcript

1. ARIA, toute une symphonie Stéphane Deschamps Kiwi Party, 13 juin 2014 cc-­‐by  
2. Stéphane Orange : expert accessibilité depuis 2004 Clever Age : responsable Clever Garden @notabene #KiwiParty
3. ARIA « Ach, ja ! » (Philippe Vayssière)
4. Selon Wikipedia §  Aria, terme de musique classique ; §  Aria, commune de la province de Navarre en Espagne ; §  Aria, genre de Rosaceae §  Aria, série de bande dessinée de Michel Weyland ; §  Aria, groupe de heavy metal russe ; §  Aria, manga de Kozue Amano ; §  Aria, comics édité par Image Comics ; §  Aria, magazine de publication de manga shōjo ; §  Aria, film réalisé par Robert Altman en 1987 ; §  Aria, gestionnaire libre de téléchargement pour Unix ; §  Aria, fabricant japonais de guitares, en particulier de basses électriques ; §  Aria, bureau d'étude d'ingénierie ; §  Aria, compagnie aérienne ; §  Aria, fabricant d'instruments de musique ; §  ARIA Charts, principaux charts australiens ; §  Aria Resort & Casino, hôtel-casino de Las Vegas §  Accessible Rich Internet Applications, spécification technique du W3C. §  Analyse, Recherche et Information sur les Accidents est une base de données tenue à jour par les équipes du BARPI, au sein de la Direction Générale de la Prévention des Risques du Ministère du développement durable. Elle permet l'enregistrement des informations et du retour d'expérience en matière d'accidents technologiques. §  Australian Recording Industry Association, association qui défend les intérêts de l'industrie du disque en Australie. §  Association Francophone de Recherche d'Information et Applications (ARIA), association française loi 1901 et société savante qui a pour but de promouvoir le savoir et les connaissances du domaine de la Recherche d'Information. Elle réunit équipes et chercheurs menant des travaux scientifiques dans les domaines qui lui sont liés : recherche d'information et web, extraction d'information et gestion de connaissances, fouille de documents multimédia, traitement automatique des langues, reconnaissance de formes, reconnaissance de la parole, recherche d'image et de vidéo, apprentissage automatique, fouille de données, interfaces homme-machine pour l'accès à l'information etc.
5. § 
6. 1999 W3C ➞ WAI ➞ WCAG 1
7. 2004 – 2005 WCAG 1 presque maîtrisées et paf : AJAX ! (18 février 2005 Jesse James Garrett)
8. Le problème d’AJAX Refresh de morceaux de pages + Buffers de lecteurs d’écran = Pas d’informations mises à jour
9. 2008 WCAG 2 “accessibility compliant” PDF, Flash, Silverlight JavaScript
10. documents ➞ applicatif Rendre accessibles §  tous les contenus qui bougent §  éléments qui n’existent pas en HTML
11. RIA ➞ ARIA à la rescousse §  Accessible Rich Internet Applications §  Description des rôles et des états 1.  éléments qui n’existent pas en HTML 2.  maintenant : tout !
12. (with  respect  to  Jack  Kirby  and  Stan  Lee)  
13. Le mot de l’expert
14. Les landmarks Landmarks = « points d’intérêt » JAWS : §  Prochain landmark « ; » §  Précédent landmark « maj + ; » §  Lister landmarks « ctrl + ins + ; » Voir http://blog.paciellogroup.com/2011/07/html5-accessibility- chops-aria-landmark-support/
15. Landmarks et HTML5 Structurel HTML5 banner header complementary aside contentinfo ? form form main article navigation nav search ? Particulier application ?
16. Une démo avec Jaws §  http://www.html5accessibility.com/tests/landmarks.html §  http://www.html5accessibility.com/tests/roles-land.html
17. De l’interactivité : attribut aria-live Pour les trucs qui bougent ! Valeurs : §  aria-live="off" (par défaut) §  aria-live="polite" §  aria-live="assertive" Voir aussi : aria-relevant, aria-atomic
18. Juicy Studio Accessibility Toolbar
19. Des redéfinitions §  role="image" et hop : SVG ! https://www.sitepoint.com/tips-accessible-svg/ §  role="button" – role="checkbox" Attention les yeux : tabindex="0" §  … et même un select si on veut ! https://developer.mozilla.org/en-US/docs/Web/Guide/ HTML/Forms/How_to_build_custom_form_widgets
20. Des ajouts bienvenus §  aria-labelledby §  aria-describedby <p> <label for="t2" id="l1">Votre âge</label> <input type="text" id="t2" value="18” aria-labelledby="l1 t2 a3" aria-describedby="p4"> <span id="a3">ans</span> </p> <p id="p4">Votre âge, en années, pas en semaines</p> §  Un mot sur la polémique du longdesc
21. Des trucs pas HTML §  Ouvert / fermé : aria-expanded §  Alerte, popins : role="dialog", role="alertdialog" §  Alerte en cours de route : role="alert"
22. Encore pas HTML : onglets <ul class="tablist" role="tablist”> <li id="tab1" class="tab" aria-controls="panel1” aria-selected="true" role="tab" tabindex="0"> Prices</li> <li id="tab2" class="tab" aria-controls="panel2” role="tab” aria-selected="false" tabindex="0"> Features</li> </ul> <!-- code credit: http://accessibility.athena- ict.com/aria/examples/tabpanel2.shtml -->
23. Onglets : contenus <div id="panel1" class="panel” aria-labelledby="tab1" role="tabpanel" aria-hidden="false"> <h3 tabindex="0">Prices</h3> List of prices </div> <div id="panel2" class="panel hidden” aria-labelledby="tab2" role="tabpanel" aria-hidden="true"> <h3 tabindex="0">Features</h3> List of product features.... </div> <!-- code credit: http://accessibility.athena-ict.com/ aria/examples/tabpanel2.shtml -->
24. Application : cas à part §  Censé se comporter comme… une application §  Où l’on reparle du buffer : Not All ARIA Widgets Deserve role="application" http://accessibleculture.org/articles/2011/02/not-all- aria-widgets-deserve-role-application/
25. Encore des trucs pas HTML §  Menu : menu, menubar, menuitem (ce qui est dur, c’est plein de JS) §  Vue en arbre : tree, treeitem groupables avec group (idem plein de JS) §  Vue de « tableau en arbre » : treegrid
26. Pour la bonne bouche role="presentation" « Masquer » des éléments aux outils d’assistance ex. : un menu avec des li+a <ul role="menubar"> <li role="presentation"> <a href="" role="menuitem"></a> </li> […] </ul>
27. À retenir quand même ARIA c’est super… … mais ne pas en abuser … mais quand même c’est super !
28. Merci ! http://www.w3.org/TR/wai-aria/ #KiwiParty @notabene http://nota-bene.org Crédits photos §  Spiderman by Jack Kirby : http://kirbymuseum.org/blogs/dynamics/2012/03/page/4/