SlideShare una empresa de Scribd logo
1 de 48
Descargar para leer sin conexión
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
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
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
Accessibilité : Législation

Dura lex,
sed lex
« La loi est dure, mais c’est la loi »

WordCamp Paris 2014

9/48
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
Chapitre 2
1. État de l'accessibilité
2. HTML
3. CSS
4. Javascript
5. Contenu

WordCamp Paris 2014

11/48
HTML : W3C
●

Validité W3C aide mais ne suffit pas

●

Éviter de détourner le fonctionnement normal

WordCamp Paris 2014

12/48
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
HTML : Contenu en langue étrangère
●

Shortcode : [div lang="en"]Hello World![/div]

●

Idem pour <span>

WordCamp Paris 2014

14/48
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
HTML - Navigation (liens d'évitement)
●

HTML

●

CSS

WordCamp Paris 2014

16/48
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
HTML : Liens (caractères spéciaux)
●

Utiliser CSS pour intégrer des caractères
spéciaux

WordCamp Paris 2014

18/48
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
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
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
HTML : Formulaire (HTML5)
●

Reconnaissance vocale

<input type="text" name="s" x­webkit­speech />

●

Attribut required

WordCamp Paris 2014

22/48
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
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
Chapitre 3
1. État de l'accessibilité
2. HTML
3. CSS
4. Javascript
5. Contenu

WordCamp Paris 2014

25/48
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
CSS : Taille de la police

WordCamp Paris 2014

27/48
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
CSS : Couleurs
●

Pourquoi Facebook est bleu ?

http://edition.cnn.com/2010/TECH/social.media/09/20/zuckerberg.facebook.list/
WordCamp Paris 2014

29/48
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
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
CSS : Cacher en CSS
●

Display:none pas lu par les lecteurs d'écran

●

Alternative :

Source : Bootstrap v3.0.0
WordCamp Paris 2014

32/48
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
CSS : Formulaire
●
●

●

Champ actif mis en valeur
Message « (*) Champs obligatoire » à placer
avant le formulaire
CSS3
–

:valid

–

:invalid

WordCamp Paris 2014

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

WordCamp Paris 2014

35/48
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
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
Javascript : Pièges
●

Attention aux pièges
–

Infinite scrolling

–

Boucle sans fin

–

Événement keyup

–

Événement keydown

–

...

WordCamp Paris 2014

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

WordCamp Paris 2014

39/48
Contenu : Titre de la page
●

Pertinent

●

Pas trop long

WordCamp Paris 2014

40/48
Contenu : Éditeur
●

Respect sémantique

WordCamp Paris 2014

41/48
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
Contenu : Sémantique
●

Ne pas faire de paragraphe ou titre vide

WordCamp Paris 2014

43/48
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
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
Contenu : <iframe>
●

Utiliser un attribut title

WordCamp Paris 2014

46/48
Contenu : Vidéo/Audio
●

Sous-titre

●

Audio-description

●

Retranscription en
langue des signes

●

Éviter autoplay

●

Éviter visionnage en boucle

WordCamp Paris 2014

47/48
Merci de votre attention

WordCamp Paris 2014

48/48

Más contenido relacionado

La actualidad más candente

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
 

La actualidad más candente (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 ?
 

Destacado

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
 

Destacado (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
 

Similar a ♿ 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
 

Similar a ♿ 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
 

♿ 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