View
862
Download
1
Category
Preview:
DESCRIPTION
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
Citation preview
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
Recommended