Le plugin d'accessibilit\u00e9 Riman a \u00e9t\u00e9 cr\u00e9\u00e9 pour permettre \u00e0 chaque visiteur, m\u00eame malvoyant, dyslexique, pr\u00e9sentant des troubles moteurs ou cognitifs, de modifier l'apparence d'un site \u00e0 la vol\u00e9e, sans avoir \u00e0 installer d'extension de navigateur ni \u00e0 modifier les param\u00e8tres de son syst\u00e8me d'exploitation. Ses principes directeurs sont les suivants\u00a0:<\/p>\n
Donner du pouvoir \u00e0 l'utilisateur final<\/strong> Conception non intrusive<\/strong> Simplicit\u00e9 du fichier unique<\/strong> Ajustements en temps r\u00e9el<\/strong> Utilisateurs malvoyants<\/strong> Lecteurs dyslexiques<\/strong> D\u00e9fis cognitifs et d'attention<\/strong> D\u00e9ficiences motrices<\/strong> Apprenants de langues<\/strong> Toute personne pr\u00e9f\u00e9rant une vue personnalis\u00e9e<\/strong> Activer le plugin<\/strong> Configurer (facultatif)<\/strong><\/p>\n Aller \u00e0 Param\u00e8tres \u2192 Accessibilit\u00e9<\/strong> dans la barre lat\u00e9rale.<\/p>\n<\/li>\n Ajustez les \u00e9l\u00e9ments suivants pour qu'ils correspondent \u00e0 la conception ou \u00e0 l'image de marque de votre site\u00a0:<\/p>\n Couleur d'arri\u00e8re-plan du panneau<\/strong> (par exemple blanc, gris clair)<\/p>\n<\/li>\n Couleur d'arri\u00e8re-plan de l'ic\u00f4ne de bascule<\/strong> (par exemple, site principal, couleur de la marque)<\/p>\n<\/li>\n Couleur du texte de l'ic\u00f4ne de bascule<\/strong> (contraste optimis\u00e9)<\/p>\n<\/li>\n Couleur d'arri\u00e8re-plan du bouton actif<\/strong> (couleur utilis\u00e9e lorsqu'une fonctionnalit\u00e9 est \u00ab activ\u00e9e \u00bb)<\/p>\n<\/li>\n Couleur du texte de l'\u00e9tiquette de fonctionnalit\u00e9<\/strong> (couleur pour les petites \u00e9tiquettes de texte sous chaque ic\u00f4ne)<\/p>\n<\/li>\n Couleur de surbrillance du titre<\/strong> (couleur de contour utilis\u00e9e lorsque \u00ab Mettre en surbrillance les titres \u00bb est activ\u00e9)<\/p>\n<\/li>\n Taille de l'ic\u00f4ne de bascule<\/strong> (saisissez une valeur comprise entre 24 px et 200 px\u00a0; la valeur par d\u00e9faut est 48 px)<\/p>\n<\/li>\n Position fixe<\/strong> (choisissez o\u00f9 l'ic\u00f4ne \u2630 et son panneau appara\u00eetront\u00a0: Enregistrez vos modifications. Si aucune option n'est modifi\u00e9e, les valeurs par d\u00e9faut sont utilis\u00e9es (panneau blanc, ic\u00f4ne bleue, position en bas \u00e0 droite, etc.).<\/p>\n<\/li>\n<\/ul>\n<\/li>\n Visitez votre site<\/strong> Cliquez sur l'ic\u00f4ne \u2630<\/strong> Si l'ic\u00f4ne est en bas \u00e0 droite, le panneau appara\u00eet juste au-dessus.<\/p>\n<\/li>\n Si l'ic\u00f4ne est en haut au centre, le panneau appara\u00eet juste en dessous, centr\u00e9.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n Utiliser le raccourci clavier<\/strong> Cliquez sur \u00ab \u00d7 \u00bb ou en dehors du panneau<\/strong><\/p>\n Cliquer sur le bouton \u00ab \u00d7 \u00bb dans l\u2019en-t\u00eate du panneau ferme le panneau.<\/p>\n<\/li>\n Cliquer n'importe o\u00f9 en dehors du panneau (sur le contenu de la page) le ferme \u00e9galement.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n En-t\u00eate du panneau<\/strong><\/p>\n Sur la gauche se trouve un titre en gras : \u00ab\u00a0Pr\u00e9f\u00e9rences d\u2019accessibilit\u00e9\u00a0\u00bb.<\/strong><\/p>\n<\/li>\n \u00c0 droite, vous voyez :<\/p>\n UN Menu d\u00e9roulant des langues<\/strong> (EN, FR, ES). Choisissez votre langue et tous les libell\u00e9s des boutons seront imm\u00e9diatement traduits.<\/p>\n<\/li>\n UN Bouton Fermer (\u00ab \u00d7 \u00bb)<\/strong> pour r\u00e9duire instantan\u00e9ment le panneau.<\/p>\n<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<\/li>\n Grille de tuiles et de commandes de fonctionnalit\u00e9s<\/strong> Un simple ic\u00f4ne<\/strong> (par exemple, \ud83c\udf13 pour un contraste \u00e9lev\u00e9, \ud83d\udd17 pour mettre en \u00e9vidence les liens).<\/p>\n<\/li>\n UN \u00e9tiquette<\/strong> en dessous (par exemple, \u00ab\u00a0Contraste \u00e9lev\u00e9\u00a0\u00bb, \u00ab\u00a0Liens en surbrillance\u00a0\u00bb).<\/p>\n<\/li>\n Si une tuile est \u00ab active \u00bb, son arri\u00e8re-plan change pour Couleur du bouton actif<\/strong> vous avez choisi dans Param\u00e8tres, et son ic\u00f4ne\/texte devient blanc pour un retour clair.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n Contenu d\u00e9roulant<\/strong> Bouton de r\u00e9initialisation<\/strong> Voici comment chaque tuile se comporte du point de vue de l'utilisateur. D\u00e8s que vous cliquez sur une tuile, la page enti\u00e8re se transforme instantan\u00e9ment (\u00e0 l'exception du panneau lui-m\u00eame, qui reste fixe).<\/p>\n Ic\u00f4ne<\/strong>:Un rectangle \u00e9troit (\u25ad)<\/p>\n<\/li>\n \u00c9tiquette<\/strong>: \u00ab Masque de lecture \u00bb (ou sa traduction)<\/p>\n<\/li>\n Ce qu'il fait<\/strong>:<\/p>\n Premier clic : Deux superpositions noires semi-transparentes apparaissent en haut et en bas de la fen\u00eatre d'affichage, laissant une \u00ab fen\u00eatre \u00bb horizontale au milieu (environ 40% de la hauteur de l'\u00e9cran).<\/p>\n<\/li>\n Cette \u00ab bande de mise au point \u00bb met en \u00e9vidence uniquement le texte actuellement centr\u00e9 sur l\u2019\u00e9cran, att\u00e9nuant le reste, ce qui peut aider les lecteurs \u00e0 suivre ligne par ligne ou paragraphe par paragraphe sans distractions.<\/p>\n<\/li>\n Deuxi\u00e8me clic : supprime les superpositions et ram\u00e8ne la page \u00e0 la normale.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n Ic\u00f4ne<\/strong>: Demi-lune (\ud83c\udf13)<\/p>\n<\/li>\n \u00c9tiquette<\/strong>: \u00ab Contraste \u00e9lev\u00e9 \u00bb<\/p>\n<\/li>\n Ce qu'il fait<\/strong>:<\/p>\n Active un sch\u00e9ma strict d'arri\u00e8re-plan noir et de texte blanc sur toute la page.<\/p>\n<\/li>\n Toutes les couleurs d'arri\u00e8re-plan deviennent du noir pur ( Cliquez \u00e0 nouveau pour restaurer la palette de couleurs d'origine du site.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n Zone d'ic\u00f4nes<\/strong>:Une petite ligne avec un bouton \u00ab \u25bc \u00bb, un pourcentage (par exemple, \u00ab 100% \u00bb) et un bouton \u00ab \u25b2 \u00bb.<\/p>\n<\/li>\n \u00c9tiquette<\/strong>: \u00ab\u00a0Taille de la police\u00a0\u00bb<\/p>\n<\/li>\n Ce qu'il fait<\/strong>:<\/p>\n Diminuer (\u25bc)<\/strong>: R\u00e9duit la taille de la police de 5% par clic (jusqu'\u00e0 50%) : l'\u00e9tiquette est mise \u00e0 jour (par exemple, \u00ab 95% \u00bb, \u00ab 90% \u00bb).<\/p>\n<\/li>\n Augmenter (\u25b2)<\/strong>: Augmente la taille de la police de 5% par clic (jusqu'\u00e0 200%) \u2014 l'\u00e9tiquette est mise \u00e0 jour (par exemple, \u00ab 105% \u00bb, \u00ab 110% \u00bb).<\/p>\n<\/li>\n R\u00e9troaction imm\u00e9diate<\/strong>:Les titres, les paragraphes, le texte du menu, les l\u00e9gendes (tous les \u00e9l\u00e9ments de texte, \u00e0 l'exception de l'interface utilisateur du panneau elle-m\u00eame) s'affichent instantan\u00e9ment \u00e0 la nouvelle taille.<\/p>\n<\/li>\n Exclut le panneau<\/strong>:Les commandes elles-m\u00eames restent \u00e0 une taille de police stable, vous ne perdez donc jamais l'acc\u00e8s aux boutons.<\/p>\n<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n Zone d'ic\u00f4nes<\/strong>: M\u00eame structure de ligne (\u25bc \u00ab 100% \u00bb \u25b2).<\/p>\n<\/li>\n \u00c9tiquette<\/strong>: \u00ab Hauteur de ligne \u00bb<\/p>\n<\/li>\n Ce qu'il fait<\/strong>:<\/p>\n Diminuer (\u25bc)<\/strong>:R\u00e9duit l'espacement des lignes \u00e0 50% par clic (minimum).<\/p>\n<\/li>\n Augmenter (\u25b2)<\/strong>: Augmente l'espacement des lignes \u00e0 200% maximum.<\/p>\n<\/li>\n Effet visuel<\/strong>:D\u00e8s 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 \u00e0 suivre le texte plus facilement.<\/p>\n<\/li>\n Stabilit\u00e9 du panneau<\/strong>:L'espacement des lignes du contr\u00f4le ne change jamais, le panneau reste donc lisible.<\/p>\n<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n Zone d'ic\u00f4nes<\/strong>: (\u25bc \u00ab 100% \u00bb \u25b2)<\/p>\n<\/li>\n \u00c9tiquette<\/strong>: \u00ab Espacement des lettres \u00bb<\/p>\n<\/li>\n Ce qu'il fait<\/strong>:<\/p>\n Diminuer (\u25bc)<\/strong>:R\u00e9duit l'espacement des lettres \u00e0 50% (plus \u00e9troit).<\/p>\n<\/li>\n Augmenter (\u25b2)<\/strong>: \u00c9largit l'espacement des lettres jusqu'\u00e0 200% (environ +2 px \u00e0 100%).<\/p>\n<\/li>\n Aide \u00e0 la lecture<\/strong>:Des lettres largement espac\u00e9es peuvent aider les lecteurs dyslexiques en rendant les caract\u00e8res individuels plus distincts.<\/p>\n<\/li>\n Le panneau reste inchang\u00e9<\/strong>:Seules les lettres du contenu de la page d\u00e9calent l'espacement.<\/p>\n<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n Zone d'ic\u00f4nes<\/strong>: (\u25bc \u00ab 100% \u00bb \u25b2)<\/p>\n<\/li>\n \u00c9tiquette<\/strong>: \u00ab Mise \u00e0 l'\u00e9chelle du contenu \u00bb<\/p>\n<\/li>\n Ce qu'il fait<\/strong>:<\/p>\n Diminuer (\u25bc)<\/strong>:R\u00e9duit le contenu entier de la page jusqu'\u00e0 50%.<\/p>\n<\/li>\n Augmenter (\u25b2)<\/strong>: Zoome le contenu jusqu'\u00e0 200%.<\/p>\n<\/li>\n Ajustements plus larges<\/strong>:Il s\u2019agit en fait d\u2019un zoom sur l\u2019ensemble du site qui fonctionne sur les images, les vid\u00e9os et tous les \u00e9l\u00e9ments, pas seulement sur le texte.<\/p>\n<\/li>\n
Au lieu d'imposer \u00e0 tous les visiteurs une mise en page unique et uniforme, Riman laisse le contr\u00f4le \u00e0 chacun. Chacun peut ajuster la taille du texte, le contraste, l'espacement et bien plus encore pour r\u00e9pondre \u00e0 ses besoins sp\u00e9cifiques.<\/p>\n<\/li>\n
Le bouton flottant \u2630 et le panneau du plugin ne modifient jamais les mod\u00e8les de votre th\u00e8me. Ils sont visibles jusqu'\u00e0 ce qu'on clique dessus et, lorsqu'ils sont utilis\u00e9s, ils n'affectent que le contenu principal, jamais l'interface de contr\u00f4le elle-m\u00eame. Ainsi, les utilisateurs savent toujours o\u00f9 trouver et comment utiliser les outils, m\u00eame apr\u00e8s avoir modifi\u00e9 le reste de la page.<\/p>\n<\/li>\n
Tout (PHP, CSS et JavaScript) est regroup\u00e9 dans un seul fichier PHP. Pas de dossiers de ressources suppl\u00e9mentaires, ni de scripts externes \u00e0 charger. Cela signifie des performances ultra-rapides et une installation simple, sans aucune d\u00e9pendance \u00e0 jQuery ou \u00e0 des frameworks externes.<\/p>\n<\/li>\n
D\u00e8s qu'un visiteur clique sur un bouton, la modification est appliqu\u00e9e instantan\u00e9ment, sans rafra\u00eechissement 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 \u00e9lev\u00e9 ou les images masqu\u00e9es. Ce retour imm\u00e9diat est essentiel pour une exp\u00e9rience positive et sans frustration.<\/p>\n<\/li>\n<\/ol>\n
\n\u00c0 qui profite Riman ?<\/h2>\n
\n
Les personnes qui ont besoin de polices plus grandes, d\u2019un contraste plus \u00e9lev\u00e9 ou d\u2019un espacement plus important entre les lignes pour lire confortablement.<\/p>\n<\/li>\n
Les personnes qui trouvent certaines polices, certains espacements ou certains styles d\u2019alignement difficiles peuvent b\u00e9n\u00e9ficier d\u2019un espacement accru des lettres, d\u2019une \u00ab police lisible \u00bb simplifi\u00e9e ou de la possibilit\u00e9 de supprimer les images g\u00eanantes.<\/p>\n<\/li>\n
Des fonctionnalit\u00e9s telles que le \u00ab Masque de lecture \u00bb aident \u00e0 se concentrer sur un bloc de texte \u00e0 la fois, r\u00e9duisant ainsi la charge cognitive et minimisant les distractions.<\/p>\n<\/li>\n
L'acc\u00e8s 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\u00e9rit\u00e9 limit\u00e9e de naviguer rapidement.<\/p>\n<\/li>\n
L'interface simple et \u00e9pur\u00e9e peut aider les locuteurs non natifs \u00e0 se concentrer sur la lisibilit\u00e9 en basculant les polices, le zoom et l'espacement.<\/p>\n<\/li>\n
M\u00eame si un visiteur n\u2019a pas de handicap diagnostiqu\u00e9, il peut simplement pr\u00e9f\u00e9rer un syst\u00e8me \u00e0 contraste \u00e9lev\u00e9 la nuit, ou il peut vouloir masquer des images pour acc\u00e9l\u00e9rer la lecture sur des connexions lentes.<\/p>\n<\/li>\n<\/ul>\n
\nCommencer<\/h2>\n
\n
Apr\u00e8s l'installation, activez Plugin d'accessibilit\u00e9 Riman<\/strong> depuis Plugins \u2192 Plugins install\u00e9s<\/strong> dans votre tableau de bord WordPress.<\/p>\n<\/li>\n\n
\n
en haut \u00e0 gauche, en haut au centre, en haut \u00e0 droite, au milieu \u00e0 gauche, au milieu \u00e0 droite, en bas \u00e0 gauche, en bas au centre ou en bas \u00e0 droite).<\/p>\n<\/li>\n<\/ul>\n<\/li>\n
Sur l'interface (n'importe quelle page ou article), vous verrez imm\u00e9diatement une ic\u00f4ne circulaire \u2630 \u00e0 l'emplacement choisi (en bas \u00e0 droite par d\u00e9faut). C'est votre passerelle vers le panneau d'accessibilit\u00e9.<\/p>\n<\/li>\n<\/ol>\n
\nExp\u00e9rience utilisateur \u00e9tape par \u00e9tape<\/h2>\n
1. Ouverture et fermeture du panneau<\/h3>\n
\n
Un simple clic sur l'ic\u00f4ne flottante \u2630 (hamburger) provoquera l' Pr\u00e9f\u00e9rences d'accessibilit\u00e9<\/strong> panneau coulissant ouvert directement \u00e0 c\u00f4t\u00e9 de cette ic\u00f4ne.<\/p>\n\n
Presse Ctrl + Alt + A<\/strong> N'importe o\u00f9 sur la page pour ouvrir ou fermer le panneau. Ceci est particuli\u00e8rement utile pour les utilisateurs qui pr\u00e9f\u00e8rent naviguer au clavier ou qui ont du mal \u00e0 utiliser la souris.<\/p>\n<\/li>\n\n
2. Navigation dans la disposition du panneau<\/h3>\n
\n
\n
\n
La section principale est une grille \u00e0 deux colonnes de \u00ab\u00a0tuiles\u00a0\u00bb carr\u00e9es (ou de petits panneaux pour les commandes num\u00e9riques). Chaque tuile contient\u00a0:<\/p>\n\n
Si la fen\u00eatre de votre navigateur est \u00e9troite ou si la grille s'agrandit (par exemple, en raison de l'ajout de fonctionnalit\u00e9s), le panneau devient d\u00e9roulant verticalement. Il vous suffit de glisser ou de faire d\u00e9filer le panneau pour acc\u00e9der aux tuiles masqu\u00e9es, emp\u00eachant ainsi l'acc\u00e8s aux fonctionnalit\u00e9s sur les petits \u00e9crans.<\/p>\n<\/li>\n
Tout en bas se trouve une pleine largeur R\u00e9initialiser<\/strong> bouton. Cliquer dessus supprime imm\u00e9diatement toutes les modifications d'accessibilit\u00e9 appliqu\u00e9es (ramenant la page \u00e0 sa conception d'origine) et ferme le panneau.<\/p>\n<\/li>\n<\/ul>\n
\nDescriptions d\u00e9taill\u00e9es des fonctionnalit\u00e9s et de leur utilisation<\/h2>\n
1. Masque de lecture (\u25ad)<\/h3>\n
\n
\n
2. Contraste \u00e9lev\u00e9 (\ud83c\udf13)<\/h3>\n
\n
\n
#000<\/code>), tout le texte et les bordures deviennent d'un blanc pur (#fff<\/code>), rempla\u00e7ant tous les styles de th\u00e8me existants via !important<\/code>.<\/p>\n<\/li>\n3. Contr\u00f4le de la taille de la police (\u2193 \/ % \/ \u2191)<\/h3>\n
\n
\n
4. Contr\u00f4le de la hauteur de ligne (\u2193 \/ % \/ \u2191)<\/h3>\n
\n
\n
5. Contr\u00f4le de l'espacement des lettres (\u2193 \/ % \/ \u2191)<\/h3>\n
\n
\n
6. Mise \u00e0 l'\u00e9chelle du contenu (Zoom) (\u2193 \/ % \/ \u2191)<\/h3>\n
\n
\n