Sensibilisation à l'accessibilité web - WPinLille - 13/12/2017

WPinLille #21 – sensibilisation à l’accessibilité web 13/12/2017 @laurent_naudier 1

Laurent Naudier
Chef de projet web indépendant
www.bienfaitpourta.com

DISCLAIMER
 Je ne suis pas un expert accessibilité
 Cette présentation n’est pas une présentation technique
 Elle s’adresse essentiellement aux non développeurs
 Elle n’a pas vocation à faire de vous des experts
N’hésitez pas à m’interrompre si vous avez des questions !

INTRODUCTION A L’ACCESSIBILITÉ WEB
Aussi appelé a11y, notamment sur les réseaux sociaux.

a ccessibilit y
11 lettres

« […] Mettre le Web et ses services à la disposition de tous les individus, quel que soit leur matériel
ou logiciel, leur infrastructure réseau, leur langue maternelle, leur culture, leur localisation
géographique, ou leurs aptitudes physiques ou mentales. »
Tim Berners-Lee, créateur du web

« L’accessibilité du Web signifie que les personnes en situation de handicap peuvent utiliser le
Web.
Plus précisément qu’elles peuvent percevoir, comprendre, naviguer et interagir avec le Web, et
qu’elles peuvent contribuer sur le Web.
L’accessibilité du Web bénéficie aussi à d’autres, notamment les personnes âgées dont les
capacités changent avec l’âge.
L’accessibilité du Web comprend tous les handicaps qui affectent l’accès au Web, ce qui inclut les
handicaps visuels, auditifs, physiques, de parole, cognitifs et neurologiques. »
Web Accessibility Initiative

« L’accessibilité n’est pas une fonctionnalité, mais un processus (une méthode) que l’on intègre
tout au long du cycle de vie d’un projet. »
Pierre Guillou
(responsable de la cellule accessibilité de l’association BrailleNet)

L’accessibilité, ce n’est pas que pour les aveugles
HALTE AUX PRÉJUGÉS

L’accessibilité, ce n’est pas que pour les personnes en fauteuil roulant

L’accessibilité, ce n’est pas que pour les vieux

L’accessibilité, ce n’est pas que pour 3 pelés et 1 tondu

L’accessibilité, c’est pour tout le monde…

QUELQUES CHIFFRES
12 millions de personnes sont touchées par un handicap en France
80% des handicaps sont invisibles… alors que le fauteuil roulant est LE signe du
handicap
15 000 enfants naissent handicapés chaque année (soit environ 2% des naissances)
Source : https://www.ocirp.fr/actualites/les-chiffres-cles-du-handicap-en-france

HANDICAP ≠ SITUATION DE HANDICAP
Déficience physique ou mentale
Congénitale ou acquise
Souvent permanent
Ce n’est pas du politiquement correct
Ne concerne pas que les personnes atteintes d’un handicap
Fait référence à une situation, ponctuelle ou non, pendant
laquelle nos compétences sont diminuées

LES DIFFÉRENTES FORMES DE HANDICAP
Source : https://www.ocirp.fr/actualites/les-chiffres-cles-du-handicap-en-france

Quelques exemples de situation de handicap :
A la fin de la journée, j’ai les yeux
fatigués et j’ai du mal à lire les petits
caractères sur mon écran d’ordinateur
Il m’arrive pour mon métier de regarder
des conférences sur Internet, mais je ne
peux pas mettre de son et je n’ai pas de
prise casque
Je me suis cassé le poignet au
basket et depuis j’ai du mal à
utiliser la souris de mon
ordinateur
Je suis dyslexique, et j’ai beaucoup
de mal à lire les contenus de
certains sites web.
J’habite dans une zone blanche, et je
ne peux pas acheter de billets de train
pour aller voir mon petit fils.

LA RÉGLEMENTATION
Obligatoire pour les sites publics de l'État, des collectivités territoriales et
des établissements publics qui en dépendent.
Référentiel de base : RGAA
(Référentiel Général d’Accessibilité pour les Administrations)

LANCEZ VOUS !
Pas besoin d’être un expert !
L’accessibilité, c’est avant tout une question de bon sens.

LANCEZ VOUS !

LE CHOIX DU THÈME
Sur le répertoire officiel :
https://fr.wordpress.org/themes

LE CHOIX DU THÈME
Sur ThemeForest :
https://themeforest.net/category/wordpress?term=accessibility

OPTIMISER SON THÈME
WP Accessibility
https://wordpress.org/plugins/wp-accessibility/

OPTIMISER SON THÈME
Divi Accessibility
https://fr.wordpress.org/plugins/accessible-divi

QUELQUES BONNES PRATIQUES
Le contenu
 Structurer et hiérarchiser votre contenu + faire un bon usage des
titres (pas de titre 3 avant un titre 2 ou pas de titre 4 sans titre 3
par exemple)
 Eviter autant que possible le jargon, les abréviations ou les acronymes.

Les liens
 Expliciter le libellé de vos liens :
 Seuls les liens doivent être soulignés
 N’ouvrir un nouvel onglet que si le lien renvoie vers un site tiers
A favoriser A éviter
Cliquez iciLire la suite de l’article sur XXXXX

Les images
 Remplir le texte alternatif

Est-ce que l’image contient du texte ?
Est-ce que l’image est purement
décorative ?
Est-ce que l’image représente une action
à effectuer par l’internaute ?
Est-ce que l’image présente une
information qui n’est pas présente ailleurs
dans la page ?
Oui
Oui
Oui
Non
Non
Non
Non
Reprendre le texte de l’image
Laisser le texte alternatif vide
Reprendre le libellé de l’action à effectuer (ex :
ajouter au panier)
Est-ce que l’image est purement
informative ?
Oui
Non
Le texte alternatif doit contenir la même information
que l’image.
Laisser le texte alternatif vide
Source : traduction personnelle du schéma présent sur le site https://bitsofco.de/alternative-text-and-images/

Eléments multimédia et interactifs
 Prévoir un moyen de mettre en pause les sliders
 Ne pas avoir d’éléments qui bougent dans tous les sens ou qui clignotent
 Ne pas lancer les vidéos ou les fichiers audio automatiquement
 Si possible, ajouter des sous-titres à vos vidéos

Les formulaires
 Indiquer un libellé pour chaque champ
 Indiquer des messages d’erreurs clairs
 Préciser les formats attendus (pour les dates, numéro de téléphone…)

AUDITER L’ACCESSIBILITÉ DE SON SITE
Outils en ligne :
https://tenon.io/index.php
http://wave.webaim.org
https://www.dareboost.com (pas vraiment spécialisé dans l’accessibilité mais
plutôt la qualité générale de votre site)

AUDITER L’ACCESSIBILITÉ DE SON SITE
Extensions
Assistant RGAA (https://github.com/DISIC/assistant-rgaa - Chrome & Firefox)
aXe Developer Tools (https://www.deque.com/products/axe - Chrome & Firefox)
a11y.ccs (https://github.com/ffoodd/a11y.css- Chrome & Firefox)
Access Monitor (https://wordpress.org/plugins/access-monitor - extension WordPress)

POUR ALLER PLUS LOIN
En Français :
https://github.com/atalan/a11y-resources/blob/master/list-of-a11y-resources.md
https://www.accede-web.com
http://www.accessiweb.org
En anglais :
https://webaim.org
https://a11yproject.com/

WPinLille #21 – sensibilisation à l’accessibilité web 13/12/2017 @laurent_naudier
MERCI DE VOTRE ATTENTION

WPinLille #21 – sensibilisation à l’accessibilité web 13/12/2017 @laurent_naudier
CRÉDITS PHOTOS
A l’exception du montage photo de la slide 2 qui est la propriété exclusive de Bien fait pour ta Com’, tous les visuels
utilisés dans cette présentation sont sous licence Creative Commons ou sont libre de droits.
Slide 1 : https://www.flickr.com/photos/sozialhelden/13924146942/in/photostream
Slide 2 : Bien fait pour ta Com’
Slide 9 : https://www.flickr.com/photos/stephenyeargin/2600503517
Slide 20 : https://en.blog.wordpress.com/2011/12/20/holiday-backgrounds/
Slide 37 : https://commons.wikimedia.org/wiki/File:Painters_suspended_on_cables_of_the_Brooklyn_Bridge,_on_07_October_1914.png
- Eugene de Salignac – 7 octobre 1914

Sensibilisation à l'accessibilité web - WPinLille - 13/12/2017

Recommandé

Recommandé

Contenu connexe

Similaire à Sensibilisation à l'accessibilité web - WPinLille - 13/12/2017

Similaire à Sensibilisation à l'accessibilité web - WPinLille - 13/12/2017 (20)

Sensibilisation à l'accessibilité web - WPinLille - 13/12/2017