L’accessibilité numérique, c'est proposer aux internautes en situation de handicap, que ce soit au niveau moteur, visuel, auditif ou cognitif, un accès au web et une navigation optimale quel que soit leur équipement.

On pense parfois (quand on y pense) que l'accessibilité est un ensemble de techniques à mettre en place au moment de l'intégration et du développement… mais non :)

En réalité, intégrer l'accessibilité commence dès la conception graphique ! C'est pourquoi nous allons parler de design accessible :)

un
design
accessible https://lab.anybodesign.com/wc13/

visuel boite de sardines wordcamp marseille 2017

On commence ?

Souvent, vous verrez que les gens font référence à un truc appelé a11y… sous forme de hashtag sur Twitter, ou tout simplement dans le corps du texte d'un post, d'un commentaire. Mais qu'est-ce que c'est ?

a11y, ça veut dire "accessibility" en anglais. On a le A, la première lettre, et le Y, la dernière. Entre les 2 il y a 11 autres lettres :)

C'est un numéronyme, un mot basé sur des chiffres.

On continue ?

La navigation web, telle que la plupart d'entre nous la pratiquent, est parfois très très très différente de celle d'une personne handicapée.

Par exemple, pour les non-voyants ou mal-voyants les designs graphiques que nous pouvons produire ne vont pas avoir la même importance. Ces personnes vont avoir recours à d'autres technologies pour naviguer, telles que les lecteurs d'écran, des outils qui vont littéralement lire le code source des pages pour les décrire à l'internaute. Ces personnes vont donc "écouter" les pages et les documents du site. Au contraire, pour les sourds et les malentendants, tout ce qui sera audio, notamment les vidéos, devra comporter des sous-titres et une transcription textuelle. On pensera également aux transcriptions textuelles pour les images complexes (infographies). Dans le cas de certains handicaps moteurs, la navigation à la souris ou autre appareil de pointage n'est pas possible… la navigation au clavier (et même certains types bien particuliers de claviers) est donc préférée.

On va donc vite s'apercevoir que notre habillage visuel ne se suffira pas à lui-même pour satisfaire 100% des internautes.

La suite !

Pourquoi se soucier de l'accessibilité ?

S'il ne devait y avoir qu'une seule raison ce serait : le web doit être accessible à tout le monde, quel que soit l'âge, le handicap… c'est même Tim Berners-Lee qui le dit. C'est un des fondements du web.

Il y a aussi d'autres raisons pour s'intéresser et surtout intégrer l'accessibilité dans son workflow. Par exemple il y a en France environ 12 millions de personnes handicapées, mais internautes potentiels… C'est beaucoup plus que le nombre d'utilisateurs d'Internet Explorer 7, 8 et 9 réunis.

Se soucier de l'accessibilité va aussi nous permettre de veiller à la qualité et la validité du code html, et accessoirement, bon nombre de bonnes pratiques sont également bénéfiques pour le référencement.

On passe à la typo maintenant

Lors de la création de notre style guide, on veillera donc à plusieurs choses importantes :

Prévoir des styles pour toutes les balises HTML et une logique pour les niveaux de titre : les lecteurs d'écrans décrire les balises html à l'internaute (listes, citations...). Ne pas oublier les tableaux html, même si aujourd'hui ils ne servent plus à composer les mises en page, ils ont leur utilité, et il ne faut pas oublier de prévoir les intitulés des colonnes (thead, th). Au sujets des niveaux de titres, une bonne hiérarchie à également un effet bénéfique pour l'indexation des pages.

Respecter les règles typographiques : certaines personnes en situation de handicap cognitif (dyslexie, troubles neuro…) peuvent avoir du mal à lire ou à comprendre. On va donc s'efforcer de soigner la présentation au maximum : Accentuer les capitales, car même si en fonction du contexte on peut arriver à "bien lire" on évitera les contresens. Ne pas justifier les textes (césures et blancs difficiles/impossible à gérer), prévoir de bons interlignages et des largeurs de colonnes raisonnables (70 signes env.). Réserver le soulignement pour les liens uniquement (aujourd'hui c'est vraiment un acquis, lorsqu'un mot est souligné on a envie de cliquer dessus)

Prévoir l'agrandissement du texte : ça fâche parfois les designers, mais c'est ainsi : mon Papy il n'arrive pas à lire quand c'est écrit trop petit, alors il grossit le texte. Il faut donc anticiper cette pratique et éviter de contraindre le texte dans des blocs de dimensions fixes.

Typographie

Recette de la bouillabaisse

La bouillabaisse comme à Marseille !
Pour 10 personnes, compter 2h de préparation et 2h de cuisson :)

Ingrédients

Pour les poissons,
écaillés mais non vidés :

600 g de lotte
600 g de rascasse
600 g de congre
600 g de saint-pierre
600 g de vive
600 g de grondin rouge
600 g de cigale de mer

Pour la rouille :

8 gousses d'ail
2 petits piments rouges
25 cl de lait
20 cl d'Huile d'olive
1 tranche de pain de mie

Pour les légumes ! :

10 tomates mûres
8 oignons moyens
2 poireaux
2 bulbes de fenouil
2 aulx
10 brins de persil simple
1 cuillère à café de safran
8 brins de thym
1 feuille de laurier
25 cl d'Huile d'olive
1 cuillère à soupe de gros sel
15 grains de Poivre noir
1 orange séchée

La recette en vidéo

recette de la bouillabaisse — La bouillabaisse marseillaise

Peler, épépiner et concasser les tomates. Hacher les oignons, écraser l'ail. Emincer les blancs de poireaux. Mettre tous ces légumes dans une grande marmite. Vider les poissons, réserver les foies que l'on hachera. Couper les têtes et les queues, couper les pattes des cigales de mer. Ajouter les déchets des poissons (têtes et queues) et les cigales dans la marmite, ajouter 25 cl d'huile d'olive. Mettre également le fenouil, le laurier, le persil, les poivre en grains et la peau d'orange séchée.

Et le reste de la transcription…

Récap'
Nombre de personnes	Temps de préparation
10	4 heures

Préparation

Peler, épépiner et concasser les tomates. Hacher les oignons, écraser l'ail. Emincer les blancs de poireaux. Mettre tous ces légumes dans une grande marmite. Vider les poissons, réserver les foies que l'on hachera. Couper les têtes et les queues, couper les pattes des cigales de mer. Ajouter les déchets des poissons (têtes et queues) et les cigales dans la marmite, ajouter 25 cl d'huile d'olive. Mettre également le fenouil, le laurier, le persil, les poivre en grains et la peau d'orange séchée. (Là c'est un lien)

Couvrir et faire cuire 15 min à feu moyen en remuant de temps en temps.

Faire bouillir 5 l d'eau à part. Mettre la marmite de légumes à vif et y verser l'eau bouillante. Saler, porter à ébullition et baisser le feu. Laisser mijoter 20 min. Au bout de ce temps, écumer passer la soupe au chinois en écrasant bien les légumes et morceaux de poisson. Rajouter le safran.

Couper les poissons en tronçons égaux, ou couper les plus gros en 2 ou 3.

Les faire cuire successivement dans la préparation précédente portée à ébullition sur feu vif : Le congre* cuit environ 10 min, le Saint-pierre 6 min, la lotte 4 min, la rascasse 4 min, le grondin 3 min et la vive 3 min.

Les poissons ne doivent pas être complètement cuits, mais juste à point. Les sortir du bouillon et réserver dès qu'ils sont cuits.

Préparer la rouille :

Faire tremper le pain dans le lait. Eplucher, dégermer et piler l'ail avec les piments rouges épépinés. Rajouter la mie de pain trempée et essorée puis l'huile, sans cesser de piler. Saler, poivrer et délayer avec 1 cuillère à soupe de bouillon.

Pour servir la bouillabaisse : lier le bouillon avec les foies hachés des poissons en fouettant bien. Servir le bouillon lié dans les assiettes, et répartir les morceaux de poissons. Accompagner de tranches de pain de campagne frottées à l'ail et à l'huile et grillées, et de la rouille.

* On dit le palais des congrès !

Pas le palais des congres !

Vous pouvez changer les poissons selon vos goûts, la bouillabaisse se faisait traditionnellement avec la pêche du jour, et ajouter 1/2 verre de pastis dans la bouillabaisse pour accentuer le goût anisé. Vous pouvez également ajouter 1 pomme de terre par personne.

Il est très important d'avoir une logique dans le design de ces éléments afin qu'on puisse identifier rapidement les boutons, les menus etc. Mais il y a aussi d'autres petites choses à prendre en compte.

Zone de clic : prévoir des zones cliquables de taille suffisante pour les utilisateurs ayant des problèmes de précision. Idem sur terminal tactile type smarthpone, penser aux gros doigts :)

Le focus en outline, c'est moche ! : lorsqu'on navigue au clavier, c'est avec la touche "Tab". Chaque pression sur Tab fait passer le focus de lien en lien, et pour qu'on sache où on se trouve, le focus est stylé par défaut sous forme de bordure en pointillés. Souvent, le designer (ou son client) trouve ça extrêmement moche et le supprime avec un bon vieux "outline: none" en CSS ! C'est radical mais il ne faut surtout pas faire ça. On peut très bien remplacer ce outline par autre chose qui soit tout aussi visible. De ce côté on peut laisser libre court à sa créativité, mais il faut impérativement un repère visuel pour le focus. Ce pauvre focus n'est donc pas obligé d'être moche :)

Skiplinks : tant qu'on parle du focus, on a vu qu'en naviguant avec la touche Tab on passe de lien en lien, mais si l'utilisateur souhaite passer directement à la partie contenu il va falloir lui épargner de faire 56 pressions sur la touche si le menu à 56 entrées :) Pour cela il y a les skiplinks, ou liens d'évitement. Ce sont des liens à placer en tout début de page et qui vont, grâce à des ancres, permettre se de rendre directement au menu, à la recherche ou au contenu. Il faut donc penser à un design pour ces liens. On n'est d'ailleurs pas obligé de les afficher en permanence, ils peuvent être hors champs et n'apparaitre qu'au focus.

.current-menu-item : petit détail mais qui a son importance, ne pas oublier un style pour la page ou la catégorie en cours dans les menus. C'est un repère visuel important.

Les liens : que l'on parle de liens hypertextes ou de boutons, de call to action… il faut prévoir de styler tous les états : link, active, hover, focus, visited. On peut aussi prévoir un style graphique différent pour les liens externes, ceux qui vont ouvrir un nouvel onglet, par exemple avec un petit picto.

Navigation

Zone de clic

Prévoir des zones cliquables de taille suffisante pour les utilisateurs ayant des problèmes de précision. Sur les petits terminaux tactile, type smartphones, penser aux gros doigts :)

L'outline, c'est moche

On peut très bien remplacer l'outline par autre chose qui soit tout aussi visible. De ce côté on peut laisser libre court à sa créativité, mais il faut impérativement un repère visuel pour le focus.
Ce pauvre focus n'est pas obligé d'être moche :)

Skiplinks

Ou liens d'évitement. Ce sont des liens à placer en tout début de page et qui vont, grâce à des ancres, permettre à l'utilisateur de se rendre directement au menu, à la recherche ou au contenu.

.current-menu-item

Ne pas oublier un style graphique pour l'item du menu de la page ou de la catégorie en cours. C'est un repère visuel important.

Liens

Il faut prévoir de styler tous les états : link, active, hover, focus, visited.

On peut aussi prévoir un style graphique différent pour les liens externes, ceux qui vont ouvrir un nouvel onglet, par exemple avec un petit picto.

Les formulaires sont très importants car ils permettent d'envoyer/demander des informations, de s'inscrire, de se connecter… C'est pourquoi il est capital que l'accessibilité soit bonne à ce niveau.

Prévoir le focus : comme pour les liens, il va falloir designer tous les états des éléments de formulaire : le champs standard, le champs recevant le focus, et même le champs avec une valeur renseignée, ou un placeholder.

Fieldset, section de formulaire : on peut aussi prévoir un style graphique pour les fieldsets, ou groupes de champs, qui sont des regroupements thématiques de champs, de cases à cocher, et leur balise legend.

Un placeholder n'est pas une étiquette (label) : pour "gagner de la place" le designer à tendance à intégrer les étiquettes dans les champs de formulaire. Ce n'est pas une bonne idée. Ce type de texte est un placeholder : une mention pour aider à comprendre ce qu'il faut saisir dans le champs, ou un exemple de saisie. Le placeholder disparait dès qu'une valeur est renseignée, il est donc parfois malaisé de comprendre à quoi correspond telle ou telle valeur sans les étiquettes qui vont avec, par exemple sur de longs formulaires de profil. Les lecteurs d'écran ont besoin des étiquettes pour indiquer à l'internaute ce qu'il faut saisir, et l'étiquette doit être liée au champ afin qu'en cas de navigation au clavier on sache qu'on est au bon endroit. En CSS on peut styler les étiquettes de bien des manières, l'essentiel c'est qu'ils restent bien lisibles

Affichage des erreurs : enfin, on n'oubliera pas de prévoir des styles pour les champs en erreur de validation. Quelque chose de bien visible et d'explicite. On évitera "les champs en erreurs ont un contour rouge"… car malheureusement, tout le monde ne voit pas les couleurs. La couleur ne suffira pas, il faudra ajouter un picto ou bien une ligne de texte (ce champ est obligatoire, ce champ est invalide… par exemple)

Formulaires

Jeu-concours

Répondez à ce questionnaire et participez à notre grand tirage au sort !
Vous aurez peut-être la chance de gagner votre poids en savon de Marseille :)

Durée de votre séjour

Combien de temps resterez-vous ?

Activité préférée

Football

Pétanque

Apéro

Sieste

Cuisine

Port du marcel

Civilité

M.

Mme

Qui êtes-vous ?

Nom et prénom

Adresse e-mail

Un petit message

Envoyez-moi des nouvelles du sud (vite)

Définir des rapports couleurs pertinents peut être un long travail ! Malheureusement, les personnes ayant des troubles de la perception des couleurs n'est profiteront pas. C'est pourquoi il est impératif de ne jamais induire de sens lié à la couleur !

Un contraste suffisant : la première des tâches qui nous attend c'est de vérifier que nos contrastes sont suffisants. Un texte gris clair sur fond blanc ne sera pas assez contrasté, écrire en blanc sur un fond de couleur claire ne fonctionnera sans doute pas non plus ! Il existe plusieurs outils pour vérifier tout ça :

Le plugin Stark pour les utilisateurs de Sketch est vraiment très bien
Pour Photoshop, il existe aussi Color Contrast Checker
Mais aussi pas mal d'outils en ligne (liste dans le readme sur github)

Une version alternative ? Si l'exigence de notre design est telle qu'on n'arrive pas à trouver d'alternative accessible au niveau des contrastes, alors on peut envisager une feuille de style dédiée pour les forts contrastes. C'est un travail supplémentaire, mais on va pouvoir ajouter à notre header une nouvelle entrée : "Fort contraste". Sur cette feuille de style on pourra prévoir une palette à fort contraste, en noir et blanc ou autre…

Couleurs

Définir des rapports couleurs pertinents peut être un long travail ! Malheureusement, les personnes ayant des troubles de la perception des couleurs n'est profiteront pas. C'est pourquoi il est impératif de ne jamais induire de sens lié à la couleur !

Décrire les images : en HTML on renseignera l'attribut "alt" de la balise image avec une description simple de la photo ou de l'illustration. Au niveau du design on pourra aussi prévoir de styler la balise "figcaption" pour les cas où les images sont explicitement légendées.

Un sens explicite : concernant l'usage des pictogrammes, on remarquera que certains peuvent être assez obscurs ou interprétés de différentes manières. Dans le doute, un intitulé explicite ne sera pas de trop, dans les cas de déficience cognitive notamment. Le pictogramme viendra alors illustrer l'intitulé plutôt que d'exiger que son sens soit deviné.