Vous êtes tendance, vous êtes
digital, vous connaissez ARIA ?
Aurélien Levy (@goetsu)
« Si tu donnes un poisson à un
homme, il mangera un jour. Si tu lui
apprends à pêcher, il mangera
toujours. »
Lao Tseu
Pas ça
Ni ça
Mais ça
ARIA c’est quoi?
• Role (qu’est ce que c’est ?)
• Attributs
– State (qu’elle est son état ?)
– Propertie (qu’est ce qui le...
Le magicien
c’est vous
pas le lapin !
ARIA rules
• 1- utiliser les éléments HTML sémantique
d’abord
• 2- ne changer la sémantique d’un élément par
un autre que ...
ARIA pour vous améliorer
ARIA pour vous sauver d’urgences
Victor, nettoyeur.
ARIA pour vous déguiser
Role de type landmarks
• Permet de déterminer
le role des grandes
zones de vos pages
• Peuvent être listées par
les aides ...
Entre les deux role banner, navigation, main, search et
contentinfo
En patch JS via Jquery
$('header').attr('role',’banner...
Role d’élément
• Permet d’affecter un
role qui n’existe pas en
html ou de corriger la
sémantique
• Peuvent être restitué
p...
Aria properties
• Permet de définir la
propriété d’un élément
• Sa valeur peut
éventuellement varier
dans le temps
• aria-...
Aria states
• Permet d’associer un
état à un élément
• Sa valeur peut
éventuellement varier
dans le temps
• aria-busy
• ar...
Entre les deux aria-label
patch JS via Jquery
$('#mini-panel-r_seaux_sociaux
img:first').attr('aria-
label','page facebook...
Entre les deux role heading, aria-level et aria-hidden
En patch JS via Jquery
$('.pane-a-la-une-du-sommaire
.views-field-
...
Entre les deux aria-haspopup, aria-label, focus et
tabindex
En patch JS via Jquery
$(".pane-article-men-princ-home
a").att...
Entre les deux role menuitem, focus et tabindex
En patch JS via Jquery
$("#mini-panel-
richmenu1,…").attr('role',"menuitem...
Oui mais en fait non…
Questions ?
aurelien.levy@temesis.com
@goetsu
Vous êtes tendance, vous êtes digital, vous connaissez ARIA ? #accessiday
Prochain SlideShare
Chargement dans…5
×

Vous êtes tendance, vous êtes digital, vous connaissez ARIA ? #accessiday

2 068 vues

Publié le

présentation sur l'utilisation d'ARIA réalisé lors d'Accessiday à Caen le 28 mai 2014 avec des démos vidéos avant / après sur un site exemple : le mémorial de Caen

Publié dans : Technologie
0 commentaire
4 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
2 068
Sur SlideShare
0
Issues des intégrations
0
Intégrations
70
Actions
Partages
0
Téléchargements
12
Commentaires
0
J’aime
4
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Vous êtes tendance, vous êtes digital, vous connaissez ARIA ? #accessiday

  1. 1. Vous êtes tendance, vous êtes digital, vous connaissez ARIA ? Aurélien Levy (@goetsu)
  2. 2. « Si tu donnes un poisson à un homme, il mangera un jour. Si tu lui apprends à pêcher, il mangera toujours. » Lao Tseu
  3. 3. Pas ça
  4. 4. Ni ça
  5. 5. Mais ça
  6. 6. ARIA c’est quoi? • Role (qu’est ce que c’est ?) • Attributs – State (qu’elle est son état ?) – Propertie (qu’est ce qui le caractérise ?)
  7. 7. Le magicien c’est vous pas le lapin !
  8. 8. ARIA rules • 1- utiliser les éléments HTML sémantique d’abord • 2- ne changer la sémantique d’un élément par un autre que si vous êtes VRAIMENT obligé • 3- toujours penser à rendre utilisable au clavier
  9. 9. ARIA pour vous améliorer
  10. 10. ARIA pour vous sauver d’urgences Victor, nettoyeur.
  11. 11. ARIA pour vous déguiser
  12. 12. Role de type landmarks • Permet de déterminer le role des grandes zones de vos pages • Peuvent être listées par les aides techniques ou permettre de naviguer plus rapidement dans les parties de pages • application • banner • complementary • contentinfo • form • main • navigation • search
  13. 13. Entre les deux role banner, navigation, main, search et contentinfo En patch JS via Jquery $('header').attr('role',’banner'); $('#block-panels-mini-menu-des-4-cat- gories').attr('role','navigation'); $('#zone-content').attr('role','main'); $('#search-block- form').attr('role','search'); $('footer').attr('role','contentinfo'); Le html de départ <header> <div id="block-panels-mini-menu-des-4- categories"> <div id="zone-content" > <div id="search-block-form" > <footer>
  14. 14. Role d’élément • Permet d’affecter un role qui n’existe pas en html ou de corriger la sémantique • Peuvent être restitué par les aides techniques • alert • button • dialog • slider • tooltip • tab • presentation • heading • Etc…
  15. 15. Aria properties • Permet de définir la propriété d’un élément • Sa valeur peut éventuellement varier dans le temps • aria-describedby • aria-label • aria-autocomplete • aria-controls • aria-valuemin • aria-valuemax • aria-valuenow • aria-live • aria-required • Etc…
  16. 16. Aria states • Permet d’associer un état à un élément • Sa valeur peut éventuellement varier dans le temps • aria-busy • aria-disabled • aria-grabbed • aria-invalid • aria-hidden • aria-checked • aria-expanded • aria-selected • aria-pressed
  17. 17. Entre les deux aria-label patch JS via Jquery $('#mini-panel-r_seaux_sociaux img:first').attr('aria- label','page facebook du mémorial - nouvelle fenêtre'); $(".form-item-search-block-form label").text('rechercher dans le site'); $("#edit-submit--2").attr('aria- label','Valider la recheche dans le site'); Le html de départ <a href="https://www.facebook.com/pages /Le-M%C3%A9morial-de- Caen/83213287430" target="_blank"> <img src="/sites/all/themes/m_morial_de _caen/img/rs_facebook.png" style="opaci ty: 1;> </a> <label class="element- invisible" for="edit-search-block-form- -2">Search this site </label> <input id="edit-submit-- 2" class="custom-search-button form- submit" type="image" src="http://www.me morial- caen.fr/sites/default/files/custom_sear ch/recherche.png" value="" name="op" al t="">
  18. 18. Entre les deux role heading, aria-level et aria-hidden En patch JS via Jquery $('.pane-a-la-une-du-sommaire .views-field- title').attr('role','heading').at tr('aria-level','3'); $('.pane-a-la-une-du-sommaire .views-field-field-chapo h2').attr('role','heading').attr( 'aria-level','4'); $(".view-id-a_la_une_du_sommaire .views-field-field-image a").attr('aria-hidden',true); $(".view-id-a_la_une_du_sommaire .views-field-field-image a").attr('tabindex',-1); Le html de départ <div class="views-field views- field-title"> […]La faillite de la paix[…] </div> <div class="views-field views- field-field- chapo"><div class="field- content"><h2>…</h2> <div class="views-field views- field-field-image"> <div class="field-content"> <a href="http://www.memorial- caen.fr/premi%C3%A8re-guerre- mondiale-seconde-guerre-mondiale- histoire">
  19. 19. Entre les deux aria-haspopup, aria-label, focus et tabindex En patch JS via Jquery $(".pane-article-men-princ-home a").attr('aria-haspopup',true); $(".pane-article-men-princ-home a").attr('aria-label','utiliser les flèches haut et bas pour naviguer dans le sous menu'); $(".pane-article-men-princ-home a").keydown(function( e ) { e.preventDefault(); if(e.which == 40){ if($(this).parents('.pane-article- men-princ-home').hasClass('menu1')){ $('#mini-panel- richmenu1').css('display','block'); $('#mini-panel-richmenu1 a').attr('tabindex',-1); $('#mini-panel-richmenu1 a:first').attr('tabindex',0).focus(); }; … } }); Le html et js de départ <a property="rdfs:label skos:prefLabel" typeof="skos:Concept" hre f="http://www.memorial- caen.fr/expositions- %C3%A9v%C3%A8nements" style="background- color: transparent; color: rgb(176, 176, 176);">Expositions & évènements</a> $('.pane-article-men-princ- home.menu1').hover(function() { $(this).find('a').css('background- color','#cb2115').css('color','#fff'); $('#mini-panel- richmenu1').css('display','block'); },function(){ $(this).find('a').css('background- color','transparent').css('color','#b0b0b 0'); $('#mini-panel- richmenu1').css('display','none'); });
  20. 20. Entre les deux role menuitem, focus et tabindex En patch JS via Jquery $("#mini-panel- richmenu1,…").attr('role',"menuitem"); $(".block-panels-mini .views-field-field-image a").attr('aria-hidden',true).attr('tabindex',-1); $("#mini-panel-richmenu4 a,…").keydown(function( e ) { e.preventDefault(); if(e.which == 40){ […] if($currentindex == $totalindex){ if($(this).parents('.block-panels- mini').hasClass('block-richmenu1')){ $('.menu1 a:first').focus(); $('#mini-panel- richmenu1').css('display','none'); $('.block-richmenu1 a').attr('tabindex','0'); }; … } else{ $next.attr('tabindex','0'); $next.focus(); $(this).attr('tabindex','-1'); } Le html de départ <div id="mini-panel- richmenu2" class="panel-display panel- 3col-33 clearfix" style="display: none;"> <div class="panel-panel panel-col-first"> … <a href="http://www.memorial- caen.fr/mus%C3%A9e/institution/pr%C3%A9se ntation-mus%C3%A9e"> <img typeof="foaf:Image" src="./Histoire de la Seconde Guerre mondiale, de la Guerre froide_files/presentation-musee- institution.jpg" alt="Présentation du musee" style="opacity: 0.7;"> </a> … </div> <div class="panel-panel panel- col">…</div> <div class="panel-panel panel-col- last">…</div> … </div>
  21. 21. Oui mais en fait non…
  22. 22. Questions ? aurelien.levy@temesis.com @goetsu

×