Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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.

Slide 5

Slide 5 text

§ 

Slide 6

Slide 6 text

1999 W3C ➞ WAI ➞ WCAG 1

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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 !

Slide 12

Slide 12 text

(with  respect  to  Jack  Kirby  and  Stan  Lee)  

Slide 13

Slide 13 text

Le mot de l’expert

Slide 14

Slide 14 text

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/

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Juicy Studio Accessibility Toolbar

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Des ajouts bienvenus §  aria-labelledby §  aria-describedby

Votre âge ans

Votre âge, en années, pas en semaines

§  Un mot sur la polémique du longdesc

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Encore pas HTML : onglets
    Prices
  • Features

Slide 23

Slide 23 text

Onglets : contenus

Prices

List of prices

Features

List of product features....

Slide 24

Slide 24 text

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/

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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/