Your SlideShare is downloading. ×
Aria au pays du Web
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Aria au pays du Web

1,516
views

Published on

Published in: Technology, Business

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,516
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. ARIA au pays du Web
    Jean-Pierre Villain - Qelios
    W3Café Accessibilité - Paris – Avril 2011
    Les images utilisées dans cette présentation sont extraites des films « alice au pays des merveilles » de Tim Burton et « 2001 l ’odysée de l’espace » de Stanley Kubric
  • 2. ARIA au pays du Web
    Une (très) brève
    Histoire du
    Web Dynamique
    Html
    Javascript
  • 3. ARIA au pays du Web
    Des effets dynamiques
    Des Contenus Structurés
    Menu Déroulant
    Images
    Formulaires
    De la neige
    en hiver
    Contrôle de formulaire
    Liens
    Textes
    HTML
    Javascript
    Multimédia
    1999
    1995
    1992
    2000
    HTML 1.0
    Javascript
    HTML 4.01
    XHTML
  • 4. ARIA au pays du Web
    XMLHttpRequest2002
  • 5. ARIA au pays du Web
    Du comportement
    Des Contenus Structurés
    Ajax
    Images
    Formulaires
    Nouveaux
    Composants
    Application
    RIA
    Liens
    Textes
    Javascript
    HTML
    Multimédia
    1998
    2005
    2006
    2014
    2002
    MSXML
    Ajax
    ARIA
    HTML5
    XmlHttpRequest
  • 6. ARIA au pays du Web
    Les limites du développement Web classique
    Le web fonctionne en
    mode client-serveur
    HTML ne permet pas de créer des composants
    Limités à
    Une action
    Le lien
    Les éléments de
    formulaire
    Un rechargement
    de page
  • 7. ARIA au pays du Web
    La solution : utiliser Javascript pour :
    Ajax
    Créer des composants
    en ajoutant du comportement
    sur des éléments HTML
    quelconques
    Gérer les requêtes client-serveur
    via l’objet Javascript
    XMLHttpRequest
    Code Html du slider
    <div><span>0%</span>
    <div><a></a>
    </div>
    </div>
    Rechargement
    De page
  • 8. ARIA au pays du Web
    Le Web Dynamique
    et l’utilisateur
  • 9. ARIA au pays du Web
    Comment un lecteur d’écran sait de quoi il parle ?
    API Accessibilité Système
    Navigateur Web
    Technologie d’assistance
    Zone de liste déroulante Choose one or more users avery  1 sur 4 
  • 10. ARIA au pays du Web
    Pour HTML tout est défini dans les spécifications
    Le lecteur d’écran dispose de toutes les informations renvoyées par le navigateur et les adapte comme il le souhaite :
    Lien, c’est super
    <a href=‘’> C’est super </a>
    Titre de niveau 1, c’est super
    <h1> C’est super </h1>
    Graphique, c’est super
    <imgsrc=‘’ alt=‘C’est super’ />
    Bouton, c’est super
    <input type=‘submit’ value=‘C’est super’ />
    Case à cocher, cochée,c’est super
  • 11. ARIA au pays du Web
    Avec Javascript
    Les problématiques
    utilisateurs
  • 12. ARIA au pays du Web
    Problème pour l’utilisateur
    Identifier – Utiliser - Comprendre
    <div><span>0%</span>
    <div><a></a>
    </div></div>
    C’est quoi ce truc ?
    <div><span>0%</span>
    <div> <a></a>
    </div></div>
    0%
    Volume
    Heu …
    0%
    Volume
    <div><span> 48% </span>
    <div> <a></a>
    </div></div>
    48%
    Volume
    Ha! bon …
  • 13. ARIA au pays du Web
    Problème pour l’utilisateur
    Vous êtes ici
    Afficher les actualités
    Cool…
    AJAX
    Vous êtes toujours ici !
    Afficher les actualités
    Ha! bon…
  • 14. ARIA au pays du Web
    Problème pour l’utilisateur
    Navigation Clavier HTML
    Navigation Clavier Javascript
    Limitée à
    Le lien
    <div style="display: block;" class="jcarousel-next ></div>
    Les éléments de
    formulaire
    L’élément
    object
    <div style="display: block;" class="jcarousel-prev></div>
    Je peux
    Je peux pas
  • 15. ARIA au pays du Web
    Solution : ARIA
    Informer de l’état et
    des propriétés d’un
    composant
    2
    Définir les composantsDéfinir la structure
    1
    Slider
    Navigation
    Menu
    Application
    Banner
    48%
    Volume
    valuenow:48%
    « 48%, 49%... »
    Informer des misesà jour dynamiques
    4
    Rendre les composants
    utilisables au
    clavier
    3
    Tabindex
    Flèche de direction
    Live region
  • 16. ARIA au pays du Web
    Définit des attributs et des valeurs
    Contenu
    rôle
    Javascript
    (slider, menu, navigation, application…)
    Aria
    Navigateur
    state, properties
    API ACC Système
    cheked, valuenow, expanded, labeledby
    Information
    Etend le rôle de tabindex
    Tabindex=0
    focus
    focus
    Tabindex=-1
    « 48%, 49%... »
  • 17. ARIA au pays du Web
    L’implémentation utilise de simples attributs HTML
    Les valeurs dynamiques sont gérées depuis la couche Javascript
    Les comportements (l’affichage d’un sous-niveau de liste, par exemple ) sont également gérésdepuis la couche Javascript
    <h2 id="label_1">Foods</h2>
    <ul id="tree1" class="tree" role="tree" aria-labelledby="label_1">
    <li class="groupHeader" id="fruits" role="treeitem" tabindex="0" aria-expanded="true">
    <ulrole="group">
    <li id="oranges" role="treeitem" tabindex="-1">Oranges</li>
    Exemples
    d’attributs ARIA
    <li class="groupHeader" id="apples" role="treeitem" tabindex="-1" aria-expanded="false">
    Rôle
    Labelledby
    Expanded
    Tabindex
  • 18. ARIA au pays du Web
    Role State Properties
    banner application
    slider aria-labelledby
    aria-live aria-describedby
    ARIA par l’exemple
  • 19. ARIA au pays du Web
    1. Guider l’utilisateur
    Les landmarks
  • 20. ARIA au pays du Web
    Les landmarks, role= banner, main, search…
    Objectif : créer des points de repère et de navigation dans la structure de la page
    banner : zone d’en-tête
    search: zone de recherche
    form
    Main : la zone de contenu principal
    navigation
    zone de formulaire
    zone de navigation
    Le rôle application indique aux technologies d’assistance de modifier la gestion des évènements claviers, la navigation notamment, pour utiliser la configuration habituelle dans une application logicielle
    !!
    complementary
    application
    zone de contenu complémentaire
    zone qui contient une « application »
    contentinfo: zone d’information propre au document
  • 21. ARIA au pays du Web
    Exemple : Implémentation des landmarks chez Alsacréations
    navigation
    banner
    search
    main
    complementary
    contentinfo
  • 22. ARIA au pays du Web
    2. Les boites de dialogue
  • 23. ARIA au pays du Web
    Les boites de dialogue : role = alertdialog
    Objectif : créer une boite d’alerte alternative aux méthodes alert, promprt, confirm de JS. Attention : il faut maîtriser les limites des boites de dialogues ARIA !
    Alerte Javascript
    Alerte ARIA
    Inconvénient
    Pas stylable
    N’accepte que du texte
    Avantage
    C’est une vraie fenêtre modale
    Ne nécessite aucun traitement
    Inconvénient
    Ce n’est pas une vraie fenêtre modale
    Avantage
    Personnalisable à 100%
  • 24. ARIA au pays du Web
    3. Des composants
    complexes
    User Friendly
  • 25. ARIA au pays du Web
    Le Slider clandestin

    <div...>
    <img …/>
    </div>
  • 26. ARIA au pays du Web
    Le Slider qui parle
    <div>
    <span>0$</span><a href=‘#’aria-valuenow="0" aria-valuetext="0 $" role="slider" aria-valuemin="0" aria-valuemax="100" title="price" style="left: 0%;"></a>
    </div>
    price Potentiomètre 0 $
    1 $
    2 $
    3 $
    4 $
    5 $
    6 $
  • 27. ARIA au pays du Web
    Exemple : une barre de progression, role=progressbar
    Le principe est identique à celui d’un slideret utilise les mêmes attributs et le même fonctionnement enchainé. Implicitement, le composant est déclaré en « readonly » de telle sorte que l’utilisateur ne puisse pas interagir avec lui.
    NVDA propose deux restitutions :Vocale (annonce des valeurs)Par bip sonore
    Par défaut, Jaws annonce la valeur atteinteà intervalles réguliers
    <div
    role="progressbar"
    aria-valuemin="0"
    aria-valuemax="100"
    aria-valuenow="0"
    aria-labelledby="progressMsg"
    aria-valuetext=‘’0 %">
    </div>
  • 28. ARIA au pays du Web
    Exemple : messages avec labelledby et describedby
    labelledby et describedby permettent de lier des contenus les uns aux autres.Ces deux attributs sont omniprésents dans les implémentations ARIA.L’une des utilisations est de produire des messages lors de l’utilisation d’un composant.
    Id : commande
    Id : unite
    Commande de fruits groupage
    Quantité 10 kilos
    édition avec autocomplétion
    Attention au délai :Plus de 30 kg : prévoir 10 jours
    ….
    sélectionné 10
    Id : disponible
    Id : label
    <input id="commande" value="10" aria-labelledby="label commande unite" aria-describedby="disponible" type="text">
  • 29. ARIA au pays du Web
    4. Les Live Régions
  • 30. ARIA au pays du Web
    Les live region, la propriété aria-live
    Objectif : informer des mises à jour dynamiques et gérer l’interaction entre la zone de mise à jour et les actions de l’utilisateur
    Propriétés aria-live
    aria-live=off
    Valeur par défaut, la zone n’est pas lue du tout.
    La zone est lue quand l’utilisateur a terminé son action.
    aria-live=polite
    aria-live=assertive
    La zone est lue en interrompant l’utilisateur dés que c’est possible.
    aria-live=rude
    La zone est lue en interrompant l’utilisateur immédiatement.
  • 31. ARIA au pays du Web
    Les live region, les propriétés complémentaires
    Objectif : informer de l’état de la zone mise à jour, gérer le contenu de la zone mise à jour
    Propriétés
    Toute la zone ou seulement la partie mise à jour est lue
    atomic = true/false
    Les ajouts et les suppressions de contenus (dom) sont signalés
    relevant = additions /removal
    Seuls les changements de texte ou tous les changements sont signalés
    relevant=text/all
    aria-busy=true/false
    Signale que la zone est en train d’être mise à jour
  • 32. ARIA au pays du Web
    Une live region avec aria-live polite
    aria-live=‘’polite’’
    La zone mise à jour est lue
    focus()
    L’utilisateur est occupé; la zone n’est plus lue
  • 33. ARIA au pays du Web
    Live regions : un chat avec ajax et aria-live
    http://ideance.net/publications/live-regions/index.html
    Lire uniquement le contenu mis à jour, c’est-à-dire le dernier texte inséré.
    <ularia-atomic="false" aria-live="polite" id="chat-area"><li class="welcome"> Bienvenue</li><li><span>Invité </span>Bonjour tout le monde</li> </ul>
    Lire la zone mise à jour quand l’utilisateur est disponible.Donc, quand il a terminé, son message notamment.
  • 34. ARIA au pays du Web
    Contrôle
    au clavier
  • 35. ARIA au pays du Web
    Contrôles au clavier, la problématique
    Principes
    Paradigme
    La touche tabulation navigue d’un composant à l’autre
    Tout est utilisable avec la touche de tabulation
    C’est une problématique très difficile.
    Il faut s’inspirer du fonctionnement de applications
    !!
    Des touches dédiées comme les flèches de direction, la touche escape, la barre d’espace apportent des fonctionnalités de contrôle
    Pour certains éléments comme les listes de formulaires les flèches de direction servent à naviguer dans les éléments (item de liste)
    HTML
    ARIA
  • 36. ARIA au pays du Web
    Contrôles au clavier, la navigation
    Touches dédiées
    tabindex=0
    Permet à un élément quelconque de recevoir le focus de tabulation
    tabindex=-1
    Retire un élément du plan de tabulation
    flêches de direction
    Naviguer dans les éléments d’un composant
    barre d’espace
    Activer / désactiver
    touche escape
    Désactiver /annuler une action
  • 37. ARIA au pays du Web
    Contrôles au clavier, exemples
    Naviguer dans une fausse fenêtre modale
    Gérer la navigation dans le système d’actualité de Yahoo
    Naviguer dans un système d’onglets
  • 38. ARIA au pays du Web
    Problématiques utilisateurs
    Les technologies d’assistance annoncent, pour certains rôle le type de navigation attendue.
    Les utilisateurs qui ne peuvent pas utiliser de souris ne recoivent pas d’informations sur la navigation
    Respecter impérativement les Design Pattern préconisés par ARIA
    !!
    Exemple avec slider et jaws : « utiliser les touches flèchés… ».
    Comment les informer ?
    Conserver le paradigme de tabulation et ajouter des navigations auxiliaires
    Comment être sur que c’est réellement le cas ?
  • 39. ARIA au pays du Web
    Tester ARIA
  • 40. ARIA au pays du Web
    02
    Problématiques utilisateurs
    Outils d’inspection d’évènement, attributs et propriétés
    Les technologies d’assistance
    Sur des applications RIA complexes.
    Tests Utilisateurs
    JAWS / NVDA
    !!
    ICITA Toolbar
    Inspect 32
    JuicyToolbar
    Visioneuse de parole
  • 41. ARIA au pays du Web
    Merci de votre
    attention
    Les démos de l’atelier sont disponibles sur www.qelios.net/demo_aria