Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ARIA, toute une symphonie

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

Stephane Deschamps

June 13, 2014
Tweet

Other Decks in Technology

Transcript

  1. ARIA, toute une symphonie
    Stéphane Deschamps
    Kiwi Party, 13 juin 2014
    cc-­‐by  

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

  5. 1999
    W3C ➞ WAI ➞ WCAG 1

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  10. 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 full-size slide

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

    View full-size slide

  12. Le mot de l’expert

    View full-size slide

  13. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  16. 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 full-size slide

  17. Juicy Studio Accessibility Toolbar

    View full-size slide

  18. 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 full-size slide

  19. 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 full-size slide

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

    View full-size slide

  21. Encore pas HTML : onglets

    Prices

    Features


    View full-size slide

  22. Onglets : contenus
    aria-hidden="false">
    Prices
    List of prices


    Features
    List of product features....


    View full-size slide

  23. 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 full-size slide

  24. 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 full-size slide

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




    […]

    View full-size slide

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

    View full-size slide

  27. 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 full-size slide