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

Accessibilité & WordPress
Créer des sites pour tous les utilisateurs
WordCamp Paris 2014

Qui suisje ?
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
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>

●

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="sronly">
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" xwebkitspeech />

●

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

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

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

Recommended

More Related Content

What's hot

What's hot(20)

Viewers also liked

Viewers also liked(10)

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

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

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