Rendre accessible son forum aux personnes en situation de handicap

Voir le sujet précédent Voir le sujet suivant Aller en bas

  • 0

Astuce Rendre accessible son forum aux personnes en situation de handicap

Message par Bipo Mar 7 Juin 2022 - 22:14

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 :

Rendre accessible son forum aux personnes en situation de handicap 19-05-10

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-accountCette é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-accountCette é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-sizePermet de définir la taille du bouton d'accessibilité. Cette option peut prendre seulement deux valeurs : small (petite et large (grand).
data-colorPermet de définir la couleur de fond du bouton d'accessibilité. La couleur doit être un code hexadécimal, du type #FFFFFF.
data-typePermet 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-languagePermet 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-mobilePermet 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.

Bipo

Bipo
Rédactif
Rédactif

Messages : 2380
Inscrit(e) le : 23/09/2010

Voir le profil de l'utilisateur
Bipo a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum