4shared

« Il est vivant! »: Les applications qui alimentent Retour d’accessibilité

By  |  0 Comments

"Il Est Vivant!": Les Applications Qui Alimentent Retour D'accessibilité

Il est une chose de créer une application Web et une autre de créer une application Web accessible. Voilà pourquoi Heydon Pickering 1 , à la fois auteur et rédacteur en chef de Smashing Magazine, écrit un applications eBook pour tous: le codage accessible applications Web 2 , décrivant la feuille de route pour les applications accessibles, nous devrions tous être décision.

Ce qui suit est un extrait du chapitre «Il est vivant» du livre de Heydon, qui explore comment utiliser ARIA régions vivantes. Applications Javascript sont entraînés par les événements et l’utilisateur doivent être informés de ce que des événements importants se produisent dans l’interface. Régions vivantes nous aident à fournir des systèmes de messagerie accessibles, en gardant les utilisateurs informés des événements d’une manière qui est compatible avec les technologies d’assistance.

Faire passer le message

Imaginez la scène: il est un jour comme les autres et que vous êtes à votre bureau, enfermé dans une banque semi-circulaire de moniteurs qui composent votre bureau étendu, démarrage attentivement sur CSS au niveau de l’entreprise pour MegaDigiSpaceHub Ltd. Vous êtes l’un des de nombreux développeurs talentueux frontaux qui partagent cet étage dans votre bureau de Londres en peluche.

Vous ne le savez pas, mais un incendie a éclaté sur le sol ci-dessous vous en raison d’un « stratège mobile» la combustion spontanée. Depuis aucune dépense n’a été épargnée sur le bureau de l’ameublement avec des ornements postmodernes adorables, pas de budget est resté pour installer un système d’alarme incendie. Il appartient au gestionnaire de-chaussée en question de voyager à travers le bureau, avertissant les différents ministères en personne.

Il le fait en marchant silencieusement dans chaque chambre, tenant une carte de visite en altitude avec le mot «feu» écrit sur elle dans 12pt Arial pour un total de trois secondes, puis quitter. Vous et les autres développeurs et mdash; bien calé derrière vos écrans & mdash; ont aucune idée, il a même visité la salle.

"Il Est Vivant!": Les Applications Qui Alimentent Retour D'accessibilité
Trois moniteurs de codage

Ce que je couvre dans mon ebook est, pour la plupart, de faire en utilisant vos sites Web et des applications accessibles. Autrement dit, nous sommes préoccupés par tout le monde étant en mesure de faire des choses avec eux facilement. Cependant, il est important de reconnaître que lorsque quelque chose est fait (ou qui se passe tout simplement), autre chose se produira probablement à la suite:. Il ya des actions et réactions

« Quand une corps exerce une force sur un second corps, le second corps exerce simultanément une force égale en grandeur et en direction opposée à celle du premier corps ».

& ndash; La troisième loi du mouvement de Newton (Lois du mouvement de Newton, Wikipedia 3 )

fournissant une rétroaction aux utilisateurs, pour confirmer le cours qu’ils ont pris, aborder le résultat d’un calcul qu’ils ont fait ou d’insérer des commentaires utiles de toutes sortes, est une partie importante de l’application de conception . Le problème qui doit être abordé est que l’interruption d’un utilisateur visuellement, en faisant un message apparaît à l’écran, est un phénomène silencieux. Il est également celui qui & mdash; dans le cas des dialogues & mdash; implique souvent l’activation d’un élément qui provient d’une partie complètement à distance du document, de nombreux noeuds DOM loin de l’emplacement de l’utilisateur du foyer.

Pour répondre à ces questions et à assurer que les utilisateurs (contrairement aux pauvres développeurs dans l’histoire d’introduction) faire passer le message, ARIA fournit régions vivants 4 . Comme leur nom l’indique, les régions vivantes sont des éléments dont le contenu peut changer au cours de l’utilisation de l’application. Ils sont des êtres vivants, alors ne résistent pas toujours encore. Par les ornant avec les attributs ARIA appropriées, ces régions vont interrompre l’utilisateur d’annoncer leurs changements à mesure qu’ils se produisent.

Dans l’exemple suivant, nous allons examiner comment alerter les utilisateurs aux changements dont ils ne demandent, mais & mdash; comme le bâtiment en feu & mdash; vraiment devrait connaître de toute façon.

Alerte!

Peut-être la seule chose pire que un incendie qui pourrait arriver au bureau d’une société de développement web serait perdre la connectivité à l’Internet. Certes, si je travaillais en utilisant une application en ligne, je voudrais savoir l’application ne sera plus se comporter de la façon dont je pense et peut-être stocker mes données correctement. Ceci est la raison pour laquelle Google Mail insère un avertissement chaque fois que vous passez hors ligne. Comme indiqué en 2008 le billet de blog de Marco Zehe 5 , Google était un des premiers à adopter ARIA régions vivent.

Yellow box reads unable to reach G mail please check your internet connection - "Il Est Vivant!": Les Applications Qui Alimentent Retour D'accessibilité
Boîte jaune lit incapable de parvenir à G électronique s’il vous plaît vérifier votre connexion Internet.

Nous allons créer un script qui vérifie si l’utilisateur est en ligne ou hors tension et utilise ARIA pour avertir les utilisateurs de lecteurs d’écran de la modification de ce statut afin qu’ils sachent que ce soit la peine de rester à leur bureau ou abandonner et aller pour un bière.

La configuration

Pour les régions vivantes, ARIA fournit un certain nombre de valeurs à la fois pour le rôle et aria-live attributs. Cela peut être source de confusion parce qu’il ya une coupure entre les deux et certains lecteurs d’écran ne supporte ni le rôle ou aria-live alternatives. Il est OK, il ya des façons de contourner cela.

Au niveau le plus basique, il existe deux types communs de message:

  1. « Ceci est très important, mais je vais attendre et vous dire quand vous avez terminé faire tout ce que vous faites. »
  2. « tout laisser tomber! Vous devez savoir maintenant ou nous sommes tous en grande difficulté. AAAAAAAAAAGHH! « 

correspondent au rôle respectif et aria-live attributs, ces types communs sont rédigés comme suit:

  1. « Ceci est très important, mais je vais attendre et vous dire quand vous avez terminé faire tout ce que vous faites.» ( aria-live = «poli» ou [1999068 ] role = « statut » )
  2. « tout laisser tomber! Vous devez savoir maintenant ou nous sommes tous en grande difficulté. AAAAAAAAAAGHH. « ( aria-live =" autoritaire " ou role =" alerte ")

Lors du marquage jusqu’à notre propre région en direct, nous allons maximiser la compatibilité en mettant à la fois des attributs et des valeurs équivalentes en place. Ceci est parce que, malheureusement, certains agents utilisateurs ne supportent pas l’un ou l’autre des attributs équivalents. Des informations plus détaillées sur la maximisation de la compatibilité 6 des régions en direct est disponible à partir de Mozilla.

Depuis la perte de connectivité Internet est une catastrophe majeure, nous allons utiliser la forme la plus agressive.

     & lt;  div   id    =  "message"   rôle    =  "alerte"   aria-live    =  "autoritaire"   classe [ 1999116]   =    & gt "en ligne";  
       & lt;  p   & gt;   vous êtes en ligne   . & Lt; /  p [ 1999116]  & gt;  
</div>

Le code ci-dessus ne alerte en aucune manière par lui-même & mdash; le contenu de la région en direct devraient changer de façon dynamique pour que cela se produise. Le script ci-dessous exécuter une vérification pour voir si elle peut charger test_resource.html toutes les trois secondes. Si elle ne parvient pas à charger, ou il n’a pas réussi à charger, mais a par la suite réussi, il mettra à jour classe valeur de la région en direct et modifier le libellé du paragraphe. Si vous allez déconnecté de manière inattendue, il affichera & lt; p & gt; Il n'y a pas internets. Le temps d'aller au pub & lt;! / P & gt;.

Le changement va provoquer le contenu de ce #message région en direct à être annoncé, brusquement interrompre tout ce qui est en cours de lecture sur la page.

   // fonction à exécuter lors du passage en mode hors connexion

 var  déconnecté  =   fonction   ( )   {
   si  (!$('#message').hasClass('offline'))  {
    $  (  "# message ' )   // l'élément avec [role =" alerte "] et 
[aria-live =" assertive "]
. attr ( «classe» , 'offline' )        texte ( "Il s 'aucun internets Aller au pub' .!) ;.   } } // Fonction pour exécuter lorsque de retour en ligne var ligne = fonction ( ) {    si (!$('#message').hasClass('online')) {     $ ( "# message ' ) // l'élément avec [role =" alerte "] et
[aria-live =" assertive "]
. attr ( «classe» , «en ligne» )        texte ( "Vous êtes en ligne. ' ) ;.   } } // Test en essayant d'interroger un fichier fonction testConnection ( url ) {      var xmlhttp = nouveau XMLHttpRequest ( ) ;     xmlhttp . onload = fonction ( ) {       en ligne ( ) ;     }     xmlhttp . onerror = fonction ( ) {       déconnecté ( ) ;     }     xmlhttp.open("GET",url,true);     xmlhttp envoyer ( ) ;. } // Boucle le test toutes les trois secondes pour "test_resource.html" fonction commencer ( ) {   rand = Math.floor(Math.random()*90000) + 10000 ;   testConnection ( "test_resource.html frais =? ' + rand ) ;   setTimeout ( commencer , 3000 ) ; } // Lancer le premier test commencer ( ) ;
Alert reads alert there’s no internets. Go to the pub. - "Il Est Vivant!": Les Applications Qui Alimentent Retour D'accessibilité
Alerte lit « Alerte: il n’y a aucun internets. Aller au pub! « 

Il ya des façons plus complets pour tester pour voir si votre application est en ligne ou non, y compris un script dédié appelés offline.js 7 , mais cette petite est inclus pour le contexte. Notez que certains lecteurs d’écran précéder l’annonce avec « Alerte! », De sorte que vous ne voulez probablement pas à inclure « Alerte! » Dans le texte même ainsi, sauf si elle est vraiment, vraiment des informations importantes. [ 1999008]

Il ya une démo de cet exemple 8 disponible.

test.css

Nous tenons à maximiser la compatibilité des régions direct à travers les navigateurs et les technologies d’assistance. Nous pouvons ajouter une règle dans notre test.css pour assurer que les attributs équivalents sont tous présents comme ceci:

[role="status"]:not([aria-live="polite"]),
[role="alert"]:not([aria-live="assertive"])  {
contenu :  "Attention: Pour un meilleur soutien, vous devez inclure 
un cadre pour votre région rôle direct en utilisant l'attribut
aria-live politesse ; } [aria-live="polite"]:not([role="status"]), [aria-live="assertive"]:not([role="alert"]) { contenu : "Attention: Pour un meilleur support, vous devriez
inclure un rôle correspondant à votre aria-live Cadre
politesse ; }

Je veux que le Whole Story

« sortis de leur contexte, je dois sembler si étrange. »

& Ndash; Porte coupe-feu par Ani DiFranco

Par défaut, lorsque le contenu d’une région en direct modifient, seuls les nœuds (éléments HTML, pour vous et moi) qui ont effectivement changé sont annoncés. Ce comportement est utile dans la plupart des situations, parce que vous ne voulez pas une énorme quantité de contenu de vous relire juste parce qu’une infime partie de celui-ci est différent. En fait, si tout est donné lecture à la fois, comment voulez-vous dire quelle partie avait changé? Ce serait comme le jeu de plateau de mémoire où vous devez mémoriser le contenu d’un bac de rappeler des choses qui ont été enlevés.

Tray full of bits of HTML - "Il Est Vivant!": Les Applications Qui Alimentent Retour D'accessibilité
plateau plein de morceaux de HTML

Dans certains cas, cependant, un peu de contexte est souhaitable pour des éclaircissements. Ceci est où le aria-atomique attribut entre en jeu. En l’absence de
aria-atomique ensemble, ou avec une valeur aria-atomique de false , seuls les éléments qui ont fait changé sera notifiée à l’utilisateur. Lorsque aria-atomique est réglé sur vrai , la totalité du contenu de l’élément avec aria-atomique réglé sur qu’il sera lu.

Le terme atomique est un peu déroutant. Pour être vrai signifie pour traiter le contenu de cet élément comme un seul, chose indivisible (un atome), de ne pas briser l’élément en petits morceaux (atomes). Si oui ou non vous pensez atomique est un bon morceau de terminologie, le comportement attendu est ce qui compte et il est le premier des deux comportements qui sont définis.

One atom compared to lots of atoms - "Il Est Vivant!": Les Applications Qui Alimentent Retour D'accessibilité
Un atome par rapport à beaucoup d’atomes

Gez Lemon offre un excellent exemple de aria-atomique 9 . Dans son exemple, nous imaginons un lecteur de musique intégré qui indique aux utilisateurs ce que la piste en cours de lecture est, chaque fois qu’elle change.

     & lt;  div   aria-live    =  «poli»  [ 1999118] rôle    =  «statut»  aria-atomic="true">
     & lt;  h3   & gt;   Joue actuellement:    & lt; /  h3 [1999116 ]  & gt;  
     & lt;  p   & gt;   Jake Bugg - Lightning Bolt    & lt; /  p   & gt;  
</div>

Même si seul le nom de l’artiste et de la chanson dans le paragraphe va changer, parce que aria-atomique est réglé sur vrai toute la région sera lu à chaque fois:  » Joue actuellement: Jake Bugg & mdash; Éclair « . Le préfixe «Joue actuellement » est important pour le contexte.

Notez que le réglage de la politesse de la région est en direct poli pas
affirmée comme dans l’exemple précédent. Si l’utilisateur est occupé à lire autre chose ou la dactylographie, la notification attendra jusqu’à ce qu’ils aient cessé. Il est pas assez important pour interrompre l’utilisateur, pas moins parce qu’il est leur playlist: ils pourraient reconnaître toutes les chansons de toute façon

.

Box showing a graphic equalizer which reads currently playing, Jake bug lightning bolt - "Il Est Vivant!": Les Applications Qui Alimentent Retour D'accessibilité
Box montrant un égaliseur graphique qui se lit en cours de lecture, Jake boulon bogue de foudre

Le aria-atomique attribut ne doit pas être utilisé sur le même élément qui définit la région en direct, comme dans l’exemple de citron. En fait, vous pouvez utiliser aria-atomiques sur des éléments enfants séparés dans la même région. Selon le cahier des charges:

« Quand le contenu d’un direct changements de région, les agents utilisateurs devrait examiner l’élément modifié et parcourir les ancêtres de trouver le premier élément avec aria-atomique jeu, et appliquer le comportement approprié. « 

& Ndash; Soutenu Unis et Propriétés 10

Cela signifie que nous pourrions également inclure un autre bloc dans notre région en direct à indiquer aux utilisateurs piste qui est à venir jusqu’à la prochaine.

     & lt;  div   aria-live    =  «poli»  [ 1999118] rôle    =  «statut»   & gt;  

      & lt;  div  aria-atomic="true">
        & lt;  h3   & gt;   Joue actuellement:    & lt; /  h3 [1999116 ]  & gt;  
        & lt;  p   & gt;   Jake Bugg - Lightning Bolt    & lt; /  p   & gt;  
      & lt; /  div   & gt;  

      & lt;  div  aria-atomic="true">
        & lt;  h3   & gt;   Suivante dans la file d'attente:    & lt; /  h3 [ 1999116]  & gt;  
        & lt;  p   & gt;   Napalm Death - Vous souffrez    & lt; /  p   & gt;  
      & lt; /  div   & gt;  

</div>

Maintenant, quand Jake Bugg Lightning Bolt est presque une fin, nous mettons à jour la & lt; p & gt; dans le prochain bloc de file d’attente pour avertir les utilisateurs que Napalm Death sont prêts à prendre le micro: « Suivant dans file d’attente: Napalm Death & mdash; Vous souffrez « . Comme Napalm Death commencer à jouer, le bloc en cours de lecture met également à jour avec leurs pouvoirs et à la prochaine jonction disponibles à l’utilisateur est rappelé que le bruit qu’ils sont soumis à est en effet Napalm Death.

aria-busy

Je était un peu espiègle utilisant de vous souffrez comme exemple la piste parce que, à 1,316 secondes de long, le plus court morceau enregistré dans le monde aurait pris fin avant la région en direct pourrait finir vous disant qu’il avait commencé Napalm Death! Si chaque piste était que bref, l’application irait détraquer.

Dans les cas où beaucoup de changements complexes à une région en direct doit avoir lieu avant que le résultat serait compréhensible pour l’utilisateur, vous pouvez inclure le aria-busy attribut 11 . Il vous suffit de la position vrai alors que la région est mise à jour occupé et revenir à false quand il est fait. Il est effectivement l’équivalent d’un spinner de chargement utilisé lors du chargement actifs dans les applications JavaScript.

Typical loading spinner labelled ARIA atomic true - "Il Est Vivant!": Les Applications Qui Alimentent Retour D'accessibilité
loading spinner typique ARIA marqué atomique vrai

Habituellement, vous réglez aria-busy = "true" avant le premier élément (ou plus) dans la région en direct est chargé ou modifiés, et false lorsque le dernier élément attendu a été traité. Dans le cas de notre exemple de lecteur de musique, nous aurions probablement voulons définir un délai d’une dizaine de secondes, en vous assurant que morceaux de musique plus que l’annonce de ces pistes se annoncées.

$('#music-info').attr('aria-busy',  «vrai»  )  ; 

 // Mise à jour de l'artiste de la chanson & amp; titre ici, alors ...

setTimeout  (  fonction   ( )   {
   $('#music-info').attr('aria-busy',  «faux»  )  ; 
}  ,   10000  )  ;   

Acheter Le livre électronique

Ceci conclut votre extrait de « Il est vivant! », Un chapitre qui va à explorer les subtilités de la conception de dialogues sur le web accessibles. Mais ce nest pas tout. Il ya beaucoup plus sur la création d’expériences accessibles dans le livre, de la conception de base de contrôle de bouton pour les interfaces de l’onglet ARIA et au-delà. Avis concernant les options d’achat et de livres électroniques sont disponibles ici 12 . L’inimitable Bruce Lawson a écrit une belle après 13 à ce sujet, aussi.

Notes

  1. 1 https://twitter.com/heydonworks
  2. 2 https://shop.smashingmagazine.com/apps-for-all-coding-accessible-web-applications.html
  3. 3 http://en.wikipedia.org/wiki/Newton%27s_laws_of_motion
  4. 4 https://developer.mozilla.org/en-US/docs/Accessibility/ARIA/ARIA_Live_Regions
  5. 5 http://www.marcozehe.de/2008/08/04/aria-in-gmail-1-alerts/
  6. 6 https://developer.mozilla.org/en-US/docs/Accessibility / ARIA / ARIA_Live_Regions
  7. 7 http://github.hubspot.com/offline/docs/welcome/
  8. 8 http://heydonworks.com/practical_aria_examples/#offline-alert[1999081 ]
  9. 9 http://juicystudio.com/article/wai-aria_live-regions_updated.php
  10. 10 http://www.w3.org/TR/wai-aria/states_and_properties#aria-atomic
  11. 11 http://www.w3.org/TR/wai-aria/states_and_properties#aria-busy
  12. 12 https://shop.smashingmagazine.com/apps-for-all-coding-accessible-web-applications.html
  13. 13 http://www.brucelawson.co.uk/2014/apps-for-all-coding-accessible-web-applications-book-review/

The poster « Il est vivant! »:. les applications qui alimentent Retour d’accessibilité première apparition sur Smashing Magazine

"Il Est Vivant!": Les Applications Qui Alimentent Retour D'accessibilité
"Il Est Vivant!": Les Applications Qui Alimentent Retour D'accessibilité
"Il Est Vivant!": Les Applications Qui Alimentent Retour D'accessibilité
"Il Est Vivant!": Les Applications Qui Alimentent Retour D'accessibilité
"Il Est Vivant!": Les Applications Qui Alimentent Retour D'accessibilité

"Il Est Vivant!": Les Applications Qui Alimentent Retour D'accessibilité

"Il Est Vivant!": Les Applications Qui Alimentent Retour D'accessibilité

Leave a Reply

Votre adresse de messagerie ne sera pas publiée.

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>