Adapter l’interface pour tous : pourquoi et comment offrir une expérience réellement personnalisable
L’accessibilité numérique ne se limite plus à rendre un site « consultable ». Les utilisateurs ont aujourd’hui des besoins très variés pour configurer leur interface, améliorer leur confort de lecture et réduire la fatigue cognitive. Cet article explore ces besoins, les solutions existantes, leurs limites, et présente une nouvelle approche : RenowAdapt, une solution flexible pensée pour s’intégrer partout.
Pourquoi les utilisateurs ont besoin de configurer leur interface
Pour de nombreuses personnes, la consultation d’un site web n’est pas une expérience uniforme. Les besoins varient selon les situations, les handicaps, l’environnement ou simplement les préférences personnelles. Voici les principales adaptations recherchées :
- Espacement du texte — Augmenter l’interligne, l’espacement des mots ou des lettres peut améliorer considérablement la lisibilité, notamment pour les personnes dyslexiques ou ayant des troubles de la vision.
- Changement de police — Certaines polices (sans serif, plus rondes, plus régulières) facilitent la lecture pour de nombreux utilisateurs.
- Mode sombre — Réduit l’éblouissement, améliore le confort visuel et aide les personnes sensibles à la lumière.
- Couleurs renforcées — Un contraste plus élevé est essentiel pour les personnes malvoyantes ou en situation de forte luminosité.
- Taille du texte — Pouvoir agrandir le texte sans casser la mise en page est un besoin fondamental.
- Réduction des animations — Certaines animations peuvent provoquer de l’inconfort, voire des crises (épilepsie photosensible, vestibulaire).
Ces besoins ne concernent pas uniquement les personnes en situation de handicap permanent. Ils touchent aussi les utilisateurs :
- en mobilité,
- fatigués,
- travaillant sur un petit écran,
- exposés à une forte luminosité,
- ou simplement préférant une interface plus confortable.
L’accessibilité est donc une question d’inclusion, mais aussi d’ergonomie universelle.
Les solutions existantes : overlay, extensions, plugins… et leurs différences
Pour répondre à ces besoins, plusieurs types de solutions existent. Elles n’ont pas toutes le même fonctionnement ni les mêmes implications.
Les overlays
Un overlay d’accessibilité est un script intégré au site qui ajoute une interface permettant à l’utilisateur de modifier l’apparence de la page (taille du texte, contraste, police…).
Caractéristiques :
- intégration directe dans le site,
- interface visible via un bouton ou un widget,
- modifications appliquées en JavaScript sur le contenu existant (surcouche).
Avantages :
- accessible à tous les visiteurs, sans installation,
- cohérent avec l’identité du site,
- contrôle par l’éditeur du site.
Limites :
- dépend du code du site (peut entrer en conflit),
- parfois perçu comme intrusif,
- ne suit pas l’utilisateur d’un site à l’autre.
Attention, contrairement à ce que vous fait croire quelques commerciaux malhonnete, l'ajout d'un overlay ne rend pas automatiquement votre site conforme au WCAG ou au RAWeb...
Le service Informations et Presse (SIP) a publié un article sur le risque des overlays
Les extensions navigateur
Une extension d’accessibilité est installée par l’utilisateur dans son navigateur.
Avantages :
- fonctionne sur tous les sites,
- personnalisable selon les préférences de l’utilisateur,
- indépendante du code du site.
Limites :
- nécessite une installation,
- parfois bloquée en environnement professionnel,
- dépend du navigateur utilisé.
Un utilisateur qui change d'appareil doit réinstaller l'extension puis la reconfigurer avec ses préférences.
Les plugins intégrés au CMS
Un plugin d’accessibilité (WordPress, Drupal, etc.) est installé par l’équipe technique du site.
Avantages :
- intégré nativement au site,
- souvent plus stable qu’un overlay externe,
- peut modifier le code source (pas seulement l’apparence).
Limites :
- dépend du CMS,
- nécessite une maintenance technique,
- ne fonctionne que sur le site où il est installé.
Logiciel tiers
Plusieurs logiciel tiers existent pour configurer des paramètres l'écran. Par exemple Twinkl tray, Calibrize et DarkAdapter permettent de contrôler la luminosité et le contraste.
Avantages :
- installer directement sur l'OS
- Ne depend pas du navigateur utilisé ni du code du site
- personnalisable selon les préférences de l’utilisateur,
Limites :
- souvant une fonctionalité très spécifique
- nécessite une installation,
- parfois bloquée en environnement professionnel,
Comparatif rapide : overlays vs extensions navigateur
Les overlays et les extensions poursuivent le même objectif — permettre aux utilisateurs d’adapter l’affichage — mais leur logique diffère profondément.
Les overlays, intégrés directement au site, offrent une solution immédiate et visible, utile pour proposer quelques ajustements sans effort côté utilisateur. Leur portée reste toutefois limitée à un seul site et dépend fortement de la qualité du code existant.
Les extensions navigateur, elles, placent le contrôle du côté de l’utilisateur. Elles permettent des réglages plus cohérents et persistants d’un site à l’autre, mais nécessitent une installation et ne sont pas toujours autorisées dans les environnements professionnels.
En résumé, les overlays apportent une aide ponctuelle et locale, tandis que les extensions offrent une personnalisation durable et globale — deux approches complémentaires, mais qui ne remplacent jamais une accessibilité réellement intégrée au site.
Au fil de mes échanges avec des personnes en situation de handicap, une réalité revient souvent : elles n’attendent pas qu’un site ajoute un overlay pour adapter leur expérience. La plupart ont déjà adopté leurs propres outils — extensions de navigateur ou logiciels tiers — parce qu’ils leur offrent une personnalisation immédiate, cohérente et disponible partout.
Quelques solutions existantes pour configurer l’interface
Plusieurs outils permettent déjà aux utilisateurs d’adapter leur interface. Parmi eux :
- Orange Confort+ — Une extension gratuite permettant d’adapter la taille du texte, les couleurs, la police, l’espacement, etc. Très utilisée dans le domaine de l’accessibilité en France.
- Helperbird — Extension orientée dyslexie et confort de lecture.
- Dark Reader — Extension populaire pour activer un mode sombre sur tous les sites.
- Stylus — Permet d’appliquer des styles personnalisés à n’importe quel site.
Ces outils sont puissants, mais ils reposent tous sur une installation côté utilisateur. Ils ne permettent pas à un site web d’offrir nativement une interface adaptable.
Pourquoi créer notre propre solution : RenowAdapt
Face à ces limites, nous avons développé RenowAdapt, une solution flexible pensée pour s’adapter à tous les contextes.
RenowAdapt répond à trois besoins clés :
- Être disponible directement sur un site web → sous forme d’overlay intégré, activable via un bouton d’accessibilité.
- Être utilisable partout, même si le site ne l’intègre pas → via un bookmarklet, simple à installer et compatible avec les principaux navigateurs.
- Être toujours accessible pour les utilisateurs réguliers → via une extension navigateur, permettant de conserver ses préférences d’un site à l’autre.
Pourquoi cette approche hybride ?
Parce qu’aucune solution unique ne répond à tous les besoins :
- L’overlay est idéal pour les sites qui veulent proposer une interface inclusive.
- L’extension est idéale pour les utilisateurs qui veulent une expérience cohérente partout.
- Le bookmarklet est idéal pour les environnements verrouillés (entreprises, écoles).
RenowAdapt combine ces trois approches, ce qui en fait une solution :
- flexible,
- universelle,
- simple à intégrer,
- respectueuse des standards d’accessibilité,
- et centrée sur les besoins réels des utilisateurs.
Renowadapt se base sur l'overlay d'AccessConfig réaliser par la société Access42 qui n'est malheureusement plus maintenu.
Utilisation
Pour adapter l'accessibilité sur une page de votre site, il suffit d'ouvir la page dans votre navigateur et de cliquer sur l'extension Chrome.
Liste des configurations disponibles
- Ajuster les couleurs et contrastes
- Masquer les images
- Modifier la taille du texte
- Augmenter les espaces entre les caractères, entre les lignes et entre les paragraphes
- Masquer les Animations
- Transformer le texte : Majuscule, Minuscule
- Mettre en avant les liens
- Mettre en avant l'outline du focus
- Modifier la police
- Afficher une règle de lecture
- Ajuster la taille du curseur
Collaborer
L'application est en cours de finalisation, je cherche actuellement des beta-testeurs.
N'hésitez pas à me remonter les problèmes, faux-positifs ou vos suggessions d'améliorations directement sur GitHub