L'accessibilité par le design
Bienvenue sur mon portfolio. Si vous cliquez sur l'icône , vous découvrirez un panneau de réglages un peu particulier. Mon approche du développement web est simple : ce n'est pas à l'utilisateur de s'adapter à l'interface, c'est à l'interface de s'adapter à l'utilisateur. Plutôt que de prétendre deviner vos besoins ou de "me mettre à votre place", j'ai conçu ce site pour vous donner le contrôle. Typographie, interlignage, contrastes : à vous de choisir l'expérience de lecture qui vous convient le mieux.
Un design a11y
L'accessibilité web ("a11y") consiste à concevoir des interfaces utilisables par toutes et tous, y compris les personnes en situation de handicap. Plus qu'une obligation légale, c'est pour moi un droit humain fondamental et une responsabilité de développeuse. Pour garantir cette inclusion, je me suis imposé une contrainte technique forte : coder un portfolio 100% modulable, qui s'adapte à vos réglages sans jamais casser la mise en page.
- Une architecture CSS 100% mathématique : Presque toutes les tailles du site reposent sur des variables relatives (
remetem). Lorsque vous cliquez sur + ou - pour changer la taille du texte, vous modifiez une unique variable racine (--user-size). Les titres, les marges et les espacements se recalculent instantanément et proportionnellement en cascade. - Deux couleurs pour tout gouverner : Le thème visuel entier repose sur seulement deux variables CSS (
--main-textet--main-background). Chaque élément (bordures, ombres subtiles, transparences) est calculé à partir de ces deux couleurs. Cela permet une inversion parfaite des couleurs en un clic pour réduire la fatigue visuelle. - Zéro "Flash Blanc" (FOUC) : Vos préférences sont sauvegardées dans le navigateur (
localStorage). Pour éviter que le site ne s'affiche en blanc avant d'appliquer votre thème sombre, le CSS est injecté dynamiquement dès la première milliseconde de chargement. - Navigation au clavier & Mobile : Le site est entièrement navigable sans souris grâce à des états
:focus-visibletrès marqués. De plus, les animations ou les comportements de défilement (comme lescroll-snapping) sont désactivés sur mobile ou petit écran pour garantir une expérience tactile sans frustration.
Crédits
Typographies inclusives
Aller au-delà de la simple taille du texte est essentiel pour une vraie démarche d'accessibilité. J'ai donc sélectionné plusieurs polices de caractères pensées par des chercheurs et des designers pour répondre à divers besoins cognitifs ou visuels. Vous pouvez les activer librement depuis le panneau de réglages.
▶ BBBReadMe
BBB ReadMe : Cette typographie a été développée pour tenter de répondre aux besoins spécifiques des personnes ayant un trouble cognitif impactant la lecture, comme les troubles dys, le TDAH ou le TSA. Pour s'assurer de son efficacité, la police a fait l'objet d'une étude rigoureuse via des entretiens avec un panel mixte d'utilisateurs. Leurs retours ont permis d'apporter des corrections précises aux caractères, qui ont ensuite été validées par les participants eux-mêmes pour confirmer l'amélioration du confort de lecture.
Crée par Eugénie Bidaut, Ludi Loiseau & Clara Sambot de la collective ByeByeBinary.
Étude menée par Sophie Vela, Enz@ Le Garrec et Camille Circlude.
Licence :CUTE
▶ Eido
Eido :Eido est une police de caractères conçue spécifiquement pour la vision périphérique, ciblant principalement les personnes malvoyantes. Elle s'adresse tout particulièrement aux patients atteints de DMLA (Dégénérescence Maculaire Liée à l'Âge, soit plus d'un million de personnes en France), qui peinent à reconnaître les mots dans un texte. Sa grande spécificité est d'améliorer significativement la reconnaissance périphérique des lettres et des mots, sans pour autant modifier les performances de la lecture centrale classique. Ces travaux ont d'ailleurs été publiés dans la revue scientifique PLoS ONE.
Crée par J.-B. Bernard, C. Aguilar et E. Castet du Laboraroire de psychologie cognitive Univ. Aix-Marseille
Licence : Non précisée.
▶ Accessible-DfA
Accessible-DfA : PCette typographie est pensée pour offrir une lisibilité universelle et surmonter diverses contraintes, qu'elles soient visuelles (basse vision, cataracte), cognitives (dyslexie, lecteurs débutants) ou environnementales (lecture en extérieur sur mobile, interface de conduite). Elle est également optimisée pour un sous-titrage efficace à destination des personnes malentendantes. Pour garantir une lisibilité maximale, son design est épuré, très contrasté, avec des formes larges et des espacements généreux. Elle se distingue par un travail poussé sur la différenciation des caractères pour éviter les confusions (comme l/I/i/1 ou C/O/0) et intègre un système anti-inversion en concentrant le poids sur la base des lettres (comme q/p/d/b). Enfin, la ponctuation et l'accentuation sont fortement renforcées pour rester parfaitement distinctes, y compris sur les lettres majuscules.
Crée par Denis Chêne Chêne au sein de l'unité de recherche Orange Labs à Grenoble
Licence : SIL Open Font License
▶ OpenDyslexic
OpenDyslexicCette police vise à accroître la fluidité de la lecture pour les personnes dyslexiques en réduisant la confusion, le chevauchement et l'inversion des lettres. Pour y parvenir, les caractères possèdent une base élargie et plus lourde qui aide l'œil à les ancrer sur la ligne, évitant ainsi de confondre des lettres visuellement proches comme le b, d, p ou q. Elle propose également des formes uniques et un espacement accru. Très accessible, elle est intégrée par défaut dans plusieurs outils (liseuses Kindle, Instapaper, Wikipedia) et peut s'installer facilement sur vos ordinateurs (Windows, Mac) et appareils mobiles.
Crée par Abelardo Gonzalez
Licence : SIL Open Font License
Couleurs et contrastes
L'esthétique ne devrait jamais se faire au détriment du confort de lecture. Pour prévenir la fatigue visuelle, toutes les couleurs de ce menu respectent scrupuleusement les exigences de contraste du WCAG. Chaque palette a été générée et validée via l'outil RandomA11y, garantissant ainsi une expérience à la fois harmonieuse, moderne et 100% accessible.
▶ RandomA11y
RandomA11y : Ce générateur de palettes gratuit est conçu pour aider les designers et développeurs à créer des interfaces accessibles. Il génère automatiquement des paires de couleurs (texte et arrière-plan) qui respectent strictement les standards de contraste WCAG (garantissant un ratio minimum de 4.5:1 pour le texte normal). Cet outil élimine le besoin de tester manuellement les couleurs et permet d"explorer des combinaisons créatives tout en s"assurant qu"elles restent parfaitement lisibles pour tous et toutes.
Crée par par John Otander & Adam Morse.
Ce projet vous a plu ?
Je suis actuellement à la recherche de nouvelles opportunités. Discutons ensemble de vos besoins en développement web et accessibilité.
Me contacter