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  
   

   View Slide

2. Stéphane
   Orange : expert accessibilité depuis 2004
   Clever Age : responsable Clever Garden
   @notabene
   #KiwiParty
   

   View Slide

3. ARIA
   « Ach, ja ! »
   (Philippe Vayssière)
   

   View Slide

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.
   

   View Slide

5. § 
   

   View Slide

6. 1999
   W3C ➞ WAI ➞ WCAG 1
   

   View Slide

7. 2004 – 2005
   WCAG 1 presque maîtrisées
   et paf : AJAX !
   (18 février 2005 Jesse James Garrett)
   

   View Slide

8. Le problème d’AJAX
   Refresh de morceaux de pages
   +
   Buffers de lecteurs d’écran
   =
   Pas d’informations mises à jour
   

   View Slide

9. 2008
   WCAG 2
   “accessibility compliant”
   PDF, Flash, Silverlight
   JavaScript
   

   View Slide

10. documents ➞ applicatif
    Rendre accessibles
    §  tous les contenus qui bougent
    §  éléments qui n’existent pas en HTML
    

    View Slide

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 !
    

    View Slide

12. (with  respect  to  Jack  Kirby  and  Stan  Lee)  
    

    View Slide

13. Le mot de l’expert
    

    View Slide

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/
    

    View Slide

15. Landmarks et HTML5
    Structurel HTML5
    banner header
    complementary aside
    contentinfo ?
    form form
    main article
    navigation nav
    search ?
    Particulier
    application ?
    

    View Slide

16. Une démo avec Jaws
    §  http://www.html5accessibility.com/tests/landmarks.html
    §  http://www.html5accessibility.com/tests/roles-land.html
    

    View Slide

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
    

    View Slide

18. Juicy Studio Accessibility Toolbar
    

    View Slide

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
    

    View Slide

20. Des ajouts bienvenus
    §  aria-labelledby
    §  aria-describedby
    
    Votre âge
    aria-describedby="p4">
    ans
    
    Votre âge, en années, pas en semaines
    §  Un mot sur la polémique du longdesc
    

    View Slide

21. Des trucs pas HTML
    §  Ouvert / fermé : aria-expanded
    §  Alerte, popins : role="dialog",
    role="alertdialog"
    §  Alerte en cours de route :
    role="alert"
    

    View Slide

22. Encore pas HTML : onglets
    
    Prices
    
    Features
    
    
    

    View Slide

23. Onglets : contenus
    aria-hidden="false">
    Prices
    List of prices
    
    
    Features
    List of product features....
    
    
    

    View Slide

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/
    

    View Slide

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
    

    View Slide

26. Pour la bonne bouche
    role="presentation"
    « Masquer » des éléments aux outils d’assistance
    ex. : un menu avec des li+a
    
    
    
    
    […]
    
    

    View Slide

27. À retenir quand même
    ARIA c’est super…
    … mais ne pas en abuser
    … mais quand même c’est super !
    

    View Slide

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/
    

    View Slide