Rendre accessible son forum aux personnes en situation de handicap

[Bipo]

Rendre accessible son forum aux personnes en situation de handicap

Cette astuce a pour finalité de vous présenter USERWAY, un service proposant l'installation d'un widget sur votre forum Forumactif afin d'améliorer l'expérience utilisateur des personnes en situation de handicap, conformément aux normes WCAG (Web Content Accessibility Guidelines) définissant les directives d'accessibilité du contenu Web. Ce widget offre de nombreuses options comme mettre les éléments de la page en contraste, surligner les liens, agrandir le texte, etc. USERWAY est la solution afin de rendre votre forum plus inclusif ! Voir illustration : Dans l'illustration ci-dessus, Forumactif avait installé le widget sur la page HTML de l'évènement de Noël 2021. Comme vous pouvez le constater, un bouton (installé en faut à droite) permet de déplier un widget avec les différentes options d'accessibilité sans avoir à modifier une seule ligne de code afin de rendre son forum plus inclusif. Obtenir le widget USERWAY L'obtention du widget se fait directement sur le site d'USERWAY : Dans un premier temps, il convient de vous inscrire afin de pouvoir enregistrer le (ou les) forum(s) sur le(s)quel(s) vous allez installer le widget. Deux possibilités d'inscription : soit par une adresse e-mail valide, soit par l'intermédiaire d'un service (Google, Facebook et Linked'In). Voir illustration : Dans un deuxième temps, vous devez ajouter le (ou les) forum(s) sur le(s)quel(s) vous allez installer le widget. Renseignez une adresse puis cliquez sur le bouton "Add". Une fois cette opération terminée, cliquez sur le lien (en bas de la page) "Skip and Get the Free Accessibility Widget" : Voir illustration : Dans un troisième temps, vous devez récupérer le code Javascript de votre widget ! Nous allons utiliser le Basic Script. Cliquez sur le bouton "Copy" afin de copier ledit code. Voir illustration : Installer le widget sur votre forum Forumactif Deux modalités d'installation vous sont proposées : une installation simple et une avancée. Ne choisissez qu'une seule des deux modalités. Installation simple Panneau d'administration  Modules  HTML & JAVASCRIPT - Gestion des codes Javascript Assurez-vous que la gestion des codes Javascript soit activée, puis créez un nouveau javascript ayant pour titre "Accessibilité du forum" et pour placement "Sur toutes les pages" (plus d'informations sur la gestion des scripts). Insérez le code ci-dessous : Code: (function(d){var s = d.createElement("script");s.setAttribute("data-account", "ID_SCRIPT_USERWAY");s.setAttribute("src", "https://cdn.userway.org/widget.js");(d.body || d.head).appendChild(s);})(document); Configuration du script simple data-account Cette étape de personnalisation est obligatoire ! Il s'agit de renseigner l'identifiant (ID) du compte USERWAY que vous avez créé. Cet identifiant est donné dans le script lors de la troisième étape présentée dans le 1. de ce tutoriel : Voir illustration : Ainsi, il convient de remplacer ID_SCRIPT_USERWAY par votre ID, encadré en rouge dans la capture d'écran ci-dessus. Cliquez sur le bouton Valider afin de sauvegarder les modifications. Le Widget est maintenant fonctionnel sur votre forum. Toutefois, en fonction de la personnalisation de ce dernier, vous devrez probablement adapter sa position eu égard à la présence de la ToolBar, par exemple. A cet effet, vous pouvez paramétrer simplement le positionnement du bouton avec du CSS : Panneau d'administration  Affichage  Couleurs, onglet Feuille de style CSS Code: body .uwy #userwayAccessibilityIcon {     /* Permet de décaler le bouton vers le bas à partir du header de votre forum */     margin-top: 23px;     /* Permet de décaler le bouton vers la gauche à partir du header de votre forum */       margin-left: -6px; } Cliquez sur le bouton Valider afin de sauvegarder les modifications. Installation avancée Panneau d'administration  Modules  HTML & JAVASCRIPT - Gestion des codes Javascript Assurez-vous que la gestion des codes Javascript soit activée, puis créez un nouveau javascript ayant pour titre "Accessibilité du forum" et pour placement "Sur toutes les pages" (plus d'informations sur la gestion des scripts). Insérez le script ci-dessous : Code: (function(d) {     var s = d.createElement("script");     /* Permet de renseigner l'identifiant (ID) de votre script */     s.setAttribute("data-account", "ID_SCRIPT_USERWAY");     /* Permet de définir la taille de l'icône (deux possibilités : small (petite) ou large (grande)*/     s.setAttribute("data-size", "large");     /* Permet de définir la couleur du bouton d'accessibilité (renseigner un code couleur hexadécial) */     s.setAttribute("data-color", "#2d68ff");     /* Permet de changer l'image de l'icône (quatre possibilités : personne : "1" ; fauteuil : "2" ; oeil : "3" ; texte "4") */     s.setAttribute("data-type", "2");     /* Permet de définir la langue par défaut du menu (français (fr), anglais (en), espagnol (es), allemand (de), portugais (pt) ...) */     s.setAttribute("data-language", "fr");     /* Permet au widget de s'adapter à la version mobile (deux possibilités : "true" (oui), "false" (non)) */     s.setAttribute("data-mobile", true);     /* Ne pas modifier les informations ci-dessous */     s.setAttribute("src", "https://cdn.userway.org/widget.js");     (d.head).appendChild(s); })(document); Le script ci-dessus est plus complet que celui proposé dans la version simple. Présentation des options disponibles data-account Cette étape de personnalisation est obligatoire ! Il s'agit de renseigner l'identifiant (ID) du compte USERWAY que vous avez créé. Cet identifiant est donné dans le script lors de la troisième étape présentée dans le 1. de ce tutoriel : Voir illustration : Ainsi, il convient de remplacer ID_SCRIPT_USERWAY par votre ID, encadré en rouge dans la capture d'écran ci-dessus. data-size Permet de définir la taille du bouton d'accessibilité. Cette option peut prendre seulement deux valeurs : small (petite et large (grand). data-color Permet de définir la couleur de fond du bouton d'accessibilité. La couleur doit être un code hexadécimal, du type #FFFFFF. data-type Permet de définir l'image du bouton d'accessibilité. Cette option peut prendre quatre valeurs : 1 (personne) ; 2 (fauteuil) ; 3 (oeil) et 4 (texte : Menu d'accessibilité). data-language Permet de définir la langue utilité par défaut. Cette option peut prendre de nombreuses valeurs : fr (français), en (anglais), es (espagnol), de (allemand), pt (portugais) ... data-mobile Permet au widget de s'adapter à la version mobile. Cette option peut prendre deux valeurs : true (oui, pour l'activé) et false (non, pour le désactiver). Nous vous recommandons de laisser la valeur sur true. N'oubliez pas de cliquer sur le bouton Valider afin de sauvegarder les modifications. Le Widget est maintenant fonctionnel sur votre forum. Toutefois, en fonction de la personnalisation de ce dernier, vous devrez probablement adapter sa position eu égard à la présente de la ToolBar, par exemple. A cet effet, vous pouvez paramétrer simplement le positionnement du bouton avec du CSS : Panneau d'administration  Affichage  Couleurs, onglet Feuille de style CSS Code: body .uwy #userwayAccessibilityIcon {     /* Permet de décaler le bouton vers le bas à partir du header de votre forum */     margin-top: 23px;     /* Permet de décaler le bouton vers la gauche à partir du header de votre forum */       margin-left: -6px; } N'oubliez pas de cliquer sur le bouton Valider afin de sauvegarder les modifications.

Ce tutoriel a été rédigé par le Staff du Forum des Forums, Et en particulier par Bipo, avec la participation de chattigre. Aucune reproduction possible sans notre accord, conformément à l’article L122-1 du CPI.