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 caractérise ?)

Le magicienc’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 si vous êtes VRAIMENT obligé

• 3- toujours penser à rendre utilisable au clavier

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 techniques ou permettre de naviguer plus rapidement dans les parties de pages

• application• banner• complementary• contentinfo• form• main• navigation• search

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>

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…

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…

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

Entre les deux aria-labelpatch 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="opacity: 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.memorial-caen.fr/sites/default/files/custom_search/recherche.png" value="" name="op" alt="">

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').attr('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">

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" href="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','#b0b0b0');

$('#mini-panel-richmenu1').css('display','none');});

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%A9sentation-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>

Oui mais en fait non…

Questions ?

aurelien.levy@temesis.com@goetsu