SlideShare une entreprise Scribd logo

♿ Accessibilité & WordPress : Créer des sites pour tous les utilisateurs

Tony Archambeau
Tony Archambeau
Tony ArchambeauCEO, CTO, Développeur web, Consultant, Growth hacker à Organilog

✮ Présentation pour le WordCamp Paris 2014 ✮ L’accessibilité web : tout le monde en a plus au moins entendu parlé. Mais qui l’utilise vraiment au quotidien ? Tous les acteurs impliquées dans la conception, le développement et la vie d’un site web (rédacteur, blogueur, SEO, SMO ...) devraient être sensibilisées aux différents types de déficiences. Cela permet de mieux comprendre les potentielles situation de handicap sur le web. Cette conférence tend à expliquer les déficiences qui peuvent affecter l'usage d'un site web et détail une série de bonnes pratiques pour coder correctement un thème et un WordPress avec du code adapté pour le HTML, le CSS et le Javascript. Enfin, il est expliqué comment utiliser correctement l'espace administrateur de WordPress (le Back-Office de WordPress) pour qu'un maximum d'internautes et visiteurs puissent consulter le contenu.

♿ Accessibilité & WordPress : Créer des sites pour tous les utilisateurs

1  sur  48
Télécharger pour lire hors ligne
Accessibilité & WordPress
Créer des sites pour tous les utilisateurs
WordCamp Paris 2014
Qui suis­je ?
Tony Archambeau
Développeur web
●

Sites web
infowebmaster.fr
sql.sh
tonyarchambeau.com

●

Twitter
@TonyArchambeau

WordCamp Paris 2014

2/48
Chapitre 1
1. État de l'accessibilité
2. HTML
3. CSS
4. Javascript
5. Contenu

WordCamp Paris 2014

3/48
Accessibilité : Quelles déficiences ?
●

Déficience visuelle

●

Déficience auditive

●

Déficience moteur

●

Déficience « mentale »

●

Autres

WordCamp Paris 2014

4/48
Accessibilité : Qui ?
●

●

1 personne sur 5 considère être limitée dans
ses activités

1 personne sur 10 considère avoir un handicap

http://www.insee.fr/fr/themes/document.asp?ref_id=ip1254

WordCamp Paris 2014

5/48
Accessibilité : Qui ?

Population vieillissante
WordCamp Paris 2014

6/48

Recommandé

Pourquoi et comment améliorer l'accessibilité des sites WordPress - WordCamp ...
Pourquoi et comment améliorer l'accessibilité des sites WordPress - WordCamp ...Pourquoi et comment améliorer l'accessibilité des sites WordPress - WordCamp ...
Pourquoi et comment améliorer l'accessibilité des sites WordPress - WordCamp ...Claire Bizingre
 
Alter way-wordcamp-paris-2014
Alter way-wordcamp-paris-2014Alter way-wordcamp-paris-2014
Alter way-wordcamp-paris-2014ALTER WAY
 
Site WordPress ecommerce Multisite Multilangue
Site WordPress ecommerce Multisite MultilangueSite WordPress ecommerce Multisite Multilangue
Site WordPress ecommerce Multisite MultilangueEmilie LEBRUN
 
Trouvez le Thème WordPress Idéal - WordCamp 2014
Trouvez le Thème WordPress Idéal - WordCamp 2014Trouvez le Thème WordPress Idéal - WordCamp 2014
Trouvez le Thème WordPress Idéal - WordCamp 2014Alex Bortolotti
 
Constructeurs de page WordPress
Constructeurs de page WordPressConstructeurs de page WordPress
Constructeurs de page WordPressFabrice Ducarme
 
Comment travailler sur des projets WordPress pour de gros clients
Comment travailler sur des projets WordPress pour de gros clientsComment travailler sur des projets WordPress pour de gros clients
Comment travailler sur des projets WordPress pour de gros clientsEmilie LEBRUN
 
Tester le niveau d'accessibilité d'un thème WordPress
Tester le niveau d'accessibilité d'un thème WordPressTester le niveau d'accessibilité d'un thème WordPress
Tester le niveau d'accessibilité d'un thème WordPressClaire Bizingre
 

Contenu connexe

Tendances

Wcparis 2014 content_chouing2
Wcparis 2014 content_chouing2Wcparis 2014 content_chouing2
Wcparis 2014 content_chouing2Cedric Motte
 
Wordpress et la sécurité des plugins
Wordpress et la sécurité des pluginsWordpress et la sécurité des plugins
Wordpress et la sécurité des pluginsBoiteaweb
 
Stratégie d'acquisition de trafic (Webisland)
Stratégie d'acquisition de trafic (Webisland)Stratégie d'acquisition de trafic (Webisland)
Stratégie d'acquisition de trafic (Webisland)Daniel Roch - SeoMix
 
Conférence WordPress & E-commerce
Conférence WordPress & E-commerceConférence WordPress & E-commerce
Conférence WordPress & E-commerceFabrice Ducarme
 
Conception de thèmes WordPress : construire et optimiser son espace de travail
Conception de thèmes WordPress : construire  et optimiser son espace de travailConception de thèmes WordPress : construire  et optimiser son espace de travail
Conception de thèmes WordPress : construire et optimiser son espace de travailFrédérique Game
 
L’envers du décor d’un site WooCommerce | WP Tech Nantes
L’envers du décord’un site WooCommerce | WP Tech NantesL’envers du décord’un site WooCommerce | WP Tech Nantes
L’envers du décor d’un site WooCommerce | WP Tech NantesFabrice Ducarme
 
Ouvrir vos plugins aux autres développeurs - WPTech Nantes
Ouvrir vos plugins aux autres développeurs - WPTech NantesOuvrir vos plugins aux autres développeurs - WPTech Nantes
Ouvrir vos plugins aux autres développeurs - WPTech Nantescorsonr
 
Combien coûte un site WordPress ? - Wordcamp Paris 2014
Combien coûte un site WordPress ? - Wordcamp Paris 2014Combien coûte un site WordPress ? - Wordcamp Paris 2014
Combien coûte un site WordPress ? - Wordcamp Paris 2014Thierry Pigot
 
SEO WordPress : Optimiser le référencement naturel
SEO WordPress : Optimiser le référencement naturelSEO WordPress : Optimiser le référencement naturel
SEO WordPress : Optimiser le référencement naturelThierry Pigot
 
[WordCamp Bordeaux] Fusionner sa politique print et web avec WordPress
[WordCamp Bordeaux] Fusionner sa politique print et web avec WordPress[WordCamp Bordeaux] Fusionner sa politique print et web avec WordPress
[WordCamp Bordeaux] Fusionner sa politique print et web avec WordPressSébastien Grillot
 
CESEO: Certification Expert SEO
CESEO: Certification Expert SEOCESEO: Certification Expert SEO
CESEO: Certification Expert SEOSEO CAMP
 
Alphorm.com Support de la Formation Adobe-Illustrator CC , Découverte du vect...
Alphorm.com Support de la Formation Adobe-Illustrator CC , Découverte du vect...Alphorm.com Support de la Formation Adobe-Illustrator CC , Découverte du vect...
Alphorm.com Support de la Formation Adobe-Illustrator CC , Découverte du vect...Alphorm
 
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
 
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
 
Alphorm.com Formation Dreamweaver CC pour les débutants
Alphorm.com Formation Dreamweaver CC pour les débutantsAlphorm.com Formation Dreamweaver CC pour les débutants
Alphorm.com Formation Dreamweaver CC pour les débutantsAlphorm
 
Plus belle la vie avec HTML5 et CSS3 - Paris Web 2010
Plus belle la vie avec HTML5 et CSS3 - Paris Web 2010Plus belle la vie avec HTML5 et CSS3 - Paris Web 2010
Plus belle la vie avec HTML5 et CSS3 - Paris Web 2010Raphaël Goetter
 
Monetiser ses plugins WordPress
Monetiser ses plugins WordPressMonetiser ses plugins WordPress
Monetiser ses plugins WordPressvpratfr
 
Alphorm.com Formation SketchUp 2016 et Artlantis 6 - Atelier architectural
Alphorm.com Formation SketchUp 2016 et Artlantis 6 - Atelier architecturalAlphorm.com Formation SketchUp 2016 et Artlantis 6 - Atelier architectural
Alphorm.com Formation SketchUp 2016 et Artlantis 6 - Atelier architecturalAlphorm
 
Communautés Drupal et WordPress : le choc des titans ?
Communautés Drupal et WordPress : le choc des titans ?Communautés Drupal et WordPress : le choc des titans ?
Communautés Drupal et WordPress : le choc des titans ?Thierry Pigot
 

Tendances (20)

Wcparis 2014 content_chouing2
Wcparis 2014 content_chouing2Wcparis 2014 content_chouing2
Wcparis 2014 content_chouing2
 
Wordpress et la sécurité des plugins
Wordpress et la sécurité des pluginsWordpress et la sécurité des plugins
Wordpress et la sécurité des plugins
 
Stratégie d'acquisition de trafic (Webisland)
Stratégie d'acquisition de trafic (Webisland)Stratégie d'acquisition de trafic (Webisland)
Stratégie d'acquisition de trafic (Webisland)
 
Conférence WordPress & E-commerce
Conférence WordPress & E-commerceConférence WordPress & E-commerce
Conférence WordPress & E-commerce
 
Conception de thèmes WordPress : construire et optimiser son espace de travail
Conception de thèmes WordPress : construire  et optimiser son espace de travailConception de thèmes WordPress : construire  et optimiser son espace de travail
Conception de thèmes WordPress : construire et optimiser son espace de travail
 
L’envers du décor d’un site WooCommerce | WP Tech Nantes
L’envers du décord’un site WooCommerce | WP Tech NantesL’envers du décord’un site WooCommerce | WP Tech Nantes
L’envers du décor d’un site WooCommerce | WP Tech Nantes
 
Ouvrir vos plugins aux autres développeurs - WPTech Nantes
Ouvrir vos plugins aux autres développeurs - WPTech NantesOuvrir vos plugins aux autres développeurs - WPTech Nantes
Ouvrir vos plugins aux autres développeurs - WPTech Nantes
 
Dette technique et WordPress
Dette technique et WordPressDette technique et WordPress
Dette technique et WordPress
 
Combien coûte un site WordPress ? - Wordcamp Paris 2014
Combien coûte un site WordPress ? - Wordcamp Paris 2014Combien coûte un site WordPress ? - Wordcamp Paris 2014
Combien coûte un site WordPress ? - Wordcamp Paris 2014
 
SEO WordPress : Optimiser le référencement naturel
SEO WordPress : Optimiser le référencement naturelSEO WordPress : Optimiser le référencement naturel
SEO WordPress : Optimiser le référencement naturel
 
[WordCamp Bordeaux] Fusionner sa politique print et web avec WordPress
[WordCamp Bordeaux] Fusionner sa politique print et web avec WordPress[WordCamp Bordeaux] Fusionner sa politique print et web avec WordPress
[WordCamp Bordeaux] Fusionner sa politique print et web avec WordPress
 
CESEO: Certification Expert SEO
CESEO: Certification Expert SEOCESEO: Certification Expert SEO
CESEO: Certification Expert SEO
 
Alphorm.com Support de la Formation Adobe-Illustrator CC , Découverte du vect...
Alphorm.com Support de la Formation Adobe-Illustrator CC , Découverte du vect...Alphorm.com Support de la Formation Adobe-Illustrator CC , Découverte du vect...
Alphorm.com Support de la Formation Adobe-Illustrator CC , Découverte du vect...
 
Le graphisme d'un site internet !
Le graphisme d'un site internet !Le graphisme d'un site internet !
Le graphisme d'un site internet !
 
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
 
Alphorm.com Formation Dreamweaver CC pour les débutants
Alphorm.com Formation Dreamweaver CC pour les débutantsAlphorm.com Formation Dreamweaver CC pour les débutants
Alphorm.com Formation Dreamweaver CC pour les débutants
 
Plus belle la vie avec HTML5 et CSS3 - Paris Web 2010
Plus belle la vie avec HTML5 et CSS3 - Paris Web 2010Plus belle la vie avec HTML5 et CSS3 - Paris Web 2010
Plus belle la vie avec HTML5 et CSS3 - Paris Web 2010
 
Monetiser ses plugins WordPress
Monetiser ses plugins WordPressMonetiser ses plugins WordPress
Monetiser ses plugins WordPress
 
Alphorm.com Formation SketchUp 2016 et Artlantis 6 - Atelier architectural
Alphorm.com Formation SketchUp 2016 et Artlantis 6 - Atelier architecturalAlphorm.com Formation SketchUp 2016 et Artlantis 6 - Atelier architectural
Alphorm.com Formation SketchUp 2016 et Artlantis 6 - Atelier architectural
 
Communautés Drupal et WordPress : le choc des titans ?
Communautés Drupal et WordPress : le choc des titans ?Communautés Drupal et WordPress : le choc des titans ?
Communautés Drupal et WordPress : le choc des titans ?
 

En vedette

The code history of WordPress
The code history of WordPressThe code history of WordPress
The code history of WordPressMarko Heijnen
 
Concilier accessibilité et SEO
Concilier accessibilité et SEOConcilier accessibilité et SEO
Concilier accessibilité et SEOSébastien Delorme
 
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ériqueClaire Bizingre
 
Ns petite histoire de ergonomie web
Ns petite histoire de ergonomie webNs petite histoire de ergonomie web
Ns petite histoire de ergonomie webOlivier Rovellotti
 
Bien débuter dans la conception d'un thème WordPress
Bien débuter dans la conception d'un thème WordPressBien débuter dans la conception d'un thème WordPress
Bien débuter dans la conception d'un thème WordPressAurélien Denis
 
Handicap et accessibilité : où en est le e-learning ?
Handicap et  accessibilité : où en est le e-learning ?Handicap et  accessibilité : où en est le e-learning ?
Handicap et accessibilité : où en est le e-learning ?UnI Learning France
 
Choisir les bons Hooks dans vos Développements WordPress
Choisir les bons Hooks dans vos Développements WordPressChoisir les bons Hooks dans vos Développements WordPress
Choisir les bons Hooks dans vos Développements WordPressBoiteaweb
 
Guide moodle handicap [Septembre 2013]
Guide moodle handicap [Septembre 2013]Guide moodle handicap [Septembre 2013]
Guide moodle handicap [Septembre 2013]floriebrange
 
Ergonomie d’un site et navigation de l’internaute : anatomie d’un exemple
Ergonomie d’un site et navigation de l’internaute : anatomie d’un exempleErgonomie d’un site et navigation de l’internaute : anatomie d’un exemple
Ergonomie d’un site et navigation de l’internaute : anatomie d’un exempleSilicomVallee
 

En vedette (10)

The code history of WordPress
The code history of WordPressThe code history of WordPress
The code history of WordPress
 
Concilier accessibilité et SEO
Concilier accessibilité et SEOConcilier accessibilité et SEO
Concilier accessibilité et SEO
 
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
 
Ns petite histoire de ergonomie web
Ns petite histoire de ergonomie webNs petite histoire de ergonomie web
Ns petite histoire de ergonomie web
 
Bien débuter dans la conception d'un thème WordPress
Bien débuter dans la conception d'un thème WordPressBien débuter dans la conception d'un thème WordPress
Bien débuter dans la conception d'un thème WordPress
 
Handicap et accessibilité : où en est le e-learning ?
Handicap et  accessibilité : où en est le e-learning ?Handicap et  accessibilité : où en est le e-learning ?
Handicap et accessibilité : où en est le e-learning ?
 
Choisir les bons Hooks dans vos Développements WordPress
Choisir les bons Hooks dans vos Développements WordPressChoisir les bons Hooks dans vos Développements WordPress
Choisir les bons Hooks dans vos Développements WordPress
 
Guide moodle handicap [Septembre 2013]
Guide moodle handicap [Septembre 2013]Guide moodle handicap [Septembre 2013]
Guide moodle handicap [Septembre 2013]
 
Ergonomie d'un site
Ergonomie d'un siteErgonomie d'un site
Ergonomie d'un site
 
Ergonomie d’un site et navigation de l’internaute : anatomie d’un exemple
Ergonomie d’un site et navigation de l’internaute : anatomie d’un exempleErgonomie d’un site et navigation de l’internaute : anatomie d’un exemple
Ergonomie d’un site et navigation de l’internaute : anatomie d’un exemple
 

Similaire à ♿ Accessibilité & WordPress : Créer des sites pour tous les utilisateurs

Comment récupérer un projet Web pourri ... et réussir à travailler dessus.
Comment récupérer un projet Web pourri ... et réussir à travailler dessus.Comment récupérer un projet Web pourri ... et réussir à travailler dessus.
Comment récupérer un projet Web pourri ... et réussir à travailler dessus.Guillaume RICHARD
 
Bonnes pratiques de developpement en PHP
Bonnes pratiques de developpement en PHPBonnes pratiques de developpement en PHP
Bonnes pratiques de developpement en PHPPascal MARTIN
 
DDD session BrownBagLunch (FR)
DDD session BrownBagLunch (FR)DDD session BrownBagLunch (FR)
DDD session BrownBagLunch (FR)Cyrille Martraire
 
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
 
Référencement & Standards Web : La même direction (PW2009)
Référencement & Standards Web : La même direction (PW2009)Référencement & Standards Web : La même direction (PW2009)
Référencement & Standards Web : La même direction (PW2009)Thierry Régagnon
 
Formation html5 CSS3 offerte par ippon 2014
Formation html5 CSS3 offerte par ippon 2014Formation html5 CSS3 offerte par ippon 2014
Formation html5 CSS3 offerte par ippon 2014Ippon
 
Star d'UX bordeaux #1 - en UXmmersion
Star d'UX bordeaux #1 - en UXmmersion Star d'UX bordeaux #1 - en UXmmersion
Star d'UX bordeaux #1 - en UXmmersion UX Republic Bordeaux
 
Flupa test a11y_16_05_2016s0f2
Flupa test a11y_16_05_2016s0f2Flupa test a11y_16_05_2016s0f2
Flupa test a11y_16_05_2016s0f2vincent aniort
 
Présentation Drupal - Global Training Days
Présentation Drupal - Global Training DaysPrésentation Drupal - Global Training Days
Présentation Drupal - Global Training DaysALTER WAY
 
Alphorm.com support de la formation programmer en C# 6
Alphorm.com support de la formation programmer en C# 6Alphorm.com support de la formation programmer en C# 6
Alphorm.com support de la formation programmer en C# 6Alphorm
 
Cours Licence Pro (Système de gestion de contenu) Partie 2
Cours Licence Pro (Système de gestion de contenu) Partie 2Cours Licence Pro (Système de gestion de contenu) Partie 2
Cours Licence Pro (Système de gestion de contenu) Partie 2Creazzly
 
Microsoft Syntex - Digitalisez vos contenus d'entreprise @MWCP21 20/01/2021
Microsoft Syntex - Digitalisez vos contenus d'entreprise @MWCP21 20/01/2021Microsoft Syntex - Digitalisez vos contenus d'entreprise @MWCP21 20/01/2021
Microsoft Syntex - Digitalisez vos contenus d'entreprise @MWCP21 20/01/2021Sébastien Paulet
 
Etude de cas Lyra Network - Quand la "doc" doit suivre...
Etude de cas Lyra Network - Quand la "doc" doit suivre...Etude de cas Lyra Network - Quand la "doc" doit suivre...
Etude de cas Lyra Network - Quand la "doc" doit suivre...IXIASOFT
 
Construire ensemble un enseignement du front-end pertinent, pédagogique et pé...
Construire ensemble un enseignement du front-end pertinent, pédagogique et pé...Construire ensemble un enseignement du front-end pertinent, pédagogique et pé...
Construire ensemble un enseignement du front-end pertinent, pédagogique et pé...Delphine Malassingne
 
Mener à bien un projet Drupal (Drupagora 2013)
Mener à bien un projet Drupal (Drupagora 2013)Mener à bien un projet Drupal (Drupagora 2013)
Mener à bien un projet Drupal (Drupagora 2013)LaNetscouade
 
Introduction à la gestion de projet
Introduction à la gestion de projetIntroduction à la gestion de projet
Introduction à la gestion de projetlaureno
 
Ged Open Source - Documation 2010
Ged Open Source - Documation 2010Ged Open Source - Documation 2010
Ged Open Source - Documation 2010Thomas Choppy
 
Plonger dans les plugins - WordCamp2015 - FSottolichio
Plonger dans les plugins - WordCamp2015 - FSottolichioPlonger dans les plugins - WordCamp2015 - FSottolichio
Plonger dans les plugins - WordCamp2015 - FSottolichioutopsie
 

Similaire à ♿ Accessibilité & WordPress : Créer des sites pour tous les utilisateurs (20)

Comment récupérer un projet Web pourri ... et réussir à travailler dessus.
Comment récupérer un projet Web pourri ... et réussir à travailler dessus.Comment récupérer un projet Web pourri ... et réussir à travailler dessus.
Comment récupérer un projet Web pourri ... et réussir à travailler dessus.
 
Bonnes pratiques de developpement en PHP
Bonnes pratiques de developpement en PHPBonnes pratiques de developpement en PHP
Bonnes pratiques de developpement en PHP
 
DDD session BrownBagLunch (FR)
DDD session BrownBagLunch (FR)DDD session BrownBagLunch (FR)
DDD session BrownBagLunch (FR)
 
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...
 
Référencement & Standards Web : La même direction (PW2009)
Référencement & Standards Web : La même direction (PW2009)Référencement & Standards Web : La même direction (PW2009)
Référencement & Standards Web : La même direction (PW2009)
 
Formation html5 CSS3 offerte par ippon 2014
Formation html5 CSS3 offerte par ippon 2014Formation html5 CSS3 offerte par ippon 2014
Formation html5 CSS3 offerte par ippon 2014
 
MVC / Frameworks PHP
MVC / Frameworks PHPMVC / Frameworks PHP
MVC / Frameworks PHP
 
Star d'UX bordeaux #1 - en UXmmersion
Star d'UX bordeaux #1 - en UXmmersion Star d'UX bordeaux #1 - en UXmmersion
Star d'UX bordeaux #1 - en UXmmersion
 
4D Summit2013 refactoring
4D Summit2013 refactoring4D Summit2013 refactoring
4D Summit2013 refactoring
 
Flupa test a11y_16_05_2016s0f2
Flupa test a11y_16_05_2016s0f2Flupa test a11y_16_05_2016s0f2
Flupa test a11y_16_05_2016s0f2
 
Présentation Drupal - Global Training Days
Présentation Drupal - Global Training DaysPrésentation Drupal - Global Training Days
Présentation Drupal - Global Training Days
 
Alphorm.com support de la formation programmer en C# 6
Alphorm.com support de la formation programmer en C# 6Alphorm.com support de la formation programmer en C# 6
Alphorm.com support de la formation programmer en C# 6
 
Cours Licence Pro (Système de gestion de contenu) Partie 2
Cours Licence Pro (Système de gestion de contenu) Partie 2Cours Licence Pro (Système de gestion de contenu) Partie 2
Cours Licence Pro (Système de gestion de contenu) Partie 2
 
Microsoft Syntex - Digitalisez vos contenus d'entreprise @MWCP21 20/01/2021
Microsoft Syntex - Digitalisez vos contenus d'entreprise @MWCP21 20/01/2021Microsoft Syntex - Digitalisez vos contenus d'entreprise @MWCP21 20/01/2021
Microsoft Syntex - Digitalisez vos contenus d'entreprise @MWCP21 20/01/2021
 
Etude de cas Lyra Network - Quand la "doc" doit suivre...
Etude de cas Lyra Network - Quand la "doc" doit suivre...Etude de cas Lyra Network - Quand la "doc" doit suivre...
Etude de cas Lyra Network - Quand la "doc" doit suivre...
 
Construire ensemble un enseignement du front-end pertinent, pédagogique et pé...
Construire ensemble un enseignement du front-end pertinent, pédagogique et pé...Construire ensemble un enseignement du front-end pertinent, pédagogique et pé...
Construire ensemble un enseignement du front-end pertinent, pédagogique et pé...
 
Mener à bien un projet Drupal (Drupagora 2013)
Mener à bien un projet Drupal (Drupagora 2013)Mener à bien un projet Drupal (Drupagora 2013)
Mener à bien un projet Drupal (Drupagora 2013)
 
Introduction à la gestion de projet
Introduction à la gestion de projetIntroduction à la gestion de projet
Introduction à la gestion de projet
 
Ged Open Source - Documation 2010
Ged Open Source - Documation 2010Ged Open Source - Documation 2010
Ged Open Source - Documation 2010
 
Plonger dans les plugins - WordCamp2015 - FSottolichio
Plonger dans les plugins - WordCamp2015 - FSottolichioPlonger dans les plugins - WordCamp2015 - FSottolichio
Plonger dans les plugins - WordCamp2015 - FSottolichio
 

Dernier

Pour une Autorité française de l’Intelligence Artificielle (IA)
Pour une Autorité française de l’Intelligence Artificielle (IA)Pour une Autorité française de l’Intelligence Artificielle (IA)
Pour une Autorité française de l’Intelligence Artificielle (IA)benj_2
 
Shelly Qubini Dry Contact Module Z-Wave Manual
Shelly Qubini Dry Contact Module Z-Wave ManualShelly Qubini Dry Contact Module Z-Wave Manual
Shelly Qubini Dry Contact Module Z-Wave ManualDomotica daVinci
 
GenAI dans les professional services - LLM vs RAG
GenAI dans les professional services - LLM vs RAGGenAI dans les professional services - LLM vs RAG
GenAI dans les professional services - LLM vs RAGSally Laouacheria
 
Débrief CES 2024 by Niji
Débrief CES 2024 by NijiDébrief CES 2024 by Niji
Débrief CES 2024 by NijiNiji
 
Extr4.0rdinaire - L'IA, on y va ! - 15/02/2024
Extr4.0rdinaire - L'IA, on y va ! - 15/02/2024Extr4.0rdinaire - L'IA, on y va ! - 15/02/2024
Extr4.0rdinaire - L'IA, on y va ! - 15/02/2024Infopole1
 
Système Satellite et antennes by Bernard KABUATILA.pdf
Système Satellite et antennes by Bernard KABUATILA.pdfSystème Satellite et antennes by Bernard KABUATILA.pdf
Système Satellite et antennes by Bernard KABUATILA.pdfBernardKabuatila
 

Dernier (6)

Pour une Autorité française de l’Intelligence Artificielle (IA)
Pour une Autorité française de l’Intelligence Artificielle (IA)Pour une Autorité française de l’Intelligence Artificielle (IA)
Pour une Autorité française de l’Intelligence Artificielle (IA)
 
Shelly Qubini Dry Contact Module Z-Wave Manual
Shelly Qubini Dry Contact Module Z-Wave ManualShelly Qubini Dry Contact Module Z-Wave Manual
Shelly Qubini Dry Contact Module Z-Wave Manual
 
GenAI dans les professional services - LLM vs RAG
GenAI dans les professional services - LLM vs RAGGenAI dans les professional services - LLM vs RAG
GenAI dans les professional services - LLM vs RAG
 
Débrief CES 2024 by Niji
Débrief CES 2024 by NijiDébrief CES 2024 by Niji
Débrief CES 2024 by Niji
 
Extr4.0rdinaire - L'IA, on y va ! - 15/02/2024
Extr4.0rdinaire - L'IA, on y va ! - 15/02/2024Extr4.0rdinaire - L'IA, on y va ! - 15/02/2024
Extr4.0rdinaire - L'IA, on y va ! - 15/02/2024
 
Système Satellite et antennes by Bernard KABUATILA.pdf
Système Satellite et antennes by Bernard KABUATILA.pdfSystème Satellite et antennes by Bernard KABUATILA.pdf
Système Satellite et antennes by Bernard KABUATILA.pdf
 

♿ Accessibilité & WordPress : Créer des sites pour tous les utilisateurs

  • 1. Accessibilité & WordPress Créer des sites pour tous les utilisateurs WordCamp Paris 2014
  • 2. Qui suis­je ? Tony Archambeau Développeur web ● Sites web infowebmaster.fr sql.sh tonyarchambeau.com ● Twitter @TonyArchambeau WordCamp Paris 2014 2/48
  • 3. Chapitre 1 1. État de l'accessibilité 2. HTML 3. CSS 4. Javascript 5. Contenu WordCamp Paris 2014 3/48
  • 4. Accessibilité : Quelles déficiences ? ● Déficience visuelle ● Déficience auditive ● Déficience moteur ● Déficience « mentale » ● Autres WordCamp Paris 2014 4/48
  • 5. Accessibilité : Qui ? ● ● 1 personne sur 5 considère être limitée dans ses activités 1 personne sur 10 considère avoir un handicap http://www.insee.fr/fr/themes/document.asp?ref_id=ip1254 WordCamp Paris 2014 5/48
  • 6. Accessibilité : Qui ? Population vieillissante WordCamp Paris 2014 6/48
  • 7. Accessibilité : Déficiences temporaires ● Bras dans le plâtre ● Grosse migraine ● Consommation excessive d'alcool ● Perte ou bris de lunettes ● Ordinateur sans haut-parleur ● Souris cassée ● Écran cassé ● Reflet du soleil sur l'écran ● … WordCamp Paris 2014 7/48
  • 8. Accessibilité : Éthique Tous les Hommes naissent et demeurent libres et égaux en droits Déclaration des droits de l’homme et du citoyen de 1789 WordCamp Paris 2014 8/48
  • 9. Accessibilité : Législation Dura lex, sed lex « La loi est dure, mais c’est la loi » WordCamp Paris 2014 9/48
  • 10. Accessibilité : Interaction avec un site ● Souris ● Écran ● Clavier ● Haut parleur ● Micro ● ● Clavier virtuel ● Plage braille ● Trackball WordCamp Paris 2014 ● ● Synthèse vocale Plage braille Agrandisseur d'écran 10/48
  • 11. Chapitre 2 1. État de l'accessibilité 2. HTML 3. CSS 4. Javascript 5. Contenu WordCamp Paris 2014 11/48
  • 12. HTML : W3C ● Validité W3C aide mais ne suffit pas ● Éviter de détourner le fonctionnement normal WordCamp Paris 2014 12/48
  • 13. HTML : Langage ● Langue avec l'attribut lang et sens de lecture avec dir – Langue courant sur la balise <html> <html <?php language_attributes(); ?> dir="ltr"> – Modifier la langue sur une balise <div> <div lang="en">Hello World!</div> – Modifier la langue sur une balise <span> La phrase « <span lang="en">Hello World!</span> »  signifie « bonjour le monde » WordCamp Paris 2014 13/48
  • 14. HTML : Contenu en langue étrangère ● Shortcode : [div lang="en"]Hello World![/div] ● Idem pour <span> WordCamp Paris 2014 14/48
  • 15. HTML : Navigation ● ● Prioriser le contenu pour la navigation au clavier Attribut tabindex pour changer l'ordre de navigation <a href="page1.php" tabindex="2">lien 1</a> <a href="page2.php" tabindex="1">lien 2</a> <a href="page3.php" tabindex="3">lien 3</a> ● Fil d'Ariane WordCamp Paris 2014 15/48
  • 16. HTML - Navigation (liens d'évitement) ● HTML ● CSS WordCamp Paris 2014 16/48
  • 17. HTML - Navigation (liens) ● Cohérence ● Pertinence ● Compréhension. Éviter les mots compliqués, inventés ou les abréviations – Privilégier « Aide » plutôt que « FAQ » – Éviter « lire la suite » ou utiliser une alternative <a href="...">lire la suite<span class="sr­only">  de l'article ...</span></a> <a href="..." title="titre de l'article">lire la  suite</a> WordCamp Paris 2014 17/48
  • 18. HTML : Liens (caractères spéciaux) ● Utiliser CSS pour intégrer des caractères spéciaux WordCamp Paris 2014 18/48
  • 19. HTML : Image ● Image informative – – ● Éviter de mettre du texte dans l'image Texte alternatif pertinent Image d'illustration – ● Image de décoration – ● Texte alternatif court A placer dans le CSS ou laisser l'attribut alt vide Image dans un lien – Le texte alternatif doit servir pour le lien WordCamp Paris 2014 19/48
  • 20. HTML : Tableau ● Utiliser la sémantique : – ● <thead>, <tbody>, <tfoot> et surtout <th> Attributs : – – ● -scope="row" et scope="col" abbr="" Description avec : – Attribut summary (en voie de disparition) – <caption> WordCamp Paris 2014 20/48
  • 21. HTML : Formulaire ● Bonne sémantique ● Ordre logique des champs ● Utiliser <label> ou attribut title pour chaque champ – – ● Attribut placeholder ne suffit pas Pertinence des mots <fieldset> et <legend> pour regrouper les checkbox et boutons radio WordCamp Paris 2014 21/48
  • 22. HTML : Formulaire (HTML5) ● Reconnaissance vocale <input type="text" name="s" x­webkit­speech /> ● Attribut required WordCamp Paris 2014 22/48
  • 23. HTML : Erreur sur un formulaire ● Prévenir plutôt que guérir – – Comprendre en PHP – ● Prévenir en javascript Expliquer avec des mots Message récapitulatif – Texte dans le <title> – Récapitulatif en haut de page – Lien interne pour accéder rapidement au champ ● Message contextuel à côté des champs ayant une erreur ● Pertinence du message d'erreur WordCamp Paris 2014 23/48
  • 24. HTML : WAI-ARIA ● Avenir de la sémantique ● Attributs « role » – – role="search" – ● role="article" ... Attributs « aria-* » pour les propriétés et états – aria-grabbed – aria-describedby – aria-labelledby – ... WordCamp Paris 2014 24/48
  • 25. Chapitre 3 1. État de l'accessibilité 2. HTML 3. CSS 4. Javascript 5. Contenu WordCamp Paris 2014 25/48
  • 26. CSS : Taille de la police ● Taille suffisante – Lecture – Élément cliquable (lien, bouton, scrollbar …) ● Taille relative (em, rem ou %) plutôt qu'absolue (px ou pt) ● Tester si police agrandie – ● Attention aux blocs avec une taille fixe Espace suffisant – Entre les lignes – Entre les paragraphes (1.5em plutôt que 1.2em) WordCamp Paris 2014 26/48
  • 27. CSS : Taille de la police WordCamp Paris 2014 27/48
  • 28. CSS : Contraste ● Bon contraste – ● Ni pas assez, ni trop (éviter #000000 sur #FFFFFF) Attention particulière : – Propriété CSS opacity – Dégradé – Ombre en CSS – Couleur par défaut pour les images de fond – Texte au dessus d'une image WordCamp Paris 2014 28/48
  • 29. CSS : Couleurs ● Pourquoi Facebook est bleu ? http://edition.cnn.com/2010/TECH/social.media/09/20/zuckerberg.facebook.list/ WordCamp Paris 2014 29/48
  • 30. CSS : Daltonisme ● Exemples de dyschromatopsie : Original ● Protanopie Deutéranopie Tritanopie Achromatopsie Ne pas passer d'information par une couleur – Coupler avec texte ou iconographie WordCamp Paris 2014 30/48
  • 31. CSS : Police ● Ne pas mettre en justifier ● Éviter les polices avec serif ● Éviter les textes en italique ● Polices spécifiques pour les dyslexiques – Une open source et une sous licence payante WordCamp Paris 2014 31/48
  • 32. CSS : Cacher en CSS ● Display:none pas lu par les lecteurs d'écran ● Alternative : Source : Bootstrap v3.0.0 WordCamp Paris 2014 32/48
  • 33. CSS : Liens ● Style distinct ● Lien actif : – – ● Utiliser :focus ou la propriété outline Tester Penser au style pour : – .current-menu-item – .current-page-ancestor – .current-post-ancestor – .current-post-parent – .current-menu-parent WordCamp Paris 2014 33/48
  • 34. CSS : Formulaire ● ● ● Champ actif mis en valeur Message « (*) Champs obligatoire » à placer avant le formulaire CSS3 – :valid – :invalid WordCamp Paris 2014 34/48
  • 35. Chapitre 4 1. État de l'accessibilité 2. HTML 3. CSS 4. Javascript 5. Contenu WordCamp Paris 2014 35/48
  • 36. Javascript : Général ● Tester la navigation au clavier – « onfocus » plutôt que « onclick » – Éviter le double clic ● Tester si javascript désactivé ● Attention à la manipulation du DOM ● Attention au focus – Prendre le focus : attribut tabindex="0" – Enlever le focus : attribut tabindex="-1" ● Modifier les attributs WAI-ARIA si nécessaire ● Éviter les polices en <canvas> WordCamp Paris 2014 36/48
  • 37. Javascript : Actions temporelles ● Éviter de limiter dans le temps ● Laisser le temps aux utilisateurs – – ● Slider Redirection Pouvoir augmenter la limite de temps WordCamp Paris 2014 37/48
  • 38. Javascript : Pièges ● Attention aux pièges – Infinite scrolling – Boucle sans fin – Événement keyup – Événement keydown – ... WordCamp Paris 2014 38/48
  • 39. Chapitre 5 1. État de l'accessibilité 2. HTML 3. CSS 4. Javascript 5. Contenu WordCamp Paris 2014 39/48
  • 40. Contenu : Titre de la page ● Pertinent ● Pas trop long WordCamp Paris 2014 40/48
  • 41. Contenu : Éditeur ● Respect sémantique WordCamp Paris 2014 41/48
  • 42. Contenu : Éditeur ● Éviter les doubles espaces entre 2 mots ● Choix des mots adaptés à la cible – Site généraliste : mots compréhensibles de tous – Site spécialisé : autorisé à utiliser des termes plus ciblés ● Casser les grands blocs de texte en paragraphes ● Titres compréhensibles et cohérents ● Hiérarchie des titres WordCamp Paris 2014 42/48
  • 43. Contenu : Sémantique ● Ne pas faire de paragraphe ou titre vide WordCamp Paris 2014 43/48
  • 44. Contenu : Liens ● Ancre pertinente – Télécharger un document : format, poids et langue – Si possible inférieur à 80 caractères ● Possibilité de compléter avec attribut title ● Éviter d'ouvrir dans une nouvelle fenêtre WordCamp Paris 2014 44/48
  • 45. Contenu : Image ● Titre : – ● Utile pour le Back-Office Légende : – – ● Apparaît sous l'image Éviter la redondance avec le texte alternatif Texte alternatif : – Éviter de commencer par « image de ... » – Longue description soit dans le texte ou faire un lien vers une page spécifique à proximité de l'image WordCamp Paris 2014 45/48
  • 46. Contenu : <iframe> ● Utiliser un attribut title WordCamp Paris 2014 46/48
  • 47. Contenu : Vidéo/Audio ● Sous-titre ● Audio-description ● Retranscription en langue des signes ● Éviter autoplay ● Éviter visionnage en boucle WordCamp Paris 2014 47/48
  • 48. Merci de votre attention WordCamp Paris 2014 48/48