SlideShare une entreprise Scribd logo
Tester le niveau d’accessibilité
d’un thème WordPress
Claire
Bizingre
Qui suis-je ?
Claire Bizingre
Consultante formatrice
Accessibilité numérique et WordPress
@accesbilis
www.accesbilis.fr
Claire Bizingre - WordCamp Paris 2016 2
Rappel sur les usages
Claire Bizingre - WordCamp Paris 2016
Contraste élevé
Grossissement Guide-doigts
Lecteur d’écran
Plage braille
Smartphone
3
Origine des défauts d’accessibilité
Claire Bizingre - WordCamp Paris 2016
Thème
ContenuPlugin
4
Jeu de tests
• Installation d’un site WordPress en local
• Chargement de thèmes gratuits
• Utilisation des sites de démonstration
Claire Bizingre - WordCamp Paris 2016 5
Méthode
• Examen des défauts les plus fréquents
• Définition d’une liste de 15 points à tester
• Tests concernant le design et l’intégration des
gabarits (issus du RGAA et des WCAG)
• Application des tests sur les pages types
• Proposition de corrections
Claire Bizingre - WordCamp Paris 2016 6
Outils automatiques
• Opquast Desktop (temesis)
• aXe DevTools (deque)
• Tenon check (tenon et plugin Access monitor)
• a11y.css (ffoodd)
Claire Bizingre - WordCamp Paris 2016 7
Extensions Firefox
• Firebug
• Web developer
• HeadingsMap
• WCAG Constrast checker
• Accessibility Evaluator for Firefox
Claire Bizingre - WordCamp Paris 2016 8
1. Meta viewport
Extension Firebug, inspecter le contenu de <head>
<meta content="width=device-width, initial-scale=1,
maximum-scale=1, user-scalable=no" name="viewport">
Claire Bizingre - WordCamp Paris 2016
« Ne pas interdire le zoom »
<meta content="width=device-width, initial-scale=1"
name="viewport">
9
2. Les régions
Claire Bizingre - WordCamp Paris 2016
Extension Web Developer,
Menu Infos, Afficher les rôles ARIA
10
Vérifier le code des régions
Extension Firebug, inspecter le code
• Unicité des rôles main, banner, contentinfo, search
• Unicité de la balise <main>
Claire Bizingre - WordCamp Paris 2016
<header role="banner">
<div role="search"><form…>
<nav role="navigation">
<main role="main">
<footer role="contentinfo">
11
3. Les titres
Claire Bizingre - WordCamp Paris 2016
Extension HeadingsMap
• Au moins un titre h1
• Pas de rupture (h2 suivi de h4)
• Hiérarchie cohérente
12
4. Deux moyens de navigation
Menu, Plan de site, Moteur de recherche
Claire Bizingre - WordCamp Paris 2016
Au même endroit, sur toutes les pages
13
5. Les liens icônes
Extension Web developer, Menu Entourer,
Éléments personnalisés, entourer les a et les button
Claire Bizingre - WordCamp Paris 2016
→ Pour aller en haut de la page
→ Pour afficher le menu
14
Détecter les liens icônes vides
Extension Firebug, inspecter le code
<a id="site-scroll-top" href="#top" class="show">
<span class="fa fa-chevron-up"></span>
</a>
Claire Bizingre - WordCamp Paris 2016
« Un lien doit avoir un intitulé »
<a id="site-scroll-top" href="#top" class="show">
<span class="fa fa-chevron-up" aria-hidden="true"></span>
<span class="screen-reader-text">Retour en haut de
page</span>
</a>
15
Texte caché et vocalisé
Pas de display:none, ni de visibility:hidden
https://make.wordpress.org/accessibility
Claire Bizingre - WordCamp Paris 2016
.screen-reader-text { /*WordPress*/
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
}
16
Détecter les liens images vides
Extension Firebug, inspecter le code
<a id="site-scroll-top" href="#top" class="show">
<img src="haut-de-page.png" alt="" />
</a>
Claire Bizingre - WordCamp Paris 2016
« L’alternative textuelle ne doit pas être vide »
<a id="site-scroll-top" href="#top" class="show">
<img src="haut-de-page.png" alt="Retour en haut de
page" />
</a>
17
6. Title identique au lien
Extension Web Developer
Menu Infos, Afficher les attributs title
Claire Bizingre - WordCamp Paris 2016
Pas d’attribut title identique à l’intitulé du lien
(exception pour les lien icônes/images)
18
7. Liens « lire la suite »
Extension Web Developer,
Menu Infos, Afficher les attributs title
Claire Bizingre - WordCamp Paris 2016 19
Vérifier le code du lien
Extension Firebug, Inspecter le lien
<a href="url-article" class="more-link">
Lire la suite</a>
Claire Bizingre - WordCamp Paris 2016
« Rendre explicite le lien »
<a href="url-article" class="more-link">
<span class="screen-reader-text">Bonjour tout
le monde !</span> Lire la suite</a>
20
Autre solution
Utilisation de l’attribut title
<a href="url-article" class="more-link" title="Bonjour
tout le monde ! (Lire la suite)"> Lire la suite</a>
Claire Bizingre - WordCamp Paris 2016
Utilisation de l’attribut aria-label
<a href="url-article" class="more-link" aria-
label="Bonjour tout le monde ! (Lire la suite)"> Lire la
suite</a>
21
8. Ouverture d’une fenêtre
Extension Web Developer,
Menu Infos, Afficher les infos des liens,
Rechercher target="_blank"
Claire Bizingre - WordCamp Paris 2016 22
Avertir de l’ouverture d’une fenêtre
Autre solution : l’attribut aria-label
Claire Bizingre - WordCamp Paris 2016
<p>Propulsé par <a target="_blank"
href="http://www.wordpress.org"
title="WordPress (nouvelle fenêtre)">
WordPress</a>
</p>
Utilisation de l’attribut title
23
9. Visibilité du focus clavier
Positionner la souris sur la barre d’adresse
Utiliser la touche TAB et shift TAB
Claire Bizingre - WordCamp Paris 2016
Attention à :
:focus{
outline:none;
}
:hover associé à :focus
24
10. Menu de navigation
Positionner la souris sur la barre d’adresse
Utiliser la touche TAB et shift TAB
Voir si les sous-menus sont manipulables au clavier
Claire Bizingre - WordCamp Paris 2016 25
11. Liens d’évitement
Positionner la souris sur la barre d’adresse
Utiliser la touche TAB et shift TAB
Au moins un lien "aller au contenu" doit apparaître
Claire Bizingre - WordCamp Paris 2016 26
Intégrer les liens d’évitement
• Premier élément interactif
• "Aller au menu", "Aller à la recherche" si éloigné
• Attention à la traduction
• Doit être fonctionnel
Claire Bizingre - WordCamp Paris 2016
<a href="#content" class="screen-reader-text"> Aller
au contenu</a>
<main id="content" role="main" tabindex="-1" />
27
Rendre visible le lien d’évitement
Claire Bizingre - WordCamp Paris 2016
.screen-reader-text:focus {
display:block;
clip: auto !important;
height: auto;
left: 5px;
top: 5px;
width: auto;
z-index: 100000; /* par dessus WP toolbar. */
}
28
12. Formulaire de recherche
Extension Web Developer
Menu Infos, Afficher les attributs title
Claire Bizingre - WordCamp Paris 2016 29
Attribut title supprimé
Liaison entre étiquette et champ (for, id)
Claire Bizingre - WordCamp Paris 2016
<form role="search" method="get" class="search-form"
action="url">
<label for="search" class="screen-reader-text" >
Rechercher :</label>
<input id="search" name="search" type="text"
value="" placeholder="Recherche…" >
<input type="submit" value="Rechercher">
</form>
30
Autre solution
L’attribut aria-label
Claire Bizingre - WordCamp Paris 2016
<div role="search" >
<form method="get" class="search-form" action="url">
<input name="search" type="text" value=""
placeholder="Recherche…" aria-label="Rechercher">
<input type="submit" value="Rechercher">
</form>
</div>
L’attribut role en dehors
31
13. Couleurs
Claire Bizingre - WordCamp Paris 2016
Extension WCAG Contrast Checker
Ratio 4.5
32
Améliorer le contraste
Tanaguru Contrast-Finder
Claire Bizingre - WordCamp Paris 2016 33
14. Lien visible dans le contenu
WCAG Contrast checker
Ration 3.0
Claire Bizingre - WordCamp Paris 2016 34
15. Présentation du texte
Extension Firebug, inspecter le code CSS
• Texte non justifié
• Interlignage suffisant (1.5)
• Espace entre les paragraphes suffisant
• Largeur de texte raisonnable (80 caractères)
• Pas d’unité px sur la propriété « font-size »
Claire Bizingre - WordCamp Paris 2016 35
Mais aussi
• <html <?php language_attributes(); ?> >
• Contenu de la balise <title> pertinent
• Valider le code
• Attention à la traduction
• Doubler la taille des caractères sans perte d’information
(zoom texte seulement)
• Prévoir l’installation d’un fil d’Ariane (plugin)
Claire Bizingre - WordCamp Paris 2016 36
Solutions
• Thème sur mesure (mu-plugins)
• Thème existant gratuit ou acheté (thème
enfant, copie du thème et modification, mu-
plugins)
Claire Bizingre - WordCamp Paris 2016
Hooks :
add_filter( 'get_search_form', 'my_search_form' );
add_filter( 'the_content_more_link', 'my_morelink' );
add_filter( 'wp_title', 'my_title', 10, 2);
37
Thèmes étudiés
• http://www.templateexpress.com/discovery/
• http://eighties.me/
• http://wptema.se/Aaron/
• http://wpjurist.com/
• http://wpexplorer-demos.com/elegant/
• http://demo.presscustomizr.com/
• http://themegrill.com/themes/spacious/
• https://www.competethemes.com/apex/
Claire Bizingre - WordCamp Paris 2016 38
Pour aller plus loin
• Contenus accessibles : http://gta21.accesbilis.fr séminaire
BrailleNet
• Notices AcceDe Web d’Atalan: http://www.accede-
web.com/
• RGAA : https://references.modernisation.gouv.fr/rgaa-3-0
• WordPress a11y group :
https://make.wordpress.org/accessibility/
Claire Bizingre - WordCamp Paris 2016 39
Merci de votre attention !

Contenu connexe

Tendances

Le graphisme d'un site internet !
Le graphisme d'un site internet !Le graphisme d'un site internet !
Le graphisme d'un site internet !
elaugier
 
Constructeurs de page WordPress
Constructeurs de page WordPressConstructeurs de page WordPress
Constructeurs de page WordPress
Fabrice Ducarme
 
Stephane Jambu - Comment booster le référencement de son site avec le content...
Stephane Jambu - Comment booster le référencement de son site avec le content...Stephane Jambu - Comment booster le référencement de son site avec le content...
Stephane Jambu - Comment booster le référencement de son site avec le content...
SEO CAMP
 
Wcparis 2014 content_chouing2
Wcparis 2014 content_chouing2Wcparis 2014 content_chouing2
Wcparis 2014 content_chouing2Cedric Motte
 
WordPress et la compatibilité mobile - Semrush & SeoMix
WordPress et la compatibilité mobile - Semrush & SeoMixWordPress et la compatibilité mobile - Semrush & SeoMix
WordPress et la compatibilité mobile - Semrush & SeoMix
Daniel Roch - SeoMix
 
Faire de WordPress un atout dans sa sa stratégie webmarketing
Faire de WordPress un atout dans sa sa stratégie webmarketingFaire de WordPress un atout dans sa sa stratégie webmarketing
Faire de WordPress un atout dans sa sa stratégie webmarketing
Daniel Roch - SeoMix
 
Webinar les vraies tendances webdesign pour 2021 et les annees suivantes
Webinar les vraies tendances webdesign pour 2021 et les annees suivantesWebinar les vraies tendances webdesign pour 2021 et les annees suivantes
Webinar les vraies tendances webdesign pour 2021 et les annees suivantes
Julien Dereumaux
 
Audit de site WordPress
Audit de site WordPressAudit de site WordPress
Audit de site WordPress
Daniel Roch - SeoMix
 
Comment passer de SEO à SEO + data
Comment passer de SEO à SEO + dataComment passer de SEO à SEO + data
Comment passer de SEO à SEO + data
SEO CAMP
 
Référencement local - Seocampus 2013 - Mathieu Gheerbrant (SEO Media)
Référencement local - Seocampus 2013 - Mathieu Gheerbrant (SEO Media)Référencement local - Seocampus 2013 - Mathieu Gheerbrant (SEO Media)
Référencement local - Seocampus 2013 - Mathieu Gheerbrant (SEO Media)
Mathieu Gheerbrant
 
CESEO: Certification Expert SEO
CESEO: Certification Expert SEOCESEO: Certification Expert SEO
CESEO: Certification Expert SEO
SEO CAMP
 
Une stratégie SEO propre avec WordPress (sans polluer le web)
Une stratégie SEO propre avec WordPress (sans polluer le web)Une stratégie SEO propre avec WordPress (sans polluer le web)
Une stratégie SEO propre avec WordPress (sans polluer le web)
Daniel Roch - SeoMix
 
Utilisation avancée de Gephi en SEO
Utilisation avancée de Gephi en SEOUtilisation avancée de Gephi en SEO
Utilisation avancée de Gephi en SEO
Daniel Roch - SeoMix
 
Analyse de logs par l'exemple - seocampus 2017
Analyse de logs par l'exemple - seocampus 2017Analyse de logs par l'exemple - seocampus 2017
Analyse de logs par l'exemple - seocampus 2017
Madeline Pinthon
 
Référencement international et SEO en Suisse
Référencement international et SEO en SuisseRéférencement international et SEO en Suisse
Référencement international et SEO en Suisse
David Degrelle - Consultant SEO Expert
 
Projet de développement d'un site sous Drupal par Tamistrians
Projet de développement d'un site sous Drupal par TamistriansProjet de développement d'un site sous Drupal par Tamistrians
Projet de développement d'un site sous Drupal par Tamistrians
Equipe Tamistrians
 
Julien Ringard & Benjamin Thiers - Cannibalisation SEO
Julien Ringard & Benjamin Thiers - Cannibalisation SEO Julien Ringard & Benjamin Thiers - Cannibalisation SEO
Julien Ringard & Benjamin Thiers - Cannibalisation SEO
SEO Camp Association
 
Cv foued-2017-en-fr-ar
Cv foued-2017-en-fr-arCv foued-2017-en-fr-ar
Cv foued-2017-en-fr-ar
Fo Az
 
Quand les api de google deviennent une arme pour notre seo
Quand les api de google deviennent une arme pour notre seoQuand les api de google deviennent une arme pour notre seo
Quand les api de google deviennent une arme pour notre seo
SEO Camp Association
 
Interview Métier : Web Designer / Intégrateur
Interview Métier : Web Designer / Intégrateur Interview Métier : Web Designer / Intégrateur
Interview Métier : Web Designer / Intégrateur
#SUPDEWEB
 

Tendances (20)

Le graphisme d'un site internet !
Le graphisme d'un site internet !Le graphisme d'un site internet !
Le graphisme d'un site internet !
 
Constructeurs de page WordPress
Constructeurs de page WordPressConstructeurs de page WordPress
Constructeurs de page WordPress
 
Stephane Jambu - Comment booster le référencement de son site avec le content...
Stephane Jambu - Comment booster le référencement de son site avec le content...Stephane Jambu - Comment booster le référencement de son site avec le content...
Stephane Jambu - Comment booster le référencement de son site avec le content...
 
Wcparis 2014 content_chouing2
Wcparis 2014 content_chouing2Wcparis 2014 content_chouing2
Wcparis 2014 content_chouing2
 
WordPress et la compatibilité mobile - Semrush & SeoMix
WordPress et la compatibilité mobile - Semrush & SeoMixWordPress et la compatibilité mobile - Semrush & SeoMix
WordPress et la compatibilité mobile - Semrush & SeoMix
 
Faire de WordPress un atout dans sa sa stratégie webmarketing
Faire de WordPress un atout dans sa sa stratégie webmarketingFaire de WordPress un atout dans sa sa stratégie webmarketing
Faire de WordPress un atout dans sa sa stratégie webmarketing
 
Webinar les vraies tendances webdesign pour 2021 et les annees suivantes
Webinar les vraies tendances webdesign pour 2021 et les annees suivantesWebinar les vraies tendances webdesign pour 2021 et les annees suivantes
Webinar les vraies tendances webdesign pour 2021 et les annees suivantes
 
Audit de site WordPress
Audit de site WordPressAudit de site WordPress
Audit de site WordPress
 
Comment passer de SEO à SEO + data
Comment passer de SEO à SEO + dataComment passer de SEO à SEO + data
Comment passer de SEO à SEO + data
 
Référencement local - Seocampus 2013 - Mathieu Gheerbrant (SEO Media)
Référencement local - Seocampus 2013 - Mathieu Gheerbrant (SEO Media)Référencement local - Seocampus 2013 - Mathieu Gheerbrant (SEO Media)
Référencement local - Seocampus 2013 - Mathieu Gheerbrant (SEO Media)
 
CESEO: Certification Expert SEO
CESEO: Certification Expert SEOCESEO: Certification Expert SEO
CESEO: Certification Expert SEO
 
Une stratégie SEO propre avec WordPress (sans polluer le web)
Une stratégie SEO propre avec WordPress (sans polluer le web)Une stratégie SEO propre avec WordPress (sans polluer le web)
Une stratégie SEO propre avec WordPress (sans polluer le web)
 
Utilisation avancée de Gephi en SEO
Utilisation avancée de Gephi en SEOUtilisation avancée de Gephi en SEO
Utilisation avancée de Gephi en SEO
 
Analyse de logs par l'exemple - seocampus 2017
Analyse de logs par l'exemple - seocampus 2017Analyse de logs par l'exemple - seocampus 2017
Analyse de logs par l'exemple - seocampus 2017
 
Référencement international et SEO en Suisse
Référencement international et SEO en SuisseRéférencement international et SEO en Suisse
Référencement international et SEO en Suisse
 
Projet de développement d'un site sous Drupal par Tamistrians
Projet de développement d'un site sous Drupal par TamistriansProjet de développement d'un site sous Drupal par Tamistrians
Projet de développement d'un site sous Drupal par Tamistrians
 
Julien Ringard & Benjamin Thiers - Cannibalisation SEO
Julien Ringard & Benjamin Thiers - Cannibalisation SEO Julien Ringard & Benjamin Thiers - Cannibalisation SEO
Julien Ringard & Benjamin Thiers - Cannibalisation SEO
 
Cv foued-2017-en-fr-ar
Cv foued-2017-en-fr-arCv foued-2017-en-fr-ar
Cv foued-2017-en-fr-ar
 
Quand les api de google deviennent une arme pour notre seo
Quand les api de google deviennent une arme pour notre seoQuand les api de google deviennent une arme pour notre seo
Quand les api de google deviennent une arme pour notre seo
 
Interview Métier : Web Designer / Intégrateur
Interview Métier : Web Designer / Intégrateur Interview Métier : Web Designer / Intégrateur
Interview Métier : Web Designer / Intégrateur
 

En vedette

4 sites communautaires faits avec BuddyPress, WordCamp Paris 2016
4 sites communautaires faits avec BuddyPress, WordCamp Paris 20164 sites communautaires faits avec BuddyPress, WordCamp Paris 2016
4 sites communautaires faits avec BuddyPress, WordCamp Paris 2016
Sylvie Clément
 
Wordcamp paris-2016 : Comment fonctionnent le projet et la communauté open so...
Wordcamp paris-2016 : Comment fonctionnent le projet et la communauté open so...Wordcamp paris-2016 : Comment fonctionnent le projet et la communauté open so...
Wordcamp paris-2016 : Comment fonctionnent le projet et la communauté open so...
Chipway
 
HTTP/2, quels impacts pour mon site WordPress ?
HTTP/2, quels impacts pour mon site WordPress ?HTTP/2, quels impacts pour mon site WordPress ?
HTTP/2, quels impacts pour mon site WordPress ?
Laurent Vergnaud
 
Wordcamp paris 2016 - La REST API, une review technique
Wordcamp paris 2016 - La REST API, une review techniqueWordcamp paris 2016 - La REST API, une review technique
Wordcamp paris 2016 - La REST API, une review technique
Nicolas Juen
 
Architecture de l'information pour WordPress
Architecture de l'information pour WordPressArchitecture de l'information pour WordPress
Architecture de l'information pour WordPress
Benjamin LUPU
 
How to make your WordPress website multilingual - WordCamp Paris 2016
How to make your WordPress website multilingual - WordCamp Paris 2016How to make your WordPress website multilingual - WordCamp Paris 2016
How to make your WordPress website multilingual - WordCamp Paris 2016
Matt Pilarski
 
À quel prix vendre un site WordPress ?
À quel prix vendre un site WordPress ?À quel prix vendre un site WordPress ?
À quel prix vendre un site WordPress ?
Nicolas Richer
 
Les clés pour réussir son site WordPress - SeoMix au WordCamp Paris 2016
Les clés pour réussir son site WordPress - SeoMix au WordCamp Paris 2016Les clés pour réussir son site WordPress - SeoMix au WordCamp Paris 2016
Les clés pour réussir son site WordPress - SeoMix au WordCamp Paris 2016
Daniel Roch - SeoMix
 
Accelerating Sales - Marketing Lessons for Commercial WordPress Plugins
Accelerating Sales - Marketing Lessons for Commercial WordPress PluginsAccelerating Sales - Marketing Lessons for Commercial WordPress Plugins
Accelerating Sales - Marketing Lessons for Commercial WordPress Plugins
Chris Lema
 
Conseil formation Web et accessibilité numérique
Conseil formation Web et accessibilité numériqueConseil formation Web et accessibilité numérique
Conseil formation Web et accessibilité numérique
Claire Bizingre
 
Les points importants pour un seo pertinent avec WordPress
Les points importants pour un seo pertinent avec WordPressLes points importants pour un seo pertinent avec WordPress
Les points importants pour un seo pertinent avec WordPress
Nicolas Mercatili
 
Dicas para Workflow WordPress + JavaScript - WordCamp Salvador
Dicas para Workflow WordPress + JavaScript - WordCamp SalvadorDicas para Workflow WordPress + JavaScript - WordCamp Salvador
Dicas para Workflow WordPress + JavaScript - WordCamp Salvador
Fellyph Cintra
 
Palestra WordCamp RJ 2016 Configure um servidor Nginx de alta performance par...
Palestra WordCamp RJ 2016 Configure um servidor Nginx de alta performance par...Palestra WordCamp RJ 2016 Configure um servidor Nginx de alta performance par...
Palestra WordCamp RJ 2016 Configure um servidor Nginx de alta performance par...
Bruno Rodrigo S. Souza
 
WordPress para Redatores, Jornalistas, Publicitários e Blogueiros
WordPress para Redatores, Jornalistas, Publicitários e BlogueirosWordPress para Redatores, Jornalistas, Publicitários e Blogueiros
WordPress para Redatores, Jornalistas, Publicitários e Blogueiros
Valério Souza
 
Home viva do design da interface até a programação do sistema
Home viva  do design da interface até a programação do sistemaHome viva  do design da interface até a programação do sistema
Home viva do design da interface até a programação do sistema
Leo Baiano
 
Building an Autonomous Website
Building an Autonomous WebsiteBuilding an Autonomous Website
Building an Autonomous Website
vegasgeek
 
WordPress Multisite: Desenvolvendo Portais com Sites Interligados.
WordPress Multisite: Desenvolvendo Portais com Sites Interligados.WordPress Multisite: Desenvolvendo Portais com Sites Interligados.
WordPress Multisite: Desenvolvendo Portais com Sites Interligados.
Nícholas André
 
Building Accessible Websites in WordPress - Birmingham WordCamp 2014
Building Accessible Websites in WordPress - Birmingham WordCamp 2014Building Accessible Websites in WordPress - Birmingham WordCamp 2014
Building Accessible Websites in WordPress - Birmingham WordCamp 2014
Nancy Thanki
 
Como criar conteúdo de qualidade contínuamente sem burn-out
Como criar conteúdo de qualidade contínuamente sem burn-outComo criar conteúdo de qualidade contínuamente sem burn-out
Como criar conteúdo de qualidade contínuamente sem burn-out
Anna Korkman Lopes
 
Pesquisas com usuários, o que desenvolvedores também precisam saber!
Pesquisas com usuários, o que desenvolvedores também precisam saber! Pesquisas com usuários, o que desenvolvedores também precisam saber!
Pesquisas com usuários, o que desenvolvedores também precisam saber!
Daniel Coscarelli
 

En vedette (20)

4 sites communautaires faits avec BuddyPress, WordCamp Paris 2016
4 sites communautaires faits avec BuddyPress, WordCamp Paris 20164 sites communautaires faits avec BuddyPress, WordCamp Paris 2016
4 sites communautaires faits avec BuddyPress, WordCamp Paris 2016
 
Wordcamp paris-2016 : Comment fonctionnent le projet et la communauté open so...
Wordcamp paris-2016 : Comment fonctionnent le projet et la communauté open so...Wordcamp paris-2016 : Comment fonctionnent le projet et la communauté open so...
Wordcamp paris-2016 : Comment fonctionnent le projet et la communauté open so...
 
HTTP/2, quels impacts pour mon site WordPress ?
HTTP/2, quels impacts pour mon site WordPress ?HTTP/2, quels impacts pour mon site WordPress ?
HTTP/2, quels impacts pour mon site WordPress ?
 
Wordcamp paris 2016 - La REST API, une review technique
Wordcamp paris 2016 - La REST API, une review techniqueWordcamp paris 2016 - La REST API, une review technique
Wordcamp paris 2016 - La REST API, une review technique
 
Architecture de l'information pour WordPress
Architecture de l'information pour WordPressArchitecture de l'information pour WordPress
Architecture de l'information pour WordPress
 
How to make your WordPress website multilingual - WordCamp Paris 2016
How to make your WordPress website multilingual - WordCamp Paris 2016How to make your WordPress website multilingual - WordCamp Paris 2016
How to make your WordPress website multilingual - WordCamp Paris 2016
 
À quel prix vendre un site WordPress ?
À quel prix vendre un site WordPress ?À quel prix vendre un site WordPress ?
À quel prix vendre un site WordPress ?
 
Les clés pour réussir son site WordPress - SeoMix au WordCamp Paris 2016
Les clés pour réussir son site WordPress - SeoMix au WordCamp Paris 2016Les clés pour réussir son site WordPress - SeoMix au WordCamp Paris 2016
Les clés pour réussir son site WordPress - SeoMix au WordCamp Paris 2016
 
Accelerating Sales - Marketing Lessons for Commercial WordPress Plugins
Accelerating Sales - Marketing Lessons for Commercial WordPress PluginsAccelerating Sales - Marketing Lessons for Commercial WordPress Plugins
Accelerating Sales - Marketing Lessons for Commercial WordPress Plugins
 
Conseil formation Web et accessibilité numérique
Conseil formation Web et accessibilité numériqueConseil formation Web et accessibilité numérique
Conseil formation Web et accessibilité numérique
 
Les points importants pour un seo pertinent avec WordPress
Les points importants pour un seo pertinent avec WordPressLes points importants pour un seo pertinent avec WordPress
Les points importants pour un seo pertinent avec WordPress
 
Dicas para Workflow WordPress + JavaScript - WordCamp Salvador
Dicas para Workflow WordPress + JavaScript - WordCamp SalvadorDicas para Workflow WordPress + JavaScript - WordCamp Salvador
Dicas para Workflow WordPress + JavaScript - WordCamp Salvador
 
Palestra WordCamp RJ 2016 Configure um servidor Nginx de alta performance par...
Palestra WordCamp RJ 2016 Configure um servidor Nginx de alta performance par...Palestra WordCamp RJ 2016 Configure um servidor Nginx de alta performance par...
Palestra WordCamp RJ 2016 Configure um servidor Nginx de alta performance par...
 
WordPress para Redatores, Jornalistas, Publicitários e Blogueiros
WordPress para Redatores, Jornalistas, Publicitários e BlogueirosWordPress para Redatores, Jornalistas, Publicitários e Blogueiros
WordPress para Redatores, Jornalistas, Publicitários e Blogueiros
 
Home viva do design da interface até a programação do sistema
Home viva  do design da interface até a programação do sistemaHome viva  do design da interface até a programação do sistema
Home viva do design da interface até a programação do sistema
 
Building an Autonomous Website
Building an Autonomous WebsiteBuilding an Autonomous Website
Building an Autonomous Website
 
WordPress Multisite: Desenvolvendo Portais com Sites Interligados.
WordPress Multisite: Desenvolvendo Portais com Sites Interligados.WordPress Multisite: Desenvolvendo Portais com Sites Interligados.
WordPress Multisite: Desenvolvendo Portais com Sites Interligados.
 
Building Accessible Websites in WordPress - Birmingham WordCamp 2014
Building Accessible Websites in WordPress - Birmingham WordCamp 2014Building Accessible Websites in WordPress - Birmingham WordCamp 2014
Building Accessible Websites in WordPress - Birmingham WordCamp 2014
 
Como criar conteúdo de qualidade contínuamente sem burn-out
Como criar conteúdo de qualidade contínuamente sem burn-outComo criar conteúdo de qualidade contínuamente sem burn-out
Como criar conteúdo de qualidade contínuamente sem burn-out
 
Pesquisas com usuários, o que desenvolvedores também precisam saber!
Pesquisas com usuários, o que desenvolvedores também precisam saber! Pesquisas com usuários, o que desenvolvedores também precisam saber!
Pesquisas com usuários, o que desenvolvedores também precisam saber!
 

Similaire à Tester le niveau d'accessibilité d'un thème WordPress

Gestion de projet SEO : comment s'organiser ? - Yannick Bouvard - SEO CAMP'us...
Gestion de projet SEO : comment s'organiser ? - Yannick Bouvard - SEO CAMP'us...Gestion de projet SEO : comment s'organiser ? - Yannick Bouvard - SEO CAMP'us...
Gestion de projet SEO : comment s'organiser ? - Yannick Bouvard - SEO CAMP'us...
SEO CAMP
 
tests, investigations et études SEO - Alexis Rylko - SEO CAMP'us Paris 2021
tests, investigations et études SEO - Alexis Rylko - SEO CAMP'us Paris 2021tests, investigations et études SEO - Alexis Rylko - SEO CAMP'us Paris 2021
tests, investigations et études SEO - Alexis Rylko - SEO CAMP'us Paris 2021
SEO CAMP
 
04 ix d [partiel] - réalisation de trois dispositifs cross-media pérenne pour...
04 ix d [partiel] - réalisation de trois dispositifs cross-media pérenne pour...04 ix d [partiel] - réalisation de trois dispositifs cross-media pérenne pour...
04 ix d [partiel] - réalisation de trois dispositifs cross-media pérenne pour...
Alexandre Rivaux
 
Vue, j’avais pas vu !
Vue, j’avais pas vu !Vue, j’avais pas vu !
Vue, j’avais pas vu !
Bruno Bonnin
 
vue j'avais pas vu !!
vue j'avais pas vu !!vue j'avais pas vu !!
vue j'avais pas vu !!
Manuel Adele
 
Seo Camp'us 2018 - SEO & FRAMEWORK JAVASCRIPT - Philippe Yonnet - Directeur G...
Seo Camp'us 2018 - SEO & FRAMEWORK JAVASCRIPT - Philippe Yonnet - Directeur G...Seo Camp'us 2018 - SEO & FRAMEWORK JAVASCRIPT - Philippe Yonnet - Directeur G...
Seo Camp'us 2018 - SEO & FRAMEWORK JAVASCRIPT - Philippe Yonnet - Directeur G...
Peak Ace
 
Plus de secrets sur le maillage interne E-commerce - Frédérik BOBET - SEO CAM...
Plus de secrets sur le maillage interne E-commerce - Frédérik BOBET - SEO CAM...Plus de secrets sur le maillage interne E-commerce - Frédérik BOBET - SEO CAM...
Plus de secrets sur le maillage interne E-commerce - Frédérik BOBET - SEO CAM...
SEO CAMP
 
SEO CAMP'us Paris 2022 - 6 Tips E-Commerce - Mathieu Chapon.pptx
SEO CAMP'us Paris 2022 - 6 Tips E-Commerce - Mathieu Chapon.pptxSEO CAMP'us Paris 2022 - 6 Tips E-Commerce - Mathieu Chapon.pptx
SEO CAMP'us Paris 2022 - 6 Tips E-Commerce - Mathieu Chapon.pptx
Peak Ace
 
WordCamp Paris 2019
WordCamp Paris 2019 WordCamp Paris 2019
WordCamp Paris 2019
Claire Bizingre
 
Les bonnes pratiques SEO avec PrestaShop et WordPress - CCI Montpellier
Les bonnes pratiques SEO avec PrestaShop et WordPress - CCI MontpellierLes bonnes pratiques SEO avec PrestaShop et WordPress - CCI Montpellier
Les bonnes pratiques SEO avec PrestaShop et WordPress - CCI Montpellier
Nicolas Mercatili
 
Web semantique et e-commerce : la vague va déferler !
Web semantique et e-commerce : la vague va déferler !Web semantique et e-commerce : la vague va déferler !
Web semantique et e-commerce : la vague va déferler !
Antidot
 
Le seo et les redirections d urls
Le seo et les redirections d urlsLe seo et les redirections d urls
Le seo et les redirections d urls
Alexandre Filluzeau
 
Atelier FLUPA UX-Days 2016 - "Test utilisateur d'accessibilité, par vous, pou...
Atelier FLUPA UX-Days 2016 - "Test utilisateur d'accessibilité, par vous, pou...Atelier FLUPA UX-Days 2016 - "Test utilisateur d'accessibilité, par vous, pou...
Atelier FLUPA UX-Days 2016 - "Test utilisateur d'accessibilité, par vous, pou...
Flupa
 
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Peak Ace
 
Cours Google Analytics - IUT Vannes (février 2014)
Cours Google Analytics - IUT Vannes (février 2014)Cours Google Analytics - IUT Vannes (février 2014)
Cours Google Analytics - IUT Vannes (février 2014)
Redpoint
 
Choisir une solution e commerce compatible seo : quelle plateforme vous perme...
Choisir une solution e commerce compatible seo : quelle plateforme vous perme...Choisir une solution e commerce compatible seo : quelle plateforme vous perme...
Choisir une solution e commerce compatible seo : quelle plateforme vous perme...
Philippe YONNET
 
Seo camp day lorraine 2018 - Nancy gregory ambroise
Seo camp day lorraine 2018  - Nancy gregory ambroiseSeo camp day lorraine 2018  - Nancy gregory ambroise
Seo camp day lorraine 2018 - Nancy gregory ambroise
Grégory Ambroise
 
Webconférence SEO le 22 Novembre : Comment optimiser un site Demandware pour ...
Webconférence SEO le 22 Novembre : Comment optimiser un site Demandware pour ...Webconférence SEO le 22 Novembre : Comment optimiser un site Demandware pour ...
Webconférence SEO le 22 Novembre : Comment optimiser un site Demandware pour ...
Peak Ace
 
Amp 2 ans après, quel impact sur votre seo en 2018
Amp 2 ans après, quel impact sur votre seo en 2018Amp 2 ans après, quel impact sur votre seo en 2018
Amp 2 ans après, quel impact sur votre seo en 2018
Peak Ace
 
Comment booster le referencement naturel de votre site en publiant des articl...
Comment booster le referencement naturel de votre site en publiant des articl...Comment booster le referencement naturel de votre site en publiant des articl...
Comment booster le referencement naturel de votre site en publiant des articl...
AXIZ eBusiness
 

Similaire à Tester le niveau d'accessibilité d'un thème WordPress (20)

Gestion de projet SEO : comment s'organiser ? - Yannick Bouvard - SEO CAMP'us...
Gestion de projet SEO : comment s'organiser ? - Yannick Bouvard - SEO CAMP'us...Gestion de projet SEO : comment s'organiser ? - Yannick Bouvard - SEO CAMP'us...
Gestion de projet SEO : comment s'organiser ? - Yannick Bouvard - SEO CAMP'us...
 
tests, investigations et études SEO - Alexis Rylko - SEO CAMP'us Paris 2021
tests, investigations et études SEO - Alexis Rylko - SEO CAMP'us Paris 2021tests, investigations et études SEO - Alexis Rylko - SEO CAMP'us Paris 2021
tests, investigations et études SEO - Alexis Rylko - SEO CAMP'us Paris 2021
 
04 ix d [partiel] - réalisation de trois dispositifs cross-media pérenne pour...
04 ix d [partiel] - réalisation de trois dispositifs cross-media pérenne pour...04 ix d [partiel] - réalisation de trois dispositifs cross-media pérenne pour...
04 ix d [partiel] - réalisation de trois dispositifs cross-media pérenne pour...
 
Vue, j’avais pas vu !
Vue, j’avais pas vu !Vue, j’avais pas vu !
Vue, j’avais pas vu !
 
vue j'avais pas vu !!
vue j'avais pas vu !!vue j'avais pas vu !!
vue j'avais pas vu !!
 
Seo Camp'us 2018 - SEO & FRAMEWORK JAVASCRIPT - Philippe Yonnet - Directeur G...
Seo Camp'us 2018 - SEO & FRAMEWORK JAVASCRIPT - Philippe Yonnet - Directeur G...Seo Camp'us 2018 - SEO & FRAMEWORK JAVASCRIPT - Philippe Yonnet - Directeur G...
Seo Camp'us 2018 - SEO & FRAMEWORK JAVASCRIPT - Philippe Yonnet - Directeur G...
 
Plus de secrets sur le maillage interne E-commerce - Frédérik BOBET - SEO CAM...
Plus de secrets sur le maillage interne E-commerce - Frédérik BOBET - SEO CAM...Plus de secrets sur le maillage interne E-commerce - Frédérik BOBET - SEO CAM...
Plus de secrets sur le maillage interne E-commerce - Frédérik BOBET - SEO CAM...
 
SEO CAMP'us Paris 2022 - 6 Tips E-Commerce - Mathieu Chapon.pptx
SEO CAMP'us Paris 2022 - 6 Tips E-Commerce - Mathieu Chapon.pptxSEO CAMP'us Paris 2022 - 6 Tips E-Commerce - Mathieu Chapon.pptx
SEO CAMP'us Paris 2022 - 6 Tips E-Commerce - Mathieu Chapon.pptx
 
WordCamp Paris 2019
WordCamp Paris 2019 WordCamp Paris 2019
WordCamp Paris 2019
 
Les bonnes pratiques SEO avec PrestaShop et WordPress - CCI Montpellier
Les bonnes pratiques SEO avec PrestaShop et WordPress - CCI MontpellierLes bonnes pratiques SEO avec PrestaShop et WordPress - CCI Montpellier
Les bonnes pratiques SEO avec PrestaShop et WordPress - CCI Montpellier
 
Web semantique et e-commerce : la vague va déferler !
Web semantique et e-commerce : la vague va déferler !Web semantique et e-commerce : la vague va déferler !
Web semantique et e-commerce : la vague va déferler !
 
Le seo et les redirections d urls
Le seo et les redirections d urlsLe seo et les redirections d urls
Le seo et les redirections d urls
 
Atelier FLUPA UX-Days 2016 - "Test utilisateur d'accessibilité, par vous, pou...
Atelier FLUPA UX-Days 2016 - "Test utilisateur d'accessibilité, par vous, pou...Atelier FLUPA UX-Days 2016 - "Test utilisateur d'accessibilité, par vous, pou...
Atelier FLUPA UX-Days 2016 - "Test utilisateur d'accessibilité, par vous, pou...
 
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
 
Cours Google Analytics - IUT Vannes (février 2014)
Cours Google Analytics - IUT Vannes (février 2014)Cours Google Analytics - IUT Vannes (février 2014)
Cours Google Analytics - IUT Vannes (février 2014)
 
Choisir une solution e commerce compatible seo : quelle plateforme vous perme...
Choisir une solution e commerce compatible seo : quelle plateforme vous perme...Choisir une solution e commerce compatible seo : quelle plateforme vous perme...
Choisir une solution e commerce compatible seo : quelle plateforme vous perme...
 
Seo camp day lorraine 2018 - Nancy gregory ambroise
Seo camp day lorraine 2018  - Nancy gregory ambroiseSeo camp day lorraine 2018  - Nancy gregory ambroise
Seo camp day lorraine 2018 - Nancy gregory ambroise
 
Webconférence SEO le 22 Novembre : Comment optimiser un site Demandware pour ...
Webconférence SEO le 22 Novembre : Comment optimiser un site Demandware pour ...Webconférence SEO le 22 Novembre : Comment optimiser un site Demandware pour ...
Webconférence SEO le 22 Novembre : Comment optimiser un site Demandware pour ...
 
Amp 2 ans après, quel impact sur votre seo en 2018
Amp 2 ans après, quel impact sur votre seo en 2018Amp 2 ans après, quel impact sur votre seo en 2018
Amp 2 ans après, quel impact sur votre seo en 2018
 
Comment booster le referencement naturel de votre site en publiant des articl...
Comment booster le referencement naturel de votre site en publiant des articl...Comment booster le referencement naturel de votre site en publiant des articl...
Comment booster le referencement naturel de votre site en publiant des articl...
 

Tester le niveau d'accessibilité d'un thème WordPress

  • 1. Tester le niveau d’accessibilité d’un thème WordPress Claire Bizingre
  • 2. Qui suis-je ? Claire Bizingre Consultante formatrice Accessibilité numérique et WordPress @accesbilis www.accesbilis.fr Claire Bizingre - WordCamp Paris 2016 2
  • 3. Rappel sur les usages Claire Bizingre - WordCamp Paris 2016 Contraste élevé Grossissement Guide-doigts Lecteur d’écran Plage braille Smartphone 3
  • 4. Origine des défauts d’accessibilité Claire Bizingre - WordCamp Paris 2016 Thème ContenuPlugin 4
  • 5. Jeu de tests • Installation d’un site WordPress en local • Chargement de thèmes gratuits • Utilisation des sites de démonstration Claire Bizingre - WordCamp Paris 2016 5
  • 6. Méthode • Examen des défauts les plus fréquents • Définition d’une liste de 15 points à tester • Tests concernant le design et l’intégration des gabarits (issus du RGAA et des WCAG) • Application des tests sur les pages types • Proposition de corrections Claire Bizingre - WordCamp Paris 2016 6
  • 7. Outils automatiques • Opquast Desktop (temesis) • aXe DevTools (deque) • Tenon check (tenon et plugin Access monitor) • a11y.css (ffoodd) Claire Bizingre - WordCamp Paris 2016 7
  • 8. Extensions Firefox • Firebug • Web developer • HeadingsMap • WCAG Constrast checker • Accessibility Evaluator for Firefox Claire Bizingre - WordCamp Paris 2016 8
  • 9. 1. Meta viewport Extension Firebug, inspecter le contenu de <head> <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"> Claire Bizingre - WordCamp Paris 2016 « Ne pas interdire le zoom » <meta content="width=device-width, initial-scale=1" name="viewport"> 9
  • 10. 2. Les régions Claire Bizingre - WordCamp Paris 2016 Extension Web Developer, Menu Infos, Afficher les rôles ARIA 10
  • 11. Vérifier le code des régions Extension Firebug, inspecter le code • Unicité des rôles main, banner, contentinfo, search • Unicité de la balise <main> Claire Bizingre - WordCamp Paris 2016 <header role="banner"> <div role="search"><form…> <nav role="navigation"> <main role="main"> <footer role="contentinfo"> 11
  • 12. 3. Les titres Claire Bizingre - WordCamp Paris 2016 Extension HeadingsMap • Au moins un titre h1 • Pas de rupture (h2 suivi de h4) • Hiérarchie cohérente 12
  • 13. 4. Deux moyens de navigation Menu, Plan de site, Moteur de recherche Claire Bizingre - WordCamp Paris 2016 Au même endroit, sur toutes les pages 13
  • 14. 5. Les liens icônes Extension Web developer, Menu Entourer, Éléments personnalisés, entourer les a et les button Claire Bizingre - WordCamp Paris 2016 → Pour aller en haut de la page → Pour afficher le menu 14
  • 15. Détecter les liens icônes vides Extension Firebug, inspecter le code <a id="site-scroll-top" href="#top" class="show"> <span class="fa fa-chevron-up"></span> </a> Claire Bizingre - WordCamp Paris 2016 « Un lien doit avoir un intitulé » <a id="site-scroll-top" href="#top" class="show"> <span class="fa fa-chevron-up" aria-hidden="true"></span> <span class="screen-reader-text">Retour en haut de page</span> </a> 15
  • 16. Texte caché et vocalisé Pas de display:none, ni de visibility:hidden https://make.wordpress.org/accessibility Claire Bizingre - WordCamp Paris 2016 .screen-reader-text { /*WordPress*/ clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; } 16
  • 17. Détecter les liens images vides Extension Firebug, inspecter le code <a id="site-scroll-top" href="#top" class="show"> <img src="haut-de-page.png" alt="" /> </a> Claire Bizingre - WordCamp Paris 2016 « L’alternative textuelle ne doit pas être vide » <a id="site-scroll-top" href="#top" class="show"> <img src="haut-de-page.png" alt="Retour en haut de page" /> </a> 17
  • 18. 6. Title identique au lien Extension Web Developer Menu Infos, Afficher les attributs title Claire Bizingre - WordCamp Paris 2016 Pas d’attribut title identique à l’intitulé du lien (exception pour les lien icônes/images) 18
  • 19. 7. Liens « lire la suite » Extension Web Developer, Menu Infos, Afficher les attributs title Claire Bizingre - WordCamp Paris 2016 19
  • 20. Vérifier le code du lien Extension Firebug, Inspecter le lien <a href="url-article" class="more-link"> Lire la suite</a> Claire Bizingre - WordCamp Paris 2016 « Rendre explicite le lien » <a href="url-article" class="more-link"> <span class="screen-reader-text">Bonjour tout le monde !</span> Lire la suite</a> 20
  • 21. Autre solution Utilisation de l’attribut title <a href="url-article" class="more-link" title="Bonjour tout le monde ! (Lire la suite)"> Lire la suite</a> Claire Bizingre - WordCamp Paris 2016 Utilisation de l’attribut aria-label <a href="url-article" class="more-link" aria- label="Bonjour tout le monde ! (Lire la suite)"> Lire la suite</a> 21
  • 22. 8. Ouverture d’une fenêtre Extension Web Developer, Menu Infos, Afficher les infos des liens, Rechercher target="_blank" Claire Bizingre - WordCamp Paris 2016 22
  • 23. Avertir de l’ouverture d’une fenêtre Autre solution : l’attribut aria-label Claire Bizingre - WordCamp Paris 2016 <p>Propulsé par <a target="_blank" href="http://www.wordpress.org" title="WordPress (nouvelle fenêtre)"> WordPress</a> </p> Utilisation de l’attribut title 23
  • 24. 9. Visibilité du focus clavier Positionner la souris sur la barre d’adresse Utiliser la touche TAB et shift TAB Claire Bizingre - WordCamp Paris 2016 Attention à : :focus{ outline:none; } :hover associé à :focus 24
  • 25. 10. Menu de navigation Positionner la souris sur la barre d’adresse Utiliser la touche TAB et shift TAB Voir si les sous-menus sont manipulables au clavier Claire Bizingre - WordCamp Paris 2016 25
  • 26. 11. Liens d’évitement Positionner la souris sur la barre d’adresse Utiliser la touche TAB et shift TAB Au moins un lien "aller au contenu" doit apparaître Claire Bizingre - WordCamp Paris 2016 26
  • 27. Intégrer les liens d’évitement • Premier élément interactif • "Aller au menu", "Aller à la recherche" si éloigné • Attention à la traduction • Doit être fonctionnel Claire Bizingre - WordCamp Paris 2016 <a href="#content" class="screen-reader-text"> Aller au contenu</a> <main id="content" role="main" tabindex="-1" /> 27
  • 28. Rendre visible le lien d’évitement Claire Bizingre - WordCamp Paris 2016 .screen-reader-text:focus { display:block; clip: auto !important; height: auto; left: 5px; top: 5px; width: auto; z-index: 100000; /* par dessus WP toolbar. */ } 28
  • 29. 12. Formulaire de recherche Extension Web Developer Menu Infos, Afficher les attributs title Claire Bizingre - WordCamp Paris 2016 29
  • 30. Attribut title supprimé Liaison entre étiquette et champ (for, id) Claire Bizingre - WordCamp Paris 2016 <form role="search" method="get" class="search-form" action="url"> <label for="search" class="screen-reader-text" > Rechercher :</label> <input id="search" name="search" type="text" value="" placeholder="Recherche…" > <input type="submit" value="Rechercher"> </form> 30
  • 31. Autre solution L’attribut aria-label Claire Bizingre - WordCamp Paris 2016 <div role="search" > <form method="get" class="search-form" action="url"> <input name="search" type="text" value="" placeholder="Recherche…" aria-label="Rechercher"> <input type="submit" value="Rechercher"> </form> </div> L’attribut role en dehors 31
  • 32. 13. Couleurs Claire Bizingre - WordCamp Paris 2016 Extension WCAG Contrast Checker Ratio 4.5 32
  • 33. Améliorer le contraste Tanaguru Contrast-Finder Claire Bizingre - WordCamp Paris 2016 33
  • 34. 14. Lien visible dans le contenu WCAG Contrast checker Ration 3.0 Claire Bizingre - WordCamp Paris 2016 34
  • 35. 15. Présentation du texte Extension Firebug, inspecter le code CSS • Texte non justifié • Interlignage suffisant (1.5) • Espace entre les paragraphes suffisant • Largeur de texte raisonnable (80 caractères) • Pas d’unité px sur la propriété « font-size » Claire Bizingre - WordCamp Paris 2016 35
  • 36. Mais aussi • <html <?php language_attributes(); ?> > • Contenu de la balise <title> pertinent • Valider le code • Attention à la traduction • Doubler la taille des caractères sans perte d’information (zoom texte seulement) • Prévoir l’installation d’un fil d’Ariane (plugin) Claire Bizingre - WordCamp Paris 2016 36
  • 37. Solutions • Thème sur mesure (mu-plugins) • Thème existant gratuit ou acheté (thème enfant, copie du thème et modification, mu- plugins) Claire Bizingre - WordCamp Paris 2016 Hooks : add_filter( 'get_search_form', 'my_search_form' ); add_filter( 'the_content_more_link', 'my_morelink' ); add_filter( 'wp_title', 'my_title', 10, 2); 37
  • 38. Thèmes étudiés • http://www.templateexpress.com/discovery/ • http://eighties.me/ • http://wptema.se/Aaron/ • http://wpjurist.com/ • http://wpexplorer-demos.com/elegant/ • http://demo.presscustomizr.com/ • http://themegrill.com/themes/spacious/ • https://www.competethemes.com/apex/ Claire Bizingre - WordCamp Paris 2016 38
  • 39. Pour aller plus loin • Contenus accessibles : http://gta21.accesbilis.fr séminaire BrailleNet • Notices AcceDe Web d’Atalan: http://www.accede- web.com/ • RGAA : https://references.modernisation.gouv.fr/rgaa-3-0 • WordPress a11y group : https://make.wordpress.org/accessibility/ Claire Bizingre - WordCamp Paris 2016 39
  • 40. Merci de votre attention !