1. Un Contexte Historique et des Enseignements Essentiels

1.1 Histoire et Accessibilité : du Braille à l’inclusion digitale

Le design et l'accessibilité sont deux domaines étroitement liés par un enjeu fondamental : permettre à chacun de vivre et d’interagir avec son environnement de manière autonome. L'histoire de l'accessibilité est ponctuée de nombreuses avancées, dont l’une des plus marquantes est l'invention du braille par Louis Braille au début du 19e siècle. Cette innovation a révolutionné l'accès à la lecture et à l'éducation pour les personnes aveugles, mais elle n'a pas mis fin aux défis. Chaque déficience visuelle est unique, et chaque individu a sa propre manière d’appréhender le monde qui l’entoure.

Lors de notre collaboration avec l’Institut National des Jeunes Aveugles (INJA) Louis Braille, nous avons eu l'opportunité de repenser la stratégie de marque, l’identité visuelle et la conception du site internet de l’institution. Cet écrin en plein cœur de Paris fut la première école du monde dédié à ce type de handicap. Créée sous Louis XVI, elle a d’ailleurs formée le jeune Louis Braille qui y a, une fois devenue adulte et professeur, y a créé son invention éponyme. Rien de tel que cet écrin pour s’immerger dans ces problématiques !

À travers cette expérience, nous avons tiré plusieurs enseignements sur la complexité de l’accessibilité et les nuances nécessaires pour répondre aux besoins d’un public aussi diversifié.

1.2 Défis et solutions : adapter le design aux déficiences visuelles

Il est crucial de souligner que le concept de déficience visuelle regroupe une multitude de situations. Par exemple, certaines personnes peuvent percevoir des formes floues ou des contrastes marqués, d’autres ne voient que de la lumière ou des ombres, certains ne décernent pas les couleurs et nuances de teintes et d’autres encore sont totalement aveugles. Ces différences individuelles quasi-infinie puis-ce que souvent multi-factorielles et à des degrés différents signifient que chaque solution doit être pensée de manière flexible et adaptable. Par exemple, le braille peut être une solution efficace pour certains, mais d’autres préféreront des supports audio ou des formats visuels à fort contraste.

L’un des principaux enseignements est qu’il n’existe pas de solution universelle en matière d’accessibilité. Les recommandations que nous faisons ici sont des pistes d’amélioration, et chaque projet doit être adapté aux utilisateurs finaux par le biais de tests et de retours concrets.

1.3 De l’Héritage à l’innovation : l’accessibilité au cœur du design

Depuis sa création, l’INJA a toujours été à la pointe de l'éducation pour les jeunes déficients visuels. Cette tradition d'innovation n’est pas propre à l’INJA, mais s’observe dans de nombreuses structures, qu’elles soient institutionnelles ou privées. Le développement de nouvelles technologies et de pratiques en matière d'accessibilité est une quête constante pour les chercheurs, ingénieurs, et designers, chacun contribuant à sa manière à l'amélioration de la qualité de vie des personnes atteintes de déficience visuelle.

L’œuvre de Victor Papanek, Design for the Real World, souligne l’importance du design comme outil de transformation sociale. Papanek défend l’idée que le design ne doit pas seulement être esthétique, mais avant tout fonctionnel et accessible à tous. Cette approche est particulièrement pertinente dans le domaine de l’accessibilité, où chaque innovation doit répondre à un besoin réel et spécifique.

Des avancées comme les systèmes de lecture par synthèse vocale, les dispositifs de reconnaissance d'objets par caméra, les interfaces tactiles personnalisables, ou encore l’usage de l’IA en la matière témoignent de la capacité du design à s’adapter aux contraintes multiples de l’accessibilité.

En résumé, bien qu’il n’existe pas de solution universelle, il est possible de poser des jalons pour concevoir des projets inclusifs. Ces guidelines serviront de fil rouge pour les parties suivantes de cet article, où nous détaillerons des recommandations pratiques et des exemples concrets pour chaque étape de la conception d’un projet accessible.

2. Accessibilité web : maîtrisez les normes WCAG et améliorez l’expérience utilisateur

Les WCAG 2.1 (Web Content Accessibility Guidelines) définissent les standards d’accessibilité à respecter, organisés autour de quatre principes : Perceptible, Utilisable, Compréhensible et Robuste. Pour optimiser votre site, visez au moins le niveau AA.

2.1 Polices de caractères accessibles, le guide ultime

Utilisez une taille de texte minimum de 16px et un contraste suffisant (4.5:1). Évitez les polices trop stylisées, privilégiez une mise en forme simple, lisible et assurez-vous que l’espacement de lettres et de lignes soit suffisant. Pour un designer graphique cela va à l’encontre du respect du typographe, mais n’hésitez pas à forcer sur les interlettrages et interlignages ! Voici une sélection de typographies découpées par style pour vous aider dans vos recherches.

Polices Sans-Serif

Les polices sans-serif sont souvent préférées pour le web car elles sont plus lisibles sur les écrans, surtout en petites tailles.

• Arial : Une police classique, simple et claire, souvent utilisée pour son universalité.
• Verdana : Conçue pour être lisible à l’écran, avec un espacement large et des caractères bien distincts.
• Tahoma : Très proche de Verdana, elle est souvent utilisée pour son excellent rendu sur les interfaces utilisateurs.
• Helvetica : Polyvalente et moderne, elle est idéale pour les sites qui nécessitent une présentation sobre et professionnelle.

Polices avec Contraste Optimisé

Ces polices sont conçues pour offrir une meilleure lisibilité, même en conditions de contraste faible.

• Roboto : Conçue par Google, cette police combine modernité et lisibilité, avec des formes géométriques et un espacement optimisé.
• Open Sans : Très populaire pour le web, cette police est lisible, épurée et bien adaptée aux interfaces utilisateurs variées.
• Lato : Une alternative à Open Sans, avec un léger contraste dans les traits, ce qui améliore la distinction des caractères.

Polices pour une Lisibilité Maximale

Ces polices sont particulièrement adaptées pour les utilisateurs ayant des déficiences visuelles.

• Atkinson Hyperlegible : Développée spécifiquement pour améliorer la lisibilité pour les malvoyants, cette police offre des différences marquées entre les caractères semblables.
• Dyslexie : Conçue pour faciliter la lecture des personnes dyslexiques, avec des formes de lettres distinctes pour éviter les inversions.
• Luciole : Adaptée aux malvoyants avec ses formes simples et son espacement optimal, elle tend à s’imposer comme un standard en la matière.
• Fira Sans : Utilisée dans les environnements de développement, elle est très lisible grâce à ses traits simples et son espacement généreux.

Polices Monospaces pour le Code et la Lecture Technique

Ces polices, où chaque caractère occupe le même espace horizontal, sont idéales pour les environnements techniques.

• Courier New : Classique des polices monospaces, idéale pour les tableaux de données ou les codes.
• Consolas : Conçue par Microsoft, elle est utilisée par défaut dans de nombreux éditeurs de texte.
• Source Code Pro : Développée par Adobe, elle est parfaite pour la présentation du code avec une excellente lisibilité.

2.2 Navigation optimisée : facilitez l’accès à votre contenu

Voici une liste de conseils pratiques pour améliorer la navigation d'un site web afin de le rendre plus accessible aux personnes déficientes visuelles :

Navigation au Clavier

• Focus visible : Utilisez un style de focus bien visible pour que les utilisateurs sachent où ils se trouvent sur la page (par exemple, un contour ou une couleur différente).
• Accessibilité via la touche Tab : Assurez-vous que tous les éléments interactifs (liens, boutons, champs de formulaire) sont accessibles en utilisant uniquement la touche Tab.

Structure de la Page :

• Simplicité des Grilles : Utilisez des grilles de mise en page simples et linéaires. Des structures trop complexes perturbent la navigation et la compréhension des contenus.
• Ordre de Navigation Logique : Assurez-vous que l'ordre de navigation via la touche Tab est cohérent avec la structure visuelle du site. Cela permet aux utilisateurs de naviguer facilement sans confusion.

Utilisation de Périphériques Spécifiques :

• Claviers et Périphériques Spéciaux : Gardez à l’esprit que la plupart des personnes déficientes visuelles n’utilisent pas de souris, mais plutôt des claviers, des lecteurs d’écran ou des dispositifs Braille.
• Compatibilité avec les Lecteurs d’Écran : Utilisez des balises ARIA (aria-label, aria-labelledby, etc.) et des rôles (role="button", role="navigation", etc.) pour rendre les éléments compréhensibles par les lecteurs d’écran.

Contenus Adaptés :

• Éviter les Tableaux Complexes : Les tableaux imbriqués ou avec de nombreux regroupements de colonnes et de lignes cassent la linéarité des contenus et compliquent la navigation.
• Simplifier l’information visuelle : Concernant l’iconographie, choisissez des photographies avec un cadrage serré, des illustrations épurée ou des pictogrammes monochromes simplifiés au maximum
• Alternatives Visuelles et Textuelles : Offrez toujours des alternatives textuelles pour les éléments graphiques et les médias. Par exemple, utilisez des descriptions textuelles pour les graphiques ou des transcriptions pour les vidéos.

Amélioration de l'Expérience Utilisateur :

• Navigation par En-têtes : Structurez vos pages avec des balises h1, h2, h3... pour permettre aux utilisateurs de naviguer rapidement d’un titre à un autre.
• Liens de Navigation Rapide : Ajoutez des liens de navigation rapide (« Aller au contenu », « Aller au menu », etc.) en début de page pour faciliter l'accès aux différentes sections.
• Proposez des modes d’accessibilité : Tout comme on propose de plus en plus des versions « dark mode » ou « light mode », il est bienvenu de proposer des versions « Grey mode » ou « accessibility mode » qui permettent de switcher le design du site avec seulement une feuille de style CSS.

2.3 Testez et optimisez votre site pour vérifier son accessibilité

Utiliser des outils comme axe, Lighthouse et Wave permet de tester rapidement les pages et d'identifier les problèmes d'accessibilité. Intégrez également des retours utilisateurs pour ajuster les solutions proposées. La clé repose sur les tests techniques et utilisateurs pour itérer sur l’environnement développé.

3. Accessibilité avancée : techniques d’experts pour un site inclusif et performant

Au-delà des bases, certaines pratiques permettent d’optimiser l'expérience utilisateur tout en maximisant l'accessibilité et les performance d’un site internet.

3.1 Approche mobile-first et accessibilité

Avec l'augmentation du trafic mobile, adopter une approche de conception mobile-first peut représenter une bonne opportunité, dans la mesure ou elle accroît également les performances d’accessibilité. Si vous adoptez ce processus, pensez à :

• Espacer les éléments et grossir leur taille : Les boutons et les liens doivent être suffisamment espacés pour éviter les erreurs de clic.
• Navigation simplifiée : Limitez le nombre d'éléments dans les menus et assurez-vous que chaque section est facilement atteignable.

3.2 Conception multisensorielle et UX immersif

Pour améliorer l’expérience des utilisateurs, intégrez plusieurs canaux de perception :

• Feedbacks visuels et sonores : Utilisez des indicateurs sonores et des vibrations pour les notifications.
• Contenus multimédia : Enrichissez votre site de contenus audios. Qu’il s’agisse de formats dédiés (podcast par exemple) ou bien simplement de modules descriptifs auditifs, cette grille de lecture est un précieux atout rendu techniquement de plus en plus abordable (grâce notamment à l’IA encore une fois).

3.3 Optimisation SEO et accessibilité, ou comment le design inclusif peut améliorer votre reférencement

Un site accessible est aussi mieux référencé. En effet, si vous cochez toutes les cases abordées jusqu’à maintenant il y a de fortes chances pour que vous obteniez des résultats irréprochables sur Pagespeed, GTmetrix, Carbon Calculator ou autre outil de mesure de performances. Voici quelques astuces :

• Balisage Sémantiques : Comme évoqué précédemment, utilisez correctement les balises h1, h2, etc. pour structurer le contenu. Idem pour les balises alt (voir plus haut).
• URLs et Noms de Fichier : Nommez vos fichiers et vos URLs de manière descriptive (ex : image-description.jpg), et incluez des mots-clés pertinents.
• Poids et calibrage des fichiers : Qu’il s’agisse d’images, de vidéos, d’illustrations ou autres assets, veillez à les optimiser depuis la conception (usage du vectoriel, peu de tracés, pas trop de couleurs ou de détails etc.) jusqu’à l’exports. On utilisera du .lottie pour la vidéo, du .svg pour les éléments vectoriels, du webp ou avif pour les images.

4. Nos ressources incontournables pour une accessibilité web réussie

Voici une sélection de ressources utiles pour approfondir vos connaissances en accessibilité numérique ou consulter en détail ce qui m’a permis de vous proposer cet article :

1. WCAG 2.1 Guidelines : Normes officielles d’accessibilité pour le web. Un guide essentiel pour comprendre les principes et les exigences en matière d'accessibilité numérique.
2. WebAIM Contrast Checker : Un outil pour vérifier le contraste des couleurs et s'assurer que le texte est lisible pour tous les utilisateurs.
3. Wave Accessibility Tool : Analyse de l’accessibilité des pages web. Fournit un rapport détaillé des erreurs d'accessibilité et des points à améliorer.
4. Accessibilité Numérique par Réseau Canopé : Guide pratique pour la conception de sites web accessibles aux personnes malvoyantes et dyslexiques.
5. Guide d'Éco-Conception par les Designers Éthiques : Principes d'éco-conception dans le design, incluant l'accessibilité pour les déficients visuels.
6. HAL Science - Conception pour Déficients Visuels : Étude sur les stratégies de conception adaptées aux personnes déficientes visuelles.
7. Mémoire sur l'Accessibilité en Design : Analyse des principes de design accessibles, centrée sur les déficiences visuelles.
8. Le Corps Lecteur - Blog sur l'Accessibilité : Réflexions et ressources sur l'accessibilité dans le design pour les déficients visuels. Disponible sur demande.
9. DSAADesign Lyon - Design et Accessibilité : Exploration de l'accès à la culture et à l'information via le design pour les déficients visuels. Disponible sur demande.
10. Thèse sur l'Accessibilité Numérique - HAL Science : Recherche approfondie sur l'amélioration de l'accessibilité numérique.
11. CRN Handicap - Contenus Accessibles : Conseils pratiques pour créer des contenus numériques accessibles.
12. Fédération des Aveugles de France - Accessibilité Numérique : Importance de l'accessibilité numérique pour l'inclusion des déficients visuels.
13. FIRAH - Accessibilité des Interfaces Informatiques : Étude sur l'amélioration de l'accessibilité des interfaces web riches.
14. Guide de l'Accessibilité Numérique - Contentsquare : Un guide pratique sur l'accessibilité numérique, fournissant des stratégies et des conseils pour une conception inclusive.

‍