SlideShare une entreprise Scribd logo
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 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 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-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
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">
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');
});
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>
Oui mais en fait non…
Questions ?
aurelien.levy@temesis.com
@goetsu

Contenu connexe

En vedette

2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot
Marius Sescu
 
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTEverything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
Expeed Software
 
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
Pixeldarts
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
ThinkNow
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
marketingartwork
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
Skeleton Technologies
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
Neil Kimberley
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
contently
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
Albert Qian
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
Kurio // The Social Media Age(ncy)
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
Search Engine Journal
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
SpeakerHub
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
Tessa Mero
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Lily Ray
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
Rajiv Jayarajah, MAppComm, ACC
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
Christy Abraham Joy
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
Vit Horky
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
MindGenius
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
RachelPearson36
 

En vedette (20)

2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot
 
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTEverything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
 
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 

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

  • 1. Vous êtes tendance, vous êtes digital, vous connaissez ARIA ? Aurélien Levy (@goetsu)
  • 2. « Si tu donnes un poisson à un homme, il mangera un jour. Si tu lui apprends à pêcher, il mangera toujours. » Lao Tseu
  • 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.
  • 9. 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
  • 10. ARIA pour vous améliorer
  • 11. ARIA pour vous sauver d’urgences Victor, nettoyeur.
  • 12. ARIA pour vous déguiser
  • 13. 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
  • 14. 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>
  • 15. 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…
  • 16. 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…
  • 17. 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
  • 18. 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="">
  • 19. 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">
  • 20. 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'); });
  • 21. 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>
  • 22. Oui mais en fait non…