Une touche d’accessibilité et d’ergonomie dans vos projets

Une touche d’accessibilité
et d’ergonomie dans vos projets
Benoit Henry (@bhenbe) - Espace ESCO le 30 janvier 2018

Une tendance 2017-2018 ?
Un nouvel argument de vente ?
Un nouveau motif pour se défenestrer ?

Un enjeu social
Une obligation légale dans certains pays
Des outils et services plus simples ?

ça dépend...
Séduction
Performances
Simplicité
Information
Sécurité
Besoins Différences

«[...] Sam passe neuf heures par jour sur le web. Il aime la
recherche et la vérification des faits. L'Internet lui permet
de trouver des informations sur presque n'importe quoi
dans le monde. »
Extrait de Laura Kalbag
«Accessibilité pour tous.»
Mais s’il y avait une chose à retenir, ce serait

Ergonomie: étude de la relation entre l’homme et une
application, un site et la mise en oeuvre de ces
connaissances pour offrir un maximum de confort, de
sécurité et d’efficacité.
Merci Wikipédia.

Accessibilité: adaptation des systèmes numériques dont
les sites web, aux différents types de handicap,
développement d'outils spécifiques tels loupe ou clavier
visuel.
Merci Wikipédia.

Cinq principaux domaines d'invalidité affectent notre
utilisation de sites et d’applications: les déficiences
visuelles, les déficiences auditives, les déficiences
motrices, les déficiences cognitives et les troubles
vestibulaires et crises épileptiques.
Extrait de Laura Kalbag
«Accessibilité pour tous.»

Déficiences visuelles
anomalies de la vision qui affectent la perception des couleurs
perte partielle ou totale de la vision (pour ex: glaucome)
Déficiences auditives
perte partielle ou totale d’audition
> difficulté à écouter un fichier son ou consulter une vidéo
Déficiences motrices
problèmes musculaires et articulaires à divers degrés
> difficultés à utiliser un clavier et incapacité à utiliser un smartphone

Déficiences cognitives
problèmes de mémoire
difficultés à se concentrer
difficultés à traiter des informations et résoudre des problèmes
difficultés à comprendre des textes (pour ex: dyslexie)
difficultés à résoudre des problèmes mathématiques
difficultés à interpréter des informations visuelles (pour ex: dyslexie)
analphabétisme
Troubles vestibulaires
sensibilité parfois aiguë aux animations (pour ex: parallax)

L’invalidité est une perte de capacité mais ne peut pas
uniquement être assimilée à un handicap.
Au quotidien, nous faisons face à des situations où nos
capacités sont diminuées d’une manière ou d’une autre :
situation inconfortable, réseau faible ou inexistant, contexte
bruyant et peu favorable à la concentration, etc.

Internet s’invite désormais à tout moment de la journée à
travers nos smartphones et nos tablettes.
On ne sait plus faire sans.
Non mais, sincèrement, osez me dire le contraire...

L’ergonomie et l’accessibilité s’adressent donc à tout le
monde et consistent à offrir la meilleure expérience
possible à vos audiences, quelles qu’elles soient et dans
n’importe quelle situation.
Et ça, c’est beau.

Améliorez vos pages web !
S’il vous plaît.

Le contenu prime sur le reste.
Un contenu qui n’est pas clair, attractif, pertinent et adapté
au critères de recherche de l’utilisateur a moins de chance
d’avoir un impact positif sur vos audiences.

Vous dialoguez avec des humains !
Vos utilisateurs ont des sentiments, des réactions
inattendues, absurdes et dénuées de toute logique.
Faites-vous une raison...

Le javascript n’est pas votre ennemi.
Beaucoup pensent à tort que le langage Javascript est
responsable de problèmes d’accessibilité. C’est tout le
contraire et il aide à solutionner divers manques.

Ne vous demandez plus Comment ça marche ?
Demandez-vous plutôt Comment ça foire ?
Merci Jeremy Keith.

Le responsive n’est plus une option.

L’accessibilité n’est pas l’opposée du design.

Ne tentez pas de réinventer ce qui n’a pas lieu d’être.
Modifier un acquis pour un effet de style ou se distinguer
risque plus de susciter de l’inconfort que son contraire.

Une palette cohérente et… accessible.
Il convient de définir une
palette couleur à la fois
cohérente avec votre identité
et adaptée aux problèmes que
peuvent rencontrer vos
audiences.
Un bon contraste est gage de
réussite mais cela ne se
résume pas à du noir et blanc.
Testez votre palette. Assurez-
vous que chaque couleur se
distingue l’une de l’autre.
http://carbondesignsystem.com/style/colors/swatches

Evitez les pièges des arrière-plans complexes
Assurez-vous toujours de la
qualité de lecture de vos
textes et surtout si ceux-ci se
superposent à des images.
Des arrière-plans complexes
sont très prisés mais
augmentent la difficulté de
lecture.
Si vous n’êtes pas en capacité
d’offrir un contraste optimal,
optez pour des tailles de texte
plus grandes et grasses.
https://www.ideta.be

Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ?
Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne
?Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ?
Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ?Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ?
Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ?

Optez pour des typos qui ont du rythme
et pas trop de caractère, sans mauvais jeu de mots,
mais avec beaucoup de caractères, par contre !
Parfois plus adaptées pour des phrases courtes.
Parfois idéales pour des textes longs.
Peut-être plus pour des titres.

Il convient de présenter vos textes avec une largeur
comprise entre 50 et 70 caractères, d’une taille de
caractère de 16px minimum et d’une hauteur de ligne de
1.4, soit 1,4 fois la hauteur de caractère. Vos lecteurs
vous remercieront.

Soyez limpide. Utilisez des titres !
Nous lisons rarement des articles complets en ligne.
Pire, certaines pages qui semblent kilométriques nous
découragent instantanément.
Pour des contenus plus long, n’hésitez pas à scinder vos
paragraphes par des titres qui résument leur teneur.
Le lecteur sautera d’un titre à l’autre et lira les
paragraphes qui l’interpèlent, ni plus ni moins.
https://deardesignstudent.com/a-designers-code-of-ethics-f4a88aca9e95

Aérez vos contenu. Créez une grille.
Les marges permettent de
distinguer visuellement les
différents éléments de
contenu qui organisent
chacune de vos pages web.
Elles sont devenu un élément
de design à part entière et
facilite la lecture quand elles
sont utilisées correctement.
Ces marges, associées à une
structure de page (grille) sont
aussi appelées gouttières.
https://medium.com/

Pensez tactile !
Les écrans tactiles ont changé
la donne ces dernières
années.
Les marges ont gagné en
importance afin d’offrir des
zones de clic adaptées au
plus grand nombre.
Proposez des marges
internes et externes
généreuses !
Design inventory - http://atomicdesign.bradfrost.com

La navigation au clavier
Chaque page doit disposer d’un lien
pour accéder directement au contenu
principal de la page en cours.
Votre barre de navigation doit être
accessible au clavier (via la tabulation) et
proposer un ordre de navigation
cohérent.
https://www.smashingmagazine.com/

Des liens que l’on identifie clairement
Un lien doit fournir une information claire
sur son objectif.
On assimile souvent le fait d’ajouter du
texte pour les liseuses d’écran à une lien
comme une des priorités de
l’accessibilité.
Il convient surtout de fournir une
information précise, textuellement et
visuellement, à l’ensemble de vos liens
afin de lever toute ambiguïté sur sa
fonction.
https://www.viget.com/articles/visual-loudness/

Barre de navigation
Une barre de navigation doit refléter la
structure de votre site tout comme le
ferait un plan de site.
Cette démarche va aider vos audiences
à mieux appréhender les contenus
proposés.
Votre navigation se doit d’être claire,
descriptive et aussi brève que possible.

Le chemin de site
Un moteur de recherche nous amène le
plus souvent à une page interne d’un site
web et le chemin de site est un atout
majeur pour se situer rapidement.
Il permet aussi de mieux faire
comprendre la relation qu’il peut y
avoir entre des pages.
Il répond donc aux problèmes que
peuvent rencontrer des personnes qui
souffrent de troubles de la mémoire ou
qui ne disposent pas d’un espace
favorable à la concentration.
Vous êtes ici !

Pour un mieux, envisagez toujours
d’associer vos icônes à du texte.
Même si la plupart des icônes ont été
assimilées par le plus grand nombre, le
bénéfice qu’elles offrent en terme de
place dans un design est à double
tranchant.

Un bon formulaire est...
Un formulaire aussi simple que
possible.
Des champs adaptés au clavier et à
la souris comme au tactile.
Des labels placés idéalement afin de
les associer aux champs qu’ils
décrivent.
Des alertes claires et des messages
d’erreur qui ne laissent place à
aucune interrogation.
https://www.smashingmagazine.com/

Un formulaire doit être pratique et intuitif. Vous ne
tirerez aucun bénéfice à ce qu’il soit visuellement
complexe.
Si le design de vos pages est trop élaboré ou inutile,
prévoyez un nouveau modèle de page dédié à votre
formulaire.
Si votre formulaire semble trop complexe et
rébarbatif au premier coup d’oeil, scindez-le en
étapes.
L’application Slack a opté pour cette solution lorsque
l’on s’identifie. Cette façon de faire offre une illusion
de simplicité très agréable.

Faisez gaffe de les listes déroulantes
Les listes déroulantes sont devenues des
éléments compliqués avec les écrans tactiles.
Les listes de pays ou les sélections de dates
provoquent parfois beaucoup de frustration.
D’autres listes, plus courtes, gagneraient à
être remplacées par des boutons radio ou des
checkbox.
Quoi qu’il en soit, le javascript offre ici de fiers
services en permettant de placer des listes de
suggestions, des sélecteurs de date et plus
d’interaction entre des champs (date de début
-> date de fin, pour exemple).

On oublie souvent ce que
l’on ne voit pas.
Pour autant, ne vous est-il
jamais arrivé de pester en
voyant le résultat d’une page
web imprimée ? Une
consommation inutile
d’encre et de papier…
Tout le monde est
susceptible de vouloir
imprimer une page pour
diverses raisons : une
alternative aux favoris, une
documentation annexe à un
travail ou un service
complémentaire offert à vos
clients.
https://www.felix-immobilier.fr/

Un site se doit d’être performant et d’afficher
l’information attendue en un minimum de
temps. Même si cela parait logique, ce n’est
pas toujours évident à mettre en place.
Divers facteurs peuvent ralentir le chargement
de vos pages : des images ou des vidéos trop
lourdes, des contenus externes, un mauvais
hébergeur, une mauvaise connexion internet,
etc.
Ou comment se la péter grave.

Si vous ne pouvez pas influer sur la lourdeur
de certains de vos contenus, il convient alors
de fournir à vos audiences l’illusion que
l’information est sur le point d’apparaître.
Une animation de chargement vous offre un
sursis supplémentaire et rend vos lecteurs
plus indulgents quant au délai d’affichage de
vos contenus tant que celui-ci reste
raisonnable.
Il en est de même pour la soumission de vos
formulaires, commentaires, avis, etc.

Il existe beaucoup de solutions techniques…
Faites confiance aux professionnels.
Mais pas trop. Ils tombent parfois amoureux
d’une solution qu’ils maîtrisent.
Ne prenez pas tout pour argent comptant.
Des outils gratuits peuvent vous aider :
https://gtmetrix.com/
https://developers.google.com/speed/pagespeed/insights/
https://www.woorank.com/fr

PRENEZ LE TEMPS
DE TESTER VOTRE SITE

Les retours de vos utilisateurs humains

N’oubliez jamais que votre site actuel
n’est que la version beta de votre futur site !
Ne jetez rien. Améliorez ce qui peut l’être !

Merci de m’avoir subi.
Benoit Henry (ce n’est pas moi sur la photo)
contact@bhen.be

Une touche d’accessibilité et d’ergonomie dans vos projets

Recommended

Recommended

More Related Content

Featured

Featured (20)

Une touche d’accessibilité et d’ergonomie dans vos projets