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

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

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 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 si vous êtes VRAIMENT obligé
• 3- toujours penser à rendre utilisable au
clavier

ARIA pour vous sauver d’urgences
Victor, nettoyeur.

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-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="">

Entre les deux role heading, aria-level et aria-hidden
$('.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>
field-field-
chapo"><div class="field-
content"><h2>…</h2>
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
$(".pane-article-men-princ-home
a").attr('aria-haspopup',true);
a").attr('aria-label','utiliser les
flèches haut et bas pour naviguer dans le
sous menu');
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');
});

Entre les deux role menuitem, focus et tabindex
$("#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>

Questions ?
aurelien.levy@temesis.com
@goetsu

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

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (20)

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