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

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

Laurent Naudier

Chef de projet web indépendant

www.bienfaitpourta.com

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

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 !

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

INTRODUCTION A L’ACCESSIBILITÉ WEB

Aussi appelé a11y, notamment sur les réseaux sociaux.

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

a ccessibilit y11 lettres

INTRODUCTION A L’ACCESSIBILITÉ WEB

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

« […] 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

INTRODUCTION A L’ACCESSIBILITÉ WEB

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

« 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

INTRODUCTION A L’ACCESSIBILITÉ WEB

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

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

INTRODUCTION A L’ACCESSIBILITÉ WEB

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

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

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

HALTE AUX PRÉJUGÉS

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

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

HALTE AUX PRÉJUGÉS

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

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

HALTE AUX PRÉJUGÉS

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

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

HALTE AUX PRÉJUGÉS

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

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

HALTE AUX PRÉJUGÉS

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

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

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

HANDICAP ≠ SITUATION DE HANDICAP

Déficience physique ou mentaleCongénitale ou acquise

Souvent permanent

Ce n’est pas du politiquement correctNe concerne pas que les personnes atteintes d’un handicapFait référence à une situation, ponctuelle ou non, pendant laquelle nos compétences sont diminuées

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

LES DIFFÉRENTES FORMES DE HANDICAP

Source : https://www.ocirp.fr/actualites/les-chiffres-cles-du-handicap-en-france

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

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.

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

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)

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

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

LANCEZ VOUS !

Pas besoin d’être un expert !

L’accessibilité, c’est avant tout une question de bon sens.

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

LANCEZ VOUS !

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

LE CHOIX DU THÈME

Sur le répertoire officiel : https://fr.wordpress.org/themes

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

LE CHOIX DU THÈME

Sur ThemeForest : https://themeforest.net/category/wordpress?term=accessibility

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

OPTIMISER SON THÈME

WP Accessibility

https://wordpress.org/plugins/wp-accessibility/

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

OPTIMISER SON THÈME

Divi Accessibility

https://fr.wordpress.org/plugins/accessible-divi

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

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.

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

QUELQUES BONNES PRATIQUES

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

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

QUELQUES BONNES PRATIQUES

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

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

QUELQUES BONNES PRATIQUES

Les images

Remplir le texte alternatif

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

QUELQUES BONNES PRATIQUES

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/

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

QUELQUES BONNES PRATIQUES

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

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

QUELQUES BONNES PRATIQUES

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

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

AUDITER L’ACCESSIBILITÉ DE SON SITE

Outils en ligne :

https://tenon.io/index.phphttp://wave.webaim.orghttps://www.dareboost.com (pas vraiment spécialisé dans l’accessibilité mais plutôt la qualité générale de votre site)

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

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)

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

POUR ALLER PLUS LOIN

En Français :https://github.com/atalan/a11y-resources/blob/master/list-of-a11y-resources.mdhttps://www.accede-web.comhttp://www.accessiweb.org

En anglais : https://webaim.orghttps://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/photostreamSlide 2 : Bien fait pour ta Com’Slide 9 : https://www.flickr.com/photos/stephenyeargin/2600503517Slide 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