Alsacreations.com - Apprendre - Archives (septembre 2021)
Les dernières ressources publiées sur Alsacreations.com
Les éléments interactifs d'un document web (liens, champs et boutons en général) affichent un contour de couleur lorsqu'ils réagissent à l'événement :focus, c'est à dire au clic, au touch et à la navigation clavier (via la touche Tab par exemple).
Contre toute attente, ce contour n'est ni une bordure (border) ni une ombre portée (box-shadow), mais correspond à la propriété CSS outline.
Oui mais... "c'est moche"
L'ensemble des navigateurs appliquent par défaut un outline visible lors de l'événement :focus, et ce mécanisme a été conçu pour rendre ces éléments accessibles à tous, afin de se repérer lors d'une navigation au clavier.
Durant de nombreuses années nous étions tiraillés entre :
- Les têtes grimaçantes de nos clients (et graphistes) souhaitant supprimer ce contour "disgracieux" autour des éléments cliquables.
- La volonté de conserver ces éléments accessibles à tout le monde en évitant à tout prix le désastreux
outline: noneet tentant de convaincre nos clients (et graphistes) du bienfait de ce contour.
Complément d'information : l'indicateur visuel de focus bénéficie aux personnes ayant des troubles de la vision ou cognitifs.
:focus-visible pour contenter tout le monde
Le sélecteur focus-visible est un ajout relativement récent aux brouillons de spécifications CSS, mais qui n'en demeure pas moins compatible sur la majorité des navigateurs modernes.
Grâce à la pseudo-classe :focus-visible il est dorénavant possible de masquer le contour (focus) uniquement lors du clic ou d'un touch et tout en le préservant lors d'un focus au clavier.
.element:focus: sélecteur actif au clic, touch et navigation clavier.element:focus-visible: sélecteur actif uniquement lors de la navigation clavier.element:focus:not(:focus-visible): sélecteur actif uniquement lors du clic et touch
L'exemple de code CSS ci-dessous permet de distinguer les types de contours selon les interactions possibles.
Notez que les anciens navigateurs (Internet Explorer) ainsi que Safari, qui ne reconnaissent pas :focus-visible se contenteront d'afficher leur :focus naturel :
@supports selector(div:focus-visible) {
/* uniquement au clic/tap focus */
.custom-button:focus:not(:focus-visible) {
outline: 0;
}
/* uniquement au focus clavier */
.custom-button:focus-visible {
outline: 6px dashed hotpink;
}
}
Marie Guillaumet, alias « kReEsTaL », se qualifie comme Designer UX/UI experte en accessibilité chez Access42, mais son panel de compétences s'étend à de nombreux autres domaines du Web. Elle est également oratrice de talent lors de nos conférences web préférées.
Découvrons ensemble le parcours et les coups de coeurs de Marie…
(Alsacréations) Bonjour Marie, peux-tu te présenter en quelques mots ?
Bonjour ! Je m’appelle Marie Guillaumet, j’ai 38 ans, je vis près de Rennes et je travaille au sein d’Access42 en tant que designer UX/UI experte en accessibilité numérique, formatrice et responsable communication et éditorial. Pendant mon temps libre, j’aime peindre et voir du pays.
(Alsacréations) Par quoi as-tu été amenée à te spécialiser dans l’Accessibilité Numérique ?
Ça s’est fait en plusieurs étapes. J’ai découvert l’accessibilité numérique pendant mes études à Sciences Po Grenoble. Lors d’une enquête de terrain, j’ai rencontré des personnes en situation de handicap qui militaient pour l’accessibilité du bâti et des transports, ainsi qu’une élue municipale et un architecte spécialisé en accessibilité. Dès le départ, ça m’a passionnée.
En parallèle, je créais déjà des sites web : les tutoriels et le forum d’Alsacréations m’ont d’ailleurs beaucoup aidée à apprendre les rudiments de l’intégration. Et comme l’accessibilité web faisait partie des sujets récurrents sur le forum, j’ai considéré que ça allait de soi d’en tenir compte.
J’ai écrit un mémoire de master sur l’accessibilité web, puis j’ai travaillé en tant qu’intégratrice dans plusieurs agences, au sein d’équipes souvent très motivées par l’accessibilité. J’ai aussi commencé à contribuer à différents blogs où il en était question, notamment Les Intégristes.
Ma montée en compétences a eu lieu par à-coups, grâce aux projets pour lesquels une exigence forte en matière d’accessibilité était demandée, ce qui était rare. En général, ça concernait des sites publics importants.
Malgré tout, je sais aujourd’hui que ma connaissance de l’accessibilité est longtemps restée en surface. C’est vraiment quand j’ai rejoint Access42, en 2017, que j’ai fait un bond de compétences inouï dans ce domaine. J’ai pu suivre une formation à l’audit de grande qualité, animée par mon éminent collègue Jean-Pierre Villain. Tout ce que je pensais bien faire, mais que je faisais mal, m’a soudain sauté à la tronche. J’ai aussi obtenu des réponses à des questions que je ne m’étais jamais posées. Bref, ça a été les 5 jours les plus importants de ma vie professionnelle. Depuis, je continue à consolider mes connaissances chaque jour.
(Alsacréations) Quel est le plus gros challenge/défi que tu considères avoir accompli dans ton parcours ?
Concevoir la formation sur le design d’interfaces accessibles d’Access42 en quelques mois. Le défi consistait à aider les designers à s’emparer de ce sujet, qui a longtemps été traité uniquement par un angle technique. Or, dans cette formation, on ne parle pas de code : on s’intéresse aux usages des personnes en situation de handicap, et aux conséquences que cela a sur le design UX (fonctionnel) et UI (graphique). Comment répondre aux besoins spécifiques des personnes handicapées vis-à-vis du numérique ? La première étape consiste à connaître ces besoins, et le rôle fondamental que jouent les technologies d’assistance dans leur expérience.
La formation aborde aussi tout l’éventail des exigences du RGAA (Référentiel général d’amélioration de l’accessibilité, le référentiel légal français dans le domaine) en matière de design. Les designers que nous formons font souvent face à des problématiques de conception complexes, qui dépassent les cas courants que l’on peut trouver sur un site web "classique". C’est très motivant de les aider à trouver des solutions pour que les personnes handicapées puissent profiter d’applis innovantes dès leur sortie sur le marché, par exemple.
(Alsacréations) Tu es Designer UI/UX, Formatrice, Responsable éditorial, Oratrice, Experte en accessibilité et en WordPress. Quelle corde manque encore à ton arc selon toi ?
J’aimerais avoir une connaissance plus approfondie des technologies d'assistance : outre les lecteurs d’écran, que je suis loin de tous maîtriser, il y a aussi des systèmes de contrôle à la voix, de nombreux types de contacteurs, des systèmes d’eye tracking, etc. que je connais moins. Je voudrais surtout observer des personnes concernées les utiliser, et contribuer à trouver des solutions pour améliorer leur expérience sur les interfaces numériques.
(Alsacréations) À travers les yeux d’Access42, comment vois-tu l’évolution de l’Accessibilité Numérique dans le monde professionnel ?
Nous assistons à un véritable boom de l’accessibilité numérique depuis que le décret a été publié, en 2019. Les demandes de formation et d’accompagnement abondent, et c’est une excellente nouvelle : des générations entières de professionnels/professionnelles sont en train de se former à l’accessibilité.
Ces savoirs ruissellent en interne dans leurs équipes, chez nos clients, ce qui fait qu’il y a de plus en plus de monde qui s’y met. Cela rentre progressivement dans les méthodes de travail, les outils se mettent à jour et incluent des options et vérificateurs d’accessibilité natifs, etc. Les obligations légales y sont pour beaucoup, évidemment, il ne faut pas se leurrer. Mais du moment que ça avance, c’est l’essentiel.
Ce qui manque maintenant, c’est une prise en compte plus universelle de l’accessibilité dans les programmes des formations initiales. À ma connaissance, c’est rarement le cas, et il y a très peu de cursus initiaux qui préparent aux métiers du numérique qui sont dédiés à l’accessibilité et à la prise en compte du handicap.
Les filières en design me semblent paradoxalement encore assez hermétiques à ces problématiques. Le fait qu’il n’y ait souvent qu’une ou deux heures de cours sur l’accessibilité sur toute une année de cours est révélateur.
À côté de ça, les applications, notamment mobiles, mais aussi la domotique et le mobilier urbain numérique continuent à poser de nouvelles problématiques d’accessibilité, en termes d’usages et donc de conception. Donc on va voir se développer de nouveaux métiers, de nouvelles méthodes, etc. C‘est un secteur où tout évolue très vite, et qui recrute de plus en plus.
Bref, je pense que sur l’échelle du temps, nous n’en sommes encore qu’à la préhistoire de l’accessibilité.
(Alsacréations) Quels sont ton navigateur et tes extensions préférées pour analyser l’Accessibilité des pages web ?
Je fais moins d’audits aujourd’hui, mais dans l’équipe nous utilisons beaucoup Firefox, équipé de plusieurs extensions dédiées :
- Stylus, pour appliquer des feuilles de styles dédiées à l’audit ;
- Web Developer, qui permet de désactiver les CSS du site, afficher le contenu des attributs alt ou title, etc.
- WCAG Contrast Checker, pour vérifier rapidement les contrastes ;
- HeadingsMap, pour s’assurer que la hiérarchie des titres est correcte.
Il y aussi l’extension Assistant RGAA, qui aide à mettre en œuvre les tests de conformité au RGAA.
(Alsacréations) Est-ce qu’il y a quelque chose de neuf dans ta vie professionnelle ou dans le web que tu aimerais nous partager/dont tu aimerais faire la promo parce que ça te tient à cœur ? Des initiatives ? Des projets ?
Il y a quelques mois, j’ai découvert Fable, une plateforme qui permet de faire de la recherche utilisateurs et de réaliser des tests avec des personnes en situation de handicap.
Si la crise sanitaire a provoqué un bond dans les outils de tests à distance, ces outils sont dans 99,9% des cas inaccessibles… On exclut de facto les utilisateurs et utilisatrices handicapées de ces processus-là. Cela provoque forcément des biais dans la méthodologie de recherche, en plus d’être problématique d’un point de vue éthique et politique.
De manière plus générale, les personnes en situation de handicap sont très marginalisées, voire totalement absentes des cycles de conception. Aussi, toute initiative qui consiste à les recruter et à les inclure enfin au sein de nos processus métier doit à mon sens être soutenue.
(Alsacréations) Ah, sinon, d’où provient ton pseudo Twitter ?
Mon pseudo « kReEsTaL » (qui se prononce « cristal ») provient de l’époque des canaux de discussion IRC, où c’était le nec plus ultra de transformer les mots en changeant la casse des lettres. Toute une époque…
(Alsacréations) Est-ce que les événements/conférences tels que Paris-Web (ou la KiwiParty) te manquent ?
Oui, beaucoup ! D’autant que je télétravaille à 100%. Les événements de ce type sont des bulles d’oxygène : ils m’aident à sortir de la routine, me permettent de rencontrer d’autres personnes passionnées, et de (re)découvrir beaucoup de choses. J’en ressors toujours très motivée. Et quand je donne moi-même une conférence, c’est l’occasion de faire des recherches approfondies sur des sujets qui m’intéressent.
(Alsacréations) Préfères-tu commander tes chaussures sur Amazon ou bien porter des sandales-chaussettes tous les jours ? (spoiler : les sandales-chaussettes c’est cool)
Les sandales, ça peut être des Crocs ? 