accessibilité & wordpress - tony archambeau

Accessibilité & WordPressCréer des sites pour tous les utilisateurs

WordCamp Paris 2014

WordCamp Paris 2014 2/48

Tony Archambeau

Développeur web

● Sites web

● Twitter

Qui suisje ?

@TonyArchambeau

infowebmaster.fr

sql.sh

tonyarchambeau.com

https://twitter.com/tonyarchambeau

http://www.infowebmaster.fr/

http://sql.sh/

http://tonyarchambeau.com/


1. État de l'accessibilité

2. HTML

3. CSS

4. Javascript

5. Contenu

Chapitre 1


● Déficience visuelle● Déficience auditive● Déficience moteur● Déficience « mentale »● Autres

Accessibilité : Quelles déficiences ?


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

● 1 personne sur 10 considère avoir un handicap

Accessibilité : Qui ?

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


Accessibilité : Qui ?

Population vieillissante


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

Accessibilité : Déficiences temporaires


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


Accessibilité : Législation

Dura lex,sed lex

« La loi est dure, mais c’est la loi »


● Souris● Clavier● Micro● Clavier

virtuel● Plage braille● Trackball

● Écran● Haut parleur● Synthèse

vocale● Plage braille● Agrandisseur

d'écran

Accessibilité : Interaction avec un site



2. HTML

3. CSS

4. Javascript

5. Contenu

Chapitre 2


● Validité W3C aide mais ne suffit pas● Éviter de détourner le fonctionnement normal

HTML : W3C


● Langue avec l'attribut lang et sens de lecture avec dir– Langue courant sur la balise <html>

– Modifier la langue sur une balise <div>

– Modifier la langue sur une balise <span>

HTML : Langage

<div lang="en">Hello World!</div>

La phrase « <span lang="en">Hello World!</span> » signifie « bonjour le monde »

<html <?php language_attributes(); ?> dir="ltr">


HTML : Contenu en langue étrangère

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

● Idem pour <span>


HTML : Navigation● Prioriser le contenu pour la navigation au

clavier● Attribut tabindex pour changer l'ordre de

navigation

● Fil d'Ariane

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


HTML - Navigation (liens d'évitement)

● HTML

● CSS


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="..." title="titre de l'article">lire la suite</a>

<a href="...">lire la suite<span class="sronly"> de l'article ...</span></a>


HTML : Liens (caractères spéciaux)

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


HTML : Image

● Image informative– Éviter de mettre du texte dans l'image

– Texte alternatif pertinent

● Image d'illustration– Texte alternatif court

● Image de décoration– A placer dans le CSS ou laisser l'attribut alt vide

● Image dans un lien– Le texte alternatif doit servir pour le lien


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>


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


HTML : Formulaire (HTML5)

● Reconnaissance vocale

● Attribut required

<input type="text" name="s" xwebkitspeech />


HTML : Erreur sur un formulaire

● Prévenir plutôt que guérir– Prévenir en javascript

– Comprendre en PHP

– 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


HTML : WAI-ARIA

● Avenir de la sémantique● Attributs « role »

– role="article"

– role="search"

– ...

● Attributs « aria-* » pour les propriétés et états– aria-grabbed

– aria-describedby

– aria-labelledby

– ...



2. HTML

3. CSS

4. Javascript

5. Contenu

Chapitre 3


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

CSS : Taille de la police


CSS : Taille de la police


● 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

CSS : Contraste


CSS : Couleurs

● Pourquoi Facebook est bleu ?

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


● Exemples de dyschromatopsie :

● Ne pas passer d'information par une couleur– Coupler avec texte ou iconographie

CSS : Daltonisme

Original Protanopie Deutéranopie Tritanopie Achromatopsie


● 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

CSS : Police


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

CSS : Cacher en CSS

Source : Bootstrap v3.0.0


● 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

CSS : Liens


● Champ actif mis en valeur● Message « (*) Champs obligatoire » à placer

avant le formulaire● CSS3

– :valid

– :invalid

CSS : Formulaire



2. HTML

3. CSS

4. Javascript

5. Contenu

Chapitre 4


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

Javascript : Général


● Éviter de limiter dans le temps● Laisser le temps aux utilisateurs

– Slider

– Redirection

● Pouvoir augmenter

la limite de temps

Javascript : Actions temporelles


● Attention aux pièges– Infinite scrolling

– Boucle sans fin

– Événement keyup

– Événement keydown

– ...

Javascript : Pièges



2. HTML

3. CSS

4. Javascript

5. Contenu

Chapitre 5


● Pertinent● Pas trop long

Contenu : Titre de la page


● Respect sémantique

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

Contenu : Éditeur


Contenu : Sémantique

● Ne pas faire de paragraphe ou titre vide


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


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


Contenu : <iframe>

● Utiliser un attribut title


Contenu : Vidéo/Audio

● Sous-titre● Audio-description● Retranscription en

langue des signes● Éviter autoplay● Éviter visionnage en boucle


Merci de votre attention

accessibilité & wordpress - tony archambeau

Documents