1. Vous tes tendance, vous tes digital, vous connaissez ARIA ? Aurlien Levy (@goetsu)

2. Si tu donnes un poisson un homme, il mangera un jour. Si tu lui apprends pcher, il mangera toujours. Lao Tseu 3. Pas a 4. Ni a 5. Mais a 6. ARIA cest quoi? Role (quest ce que cest ?) Attributs State (quelle est son tat ?) Propertie (quest ce qui le caractrise ?) 7. Le magicien cest vous pas le lapin ! 8. ARIA rules 1- utiliser les lments HTML smantique dabord 2- ne changer la smantique dun lment par un autre que si vous tes VRAIMENT oblig 3- toujours penser rendre utilisable au clavier 9. ARIA pour vous amliorer 10. ARIA pour vous sauver durgences Victor, nettoyeur. 11. ARIA pour vous dguiser 12. Role de type landmarks Permet de dterminer le role des grandes zones de vos pages Peuvent tre listes par les aides techniques ou permettre de naviguer plus rapidement dans les parties de pages application banner complementary contentinfo form main navigation search 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 dpart

14. Role dlment Permet daffecter un role qui nexiste pas en html ou de corriger la smantique Peuvent tre restitu par les aides techniques alert button dialog slider tooltip tab presentation heading Etc 15. Aria properties Permet de dfinir la proprit dun lment 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. Aria states Permet dassocier un tat un lment 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. Entre les deux aria-label patch JS via Jquery $('#mini-panel-r_seaux_sociaux img:first').attr('aria- label','page facebook du mmorial - nouvelle fentre'); $(".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 dpart Search this site 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 dpart

[]La faillite de la paix[]

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 flches 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 dpart Expositions & vnements $('.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. 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 dpart 21. Oui mais en fait non 22. Questions ? aurelien.levy@temesis.com @goetsu