Plugin d'accessibilité Riman

Objectif et philosophie

Le plugin d'accessibilité Riman a été créé pour permettre à chaque visiteur, même malvoyant, dyslexique, présentant des troubles moteurs ou cognitifs, de modifier l'apparence d'un site à la volée, sans avoir à installer d'extension de navigateur ni à modifier les paramètres de son système d'exploitation. Ses principes directeurs sont les suivants :

  1. Donner du pouvoir à l'utilisateur final
    Au lieu d'imposer à tous les visiteurs une mise en page unique et uniforme, Riman laisse le contrôle à chacun. Chacun peut ajuster la taille du texte, le contraste, l'espacement et bien plus encore pour répondre à ses besoins spécifiques.

  2. Conception non intrusive
    Le bouton flottant ☰ et le panneau du plugin ne modifient jamais les modèles de votre thème. Ils sont visibles jusqu'à ce qu'on clique dessus et, lorsqu'ils sont utilisés, ils n'affectent que le contenu principal, jamais l'interface de contrôle elle-même. Ainsi, les utilisateurs savent toujours où trouver et comment utiliser les outils, même après avoir modifié le reste de la page.

  3. Simplicité du fichier unique
    Tout (PHP, CSS et JavaScript) est regroupé dans un seul fichier PHP. Pas de dossiers de ressources supplémentaires, ni de scripts externes à charger. Cela signifie des performances ultra-rapides et une installation simple, sans aucune dépendance à jQuery ou à des frameworks externes.

  4. Ajustements en temps réel
    Dès qu'un visiteur clique sur un bouton, la modification est appliquée instantanément, sans rafraîchissement de la page. Il n'a pas besoin de recharger la page ni de naviguer pour voir la nouvelle taille de police, le mode contraste élevé ou les images masquées. Ce retour immédiat est essentiel pour une expérience positive et sans frustration.

À qui profite Riman ?

  • Utilisateurs malvoyants
    Les personnes qui ont besoin de polices plus grandes, d’un contraste plus élevé ou d’un espacement plus important entre les lignes pour lire confortablement.

  • Lecteurs dyslexiques
    Les personnes qui trouvent certaines polices, certains espacements ou certains styles d’alignement difficiles peuvent bénéficier d’un espacement accru des lettres, d’une « police lisible » simplifiée ou de la possibilité de supprimer les images gênantes.

  • Défis cognitifs et d'attention
    Des fonctionnalités telles que le « Masque de lecture » aident à se concentrer sur un bloc de texte à la fois, réduisant ainsi la charge cognitive et minimisant les distractions.

  • Déficiences motrices
    L'accès au clavier (Ctrl + Alt + A pour ouvrir/fermer) et les grandes cibles de clic sur les tuiles du panneau permettent aux personnes ayant une dextérité limitée de naviguer rapidement.

  • Apprenants de langues
    L'interface simple et épurée peut aider les locuteurs non natifs à se concentrer sur la lisibilité en basculant les polices, le zoom et l'espacement.

  • Toute personne préférant une vue personnalisée
    Même si un visiteur n’a pas de handicap diagnostiqué, il peut simplement préférer un système à contraste élevé la nuit, ou il peut vouloir masquer des images pour accélérer la lecture sur des connexions lentes.

Commencer

  1. Activer le plugin
    Après l'installation, activez Plugin d'accessibilité Riman depuis Plugins → Plugins installés dans votre tableau de bord WordPress.

  2. Configurer (facultatif)

    • Aller à Paramètres → Accessibilité dans la barre latérale.

    • Ajustez les éléments suivants pour qu'ils correspondent à la conception ou à l'image de marque de votre site :

      • Couleur d'arrière-plan du panneau (par exemple blanc, gris clair)

      • Couleur d'arrière-plan de l'icône de bascule (par exemple, site principal, couleur de la marque)

      • Couleur du texte de l'icône de bascule (contraste optimisé)

      • Couleur d'arrière-plan du bouton actif (couleur utilisée lorsqu'une fonctionnalité est « activée »)

      • Couleur du texte de l'étiquette de fonctionnalité (couleur pour les petites étiquettes de texte sous chaque icône)

      • Couleur de surbrillance du titre (couleur de contour utilisée lorsque « Mettre en surbrillance les titres » est activé)

      • Taille de l'icône de bascule (saisissez une valeur comprise entre 24 px et 200 px ; la valeur par défaut est 48 px)

      • Position fixe (choisissez où l'icône ☰ et son panneau apparaîtront :
        en haut à gauche, en haut au centre, en haut à droite, au milieu à gauche, au milieu à droite, en bas à gauche, en bas au centre ou en bas à droite).

    • Enregistrez vos modifications. Si aucune option n'est modifiée, les valeurs par défaut sont utilisées (panneau blanc, icône bleue, position en bas à droite, etc.).

  3. Visitez votre site
    Sur l'interface (n'importe quelle page ou article), vous verrez immédiatement une icône circulaire ☰ à l'emplacement choisi (en bas à droite par défaut). C'est votre passerelle vers le panneau d'accessibilité.

Expérience utilisateur étape par étape

1. Ouverture et fermeture du panneau

  • Cliquez sur l'icône ☰
    Un simple clic sur l'icône flottante ☰ (hamburger) provoquera l' Préférences d'accessibilité panneau coulissant ouvert directement à côté de cette icône.

    • Si l'icône est en bas à droite, le panneau apparaît juste au-dessus.

    • Si l'icône est en haut au centre, le panneau apparaît juste en dessous, centré.

  • Utiliser le raccourci clavier
    Presse Ctrl + Alt + A N'importe où sur la page pour ouvrir ou fermer le panneau. Ceci est particulièrement utile pour les utilisateurs qui préfèrent naviguer au clavier ou qui ont du mal à utiliser la souris.

  • Cliquez sur « × » ou en dehors du panneau

    • Cliquer sur le bouton « × » dans l’en-tête du panneau ferme le panneau.

    • Cliquer n'importe où en dehors du panneau (sur le contenu de la page) le ferme également.

2. Navigation dans la disposition du panneau

  • En-tête du panneau

    • Sur la gauche se trouve un titre en gras : « Préférences d’accessibilité ».

    • À droite, vous voyez :

      1. UN Menu déroulant des langues (EN, FR, ES). Choisissez votre langue et tous les libellés des boutons seront immédiatement traduits.

      2. UN Bouton Fermer (« × ») pour réduire instantanément le panneau.

  • Grille de tuiles et de commandes de fonctionnalités
    La section principale est une grille à deux colonnes de « tuiles » carrées (ou de petits panneaux pour les commandes numériques). Chaque tuile contient :

    • Un simple icône (par exemple, 🌓 pour un contraste élevé, 🔗 pour mettre en évidence les liens).

    • UN étiquette en dessous (par exemple, « Contraste élevé », « Liens en surbrillance »).

    • Si une tuile est « active », son arrière-plan change pour Couleur du bouton actif vous avez choisi dans Paramètres, et son icône/texte devient blanc pour un retour clair.

  • Contenu déroulant
    Si la fenêtre de votre navigateur est étroite ou si la grille s'agrandit (par exemple, en raison de l'ajout de fonctionnalités), le panneau devient déroulant verticalement. Il vous suffit de glisser ou de faire défiler le panneau pour accéder aux tuiles masquées, empêchant ainsi l'accès aux fonctionnalités sur les petits écrans.

  • Bouton de réinitialisation
    Tout en bas se trouve une pleine largeur Réinitialiser bouton. Cliquer dessus supprime immédiatement toutes les modifications d'accessibilité appliquées (ramenant la page à sa conception d'origine) et ferme le panneau.

Descriptions détaillées des fonctionnalités et de leur utilisation

Voici comment chaque tuile se comporte du point de vue de l'utilisateur. Dès que vous cliquez sur une tuile, la page entière se transforme instantanément (à l'exception du panneau lui-même, qui reste fixe).

1. Masque de lecture (▭)

  • Icône:Un rectangle étroit (▭)

  • Étiquette: « Masque de lecture » (ou sa traduction)

  • Ce qu'il fait:

    • Premier clic : Deux superpositions noires semi-transparentes apparaissent en haut et en bas de la fenêtre d'affichage, laissant une « fenêtre » horizontale au milieu (environ 40% de la hauteur de l'écran).

    • Cette « bande de mise au point » met en évidence uniquement le texte actuellement centré sur l’écran, atténuant le reste, ce qui peut aider les lecteurs à suivre ligne par ligne ou paragraphe par paragraphe sans distractions.

    • Deuxième clic : supprime les superpositions et ramène la page à la normale.

2. Contraste élevé (🌓)

  • Icône: Demi-lune (🌓)

  • Étiquette: « Contraste élevé »

  • Ce qu'il fait:

    • Active un schéma strict d'arrière-plan noir et de texte blanc sur toute la page.

    • Toutes les couleurs d'arrière-plan deviennent du noir pur (#000), tout le texte et les bordures deviennent d'un blanc pur (#fff), remplaçant tous les styles de thème existants via !important.

    • Cliquez à nouveau pour restaurer la palette de couleurs d'origine du site.

3. Contrôle de la taille de la police (↓ / % / ↑)

  • Zone d'icônes:Une petite ligne avec un bouton « ▼ », un pourcentage (par exemple, « 100% ») et un bouton « ▲ ».

  • Étiquette: « Taille de la police »

  • Ce qu'il fait:

    1. Diminuer (▼): Réduit la taille de la police de 5% par clic (jusqu'à 50%) : l'étiquette est mise à jour (par exemple, « 95% », « 90% »).

    2. Augmenter (▲): Augmente la taille de la police de 5% par clic (jusqu'à 200%) — l'étiquette est mise à jour (par exemple, « 105% », « 110% »).

    3. Rétroaction immédiate:Les titres, les paragraphes, le texte du menu, les légendes (tous les éléments de texte, à l'exception de l'interface utilisateur du panneau elle-même) s'affichent instantanément à la nouvelle taille.

    4. Exclut le panneau:Les commandes elles-mêmes restent à une taille de police stable, vous ne perdez donc jamais l'accès aux boutons.

4. Contrôle de la hauteur de ligne (↓ / % / ↑)

  • Zone d'icônes: Même structure de ligne (▼ « 100% » ▲).

  • Étiquette: « Hauteur de ligne »

  • Ce qu'il fait:

    1. Diminuer (▼):Réduit l'espacement des lignes à 50% par clic (minimum).

    2. Augmenter (▲): Augmente l'espacement des lignes à 200% maximum.

    3. Effet visuel:Dès que vous cliquez, l'espace vertical entre les lignes de texte s'agrandit ou se contracte, ce qui aide les lecteurs qui ont besoin de plus d'interligne à suivre le texte plus facilement.

    4. Stabilité du panneau:L'espacement des lignes du contrôle ne change jamais, le panneau reste donc lisible.

5. Contrôle de l'espacement des lettres (↓ / % / ↑)

  • Zone d'icônes: (▼ « 100% » ▲)

  • Étiquette: « Espacement des lettres »

  • Ce qu'il fait:

    1. Diminuer (▼):Réduit l'espacement des lettres à 50% (plus étroit).

    2. Augmenter (▲): Élargit l'espacement des lettres jusqu'à 200% (environ +2 px à 100%).

    3. Aide à la lecture:Des lettres largement espacées peuvent aider les lecteurs dyslexiques en rendant les caractères individuels plus distincts.

    4. Le panneau reste inchangé:Seules les lettres du contenu de la page décalent l'espacement.

6. Mise à l'échelle du contenu (Zoom) (↓ / % / ↑)

  • Zone d'icônes: (▼ « 100% » ▲)

  • Étiquette: « Mise à l'échelle du contenu »

  • Ce qu'il fait:

    1. Diminuer (▼):Réduit le contenu entier de la page jusqu'à 50%.

    2. Augmenter (▲): Zoome le contenu jusqu'à 200%.

    3. Ajustements plus larges:Il s’agit en fait d’un zoom sur l’ensemble du site qui fonctionne sur les images, les vidéos et tous les éléments, pas seulement sur le texte.

    4. Exclusion du panneau: Le plugin force le panneau lui-même à rester à zoom : 1 !important, en veillant à ne pas réduire ou agrandir accidentellement les commandes.

7. Police lisible (✎)

  • Icône:Un petit crayon ou « ✎ »

  • Étiquette: « Police lisible »

  • Ce qu'il fait:

    • Active/désactive tous les éléments textuels (titres, paragraphes, menus, widgets, etc.) à utiliser Arial, sans empattement (ou votre solution de secours choisie).

    • De nombreux utilisateurs souffrant de dyslexie ou de basse vision trouvent les polices sans empattement beaucoup plus faciles à lire.

    • Cliquez à nouveau pour revenir aux polices d'origine de votre thème.

8. Aligner à droite (↦), Aligner au centre (↔), Aligner à gauche (↤)

  • Trois icônes distinctes:

    1. Aligner à droite (↦)

    2. Aligner au centre (↔)

    3. Aligner à gauche (↤)

  • Étiquettes: « Aligner à droite », « Aligner au centre », « Aligner à gauche »

  • Ce qu'ils font:

    1. Activation en un seul clic: Lorsque vous cliquez sur une icône d'alignement, tout le contenu (articles, paragraphes, texte de la barre latérale, etc.) revient immédiatement à cet alignement de texte via alignement du texte : X !important ;.

    2. Désactiver: Cliquer à nouveau sur la même icône supprime la règle d'alignement et revient au flux par défaut du site.

    3. Exclusivité mutuelleSi vous cliquez sur « Centre » puis sur « Droite », l'effet « Centre » est supprimé et « Droite » prend le relais. Un seul effet peut être actif à la fois.

    4. Cas d'utilisation:

      • Certains lecteurs ayant des besoins visuels ou cognitifs spécifiques préfèrent un texte aligné à gauche.

      • D'autres, pour des langues comme l'arabe ou l'hébreu, pourraient vouloir un alignement correct.

      • Le texte centré peut être plus facile à suivre pour les blocs courts (par exemple, la poésie).

9. Masquer les images (🖼️✖)

  • Icône:Une petite icône d'image avec une superposition « ✖ »

  • Étiquette: « Masquer les images »

  • Ce qu'il fait:

    • Se cache instantanément tous <img> <picture> et en ligne <svg> éléments sur la page en définissant visibilité : caché !important;.

    • Les utilisateurs qui souhaitent une vue entièrement textuelle (peut-être pour réduire la charge cognitive, améliorer la vitesse de lecture sur les connexions lentes ou minimiser les distractions) peuvent activer cette option.

    • Cliquez à nouveau pour afficher les images normalement.

10. Mettre en évidence les liens (🔗)

  • Icône:Un maillon de chaîne (🔗)

  • Étiquette: « Liens en surbrillance »

  • Ce qu'il fait:

    • Applique un arrière-plan jaune vif derrière chaque lien hypertexte (couleur d'arrière-plan : jaune !important; couleur : #000 !important;).

    • Cela permet de savoir clairement quels mots ou expressions sont cliquables, ce qui est bénéfique pour les utilisateurs malvoyants ou daltoniens.

    • Cliquez à nouveau pour revenir aux liens vers le style par défaut de leur thème.

11. Mettre en évidence les titres (H)

  • Icône:Un « H » majuscule en gras

  • Étiquette: « Mettre en évidence les titres »

  • Ce qu'il fait:

    • Dessine un contour en pointillés (contour : 2 px en pointillés {votre couleur de surbrillance}) autour de toutes les balises de titre (<h1>–<h6>).

    • Les utilisateurs peuvent rapidement parcourir le contenu pour trouver les titres de section, améliorant ainsi la navigation pour les lecteurs d'écran ou ceux qui parcourent le contenu.

    • Cliquez à nouveau pour supprimer les contours.

12. Réinitialiser (Réinitialiser)

  • Icône: Aucun (bouton pleine largeur intitulé « Réinitialiser »)

  • Étiquette: « Réinitialiser » (ou son équivalent traduit)

  • Ce qu'il fait:

    1. Efface toutes les classes et tous les styles

      • Supprime tous les html-* classe (par exemple, html-contraste-élevé, masque de lecture html, etc.).

      • Supprime toutes les dynamiques <style> blocs qui ont été injectés pour la taille de la police, la hauteur de la ligne ou l'alignement.

      • Efface tout en ligne espacement des lettres ou zoom propriétés de la <html> élément.

    2. Rétablit tout par défaut

      • Toutes les options sur lesquelles vous avez cliqué (par exemple, Contraste élevé, Masquer les images) sont immédiatement désactivées.

      • Tous les textes, couleurs et mises en page reviennent exactement à la manière dont votre thème les présentait à l'origine.

    3. Ferme le panneau

      • Le panneau se ferme automatiquement, permettant ainsi aux utilisateurs de savoir qu'ils reviennent à la vue normale du site.

Étape par étape : flux utilisateur typique

  1. Repérez l'icône

    • Un ☰ circulaire dans le coin inférieur droit (par défaut) signale « Outils d’accessibilité ».

    • Sa forme familière et son contraste de couleurs (par exemple, un fond bleu foncé, une icône blanche) attirent l'attention sans obstruer le contenu.

  2. Ouvrir le panneau

    • L'utilisateur clique sur ☰ ou appuie sur Ctrl + Alt + A.

    • Le Préférences d'accessibilité le panneau apparaît dans la vue, ancré à côté de l'icône.

  3. Sélectionnez une langue (facultatif)

    • Dans l'en-tête du panneau, l'utilisateur peut basculer entre FR, FR, ou ES.

    • Toutes les étiquettes se traduisent immédiatement, ce qui aide les non-anglophones.

  4. Activer/désactiver une fonctionnalité

    • Exemple : Un utilisateur ayant une vision légèrement basse clique sur « Augmenter la taille de la police (▲) ».

    • Immédiatement, tout le texte de la page devient plus grand (par exemple, « 110% », « 115% », etc.).

    • S'ils préfèrent le mode sombre, ils cliquent sur « Contraste élevé (🌓) » et la page entière passe au fond noir et au texte blanc.

  5. Ajuster à la volée

    • Si l’utilisateur souhaite se concentrer sur un seul paragraphe, il clique sur « Masque de lecture (▭) ».

    • Deux superpositions noires apparaissent, laissant une bande lumineuse autour du centre. L'utilisateur fait défiler vers le bas pour déplacer cette fenêtre.

    • Ils peuvent ajuster la « hauteur de ligne » pour plus d’espace entre les lignes, ou élargir l’« espacement des lettres » pour aider à identifier les lettres individuelles.

  6. Désactiver/Réinitialiser

    • Une fois terminés ou s'ils effectuent un réglage excessif par accident, ils cliquent Réinitialiser.

    • Tout — polices, couleurs, masques — revient instantanément à la ligne de base et le panneau se ferme.

  7. Continuer la navigation

    • S'ils revisitent une autre page, le plugin reste actif avec leurs paramètres personnalisés intacts jusqu'à ce qu'ils cliquent sur « Réinitialiser » (ou recharger).

    • Ils peuvent ouvrir le panneau sur n'importe quelle page suivante pour activer/désactiver à nouveau les fonctionnalités.

Pourquoi c'est important

  1. Conformité et inclusion

    • De nombreuses organisations doivent respecter les normes WCAG 2.1 AA ou ADA. Si un thème entièrement personnalisé peut nécessiter d'importantes modifications de code, Riman propose une solution côté client prête à l'emploi qui simplifie la vie des utilisateurs sans modifier les modèles de thème ni le CSS.

    • En donnant le contrôle au visiteur, vous ne répondez pas seulement aux exigences minimales : vous démontrez un véritable engagement en faveur de l’accessibilité.

  2. Frais de support réduits

    • Au lieu de répondre aux tickets individuels « Je ne peux pas lire votre site », vous pouvez diriger les visiteurs vers l'icône universelle ☰ et dire : « Cliquez ici pour ajuster la page à votre guise. »

    • Pas besoin d’intégrer des dizaines de classes personnalisées dans votre CSS ou de lancer une deuxième « version d’accessibilité » de chaque page.

  3. Engagement et rétention améliorés

    • Les utilisateurs qui peinent à lire ou à naviguer sur un site ont tendance à l'abandonner rapidement. Les ajustements immédiats de Riman, souvent en quelques secondes, permettent de fidéliser les lecteurs, d'améliorer leur temps de visite et de réduire les taux de rebond.

  4. Flexible et évolutif

    • Si demain vous découvrez une autre fonctionnalité d'accessibilité (par exemple, une bascule « mode sombre », une option « police adaptée à la dyslexie »), elle peut être ajoutée comme une autre tuile de fonctionnalité et un gestionnaire JS correspondant.

    • Étant donné que l'ensemble du plugin est encapsulé dans un seul fichier, les mises à jour sont simples : écrasez l'ancienne version par la nouvelle et les fonctionnalités apparaissent instantanément.

Résumé technique pour les développeurs

  • Fichier PHP unique:

    • Contient toute la logique du plugin, CSS et JavaScript — aucun fichier d'actifs séparé.

    • S'intègre aux actions WordPress : init (charger les traductions), admin_menu + admin_init (paramètres), scripts_admin_enqueue_ (sélecteur de couleurs), classe_corps (classe de poste), wp_head (CSS), et wp_footer (HTML + JS).

  • Style dynamique:

    • Crée trois <style> blocs dans <head> pour les mises à jour en direct :

      1. police dynamique riman (taille de police)

      2. hauteur de ligne dynamique de Riman (hauteur de ligne)

      3. riman-dynamic-align (alignement du texte)

  • JavaScript interactif:

    • Sur Contenu DOM chargé, le script:

      • Récupère les références à toutes les tuiles de fonctionnalités, aux tuiles de contrôle et aux boutons bascule/fermeture/réinitialisation.

      • Lie les gestionnaires de clics pour activer les classes <html> (par exemple, html-contraste-élevé) ou mettre à jour dynamiquement <style> contenu.

      • Les moniteurs cliquent en dehors du panneau pour se fermer automatiquement.

      • Écoute pour Ctrl + Alt + A pour basculer le panneau via le clavier.

  • Page des paramètres d'administration:

    • Accessible sous Paramètres → Accessibilité.

    • Utilise WordPress paramètres_champs(), do_settings_sections(), et register_setting() Apis.

    • Utilise le sélecteur de couleurs WP intégré pour sélectionner les couleurs d'arrière-plan, d'étiquette et de surbrillance.

    • Désinfecte les entrées utilisateur pour éviter les codes hexadécimaux non valides ou les tailles d'icônes hors limites.

  • Internationalisation:

    • Toutes les chaînes statiques en PHP sont enveloppées dans __() ou esc_html__() avec domaine de texte plugin d'accessibilité riman.

    • JavaScript utilise également un petit traductions objet pour les trois langues intégrées (EN, FR, ES).

    • Pour ajouter d'autres langues, déposez un .mo classer sous /langues/ et étendre le dictionnaire JS avec le nouveau code de langue.

Résumé

  1. Ouvrir le panneau

    • Cliquez sur le ☰ flottant ou appuyez sur Ctrl + Alt + A.

  2. Ajuster à la demande

    • Activez le contraste élevé, agrandissez les polices, masquez les images, décrivez les titres, appliquez un masque de lecture ou zoomez sur la page entière, instantanément et sans rechargement.

  3. Gardez le contrôle

    • La taille du panneau reste inchangée. Même si vous augmentez la taille de la police à 200% ou zoomez à 150%, les commandes restent les mêmes, vous garantissant ainsi un accès permanent.

  4. Réinitialisation en un clic

    • Revenez immédiatement à l'apparence d'origine en cliquant Réinitialiser.

  5. Conçu pour tout le monde

    • Des utilisateurs malvoyants aux navigateurs utilisant uniquement le clavier, des apprenants de langues non natives aux personnes ayant des difficultés cognitives, le plugin d'accessibilité Riman offre une boîte à outils robuste qui encourage une navigation inclusive et sans obstacle.

En plaçant ces contrôles directement entre les mains de vos visiteurs, sans modifier les fichiers du thème principal, vous créez un site web véritablement accessible, qui respecte les besoins de chacun. Le plugin d'accessibilité Riman n'est pas seulement une case à cocher de conformité ; c'est un engagement à laisser chaque utilisateur décider de la façon dont il voit et interagit avec votre contenu.