• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
♿ Accessibilité & WordPress : Créer des sites pour tous les utilisateurs
 

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

on

  • 2,502 views

✮ Présentation pour le WordCamp Paris 2014 ✮ ...

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

Statistics

Views

Total Views
2,502
Views on SlideShare
1,755
Embed Views
747

Actions

Likes
2
Downloads
26
Comments
0

6 Embeds 747

http://www.scoop.it 541
http://tonyarchambeau.com 90
http://www.thierry-pigot.fr 56
http://www.entreprise-marketing.fr 40
https://twitter.com 14
http://2014.paris.wordcamp.org 6

Accessibility

Categories

Upload Details

Uploaded via as OpenOffice

Usage Rights

CC Attribution-NonCommercial LicenseCC Attribution-NonCommercial License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • 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