Make your forum accessible to people with disabilities

[skouliki]

Make your forum accessible to people with disabilities

The purpose of this tip is to introduce you to USER WAY, a service offering the installation of a widget on your Forumotion forum in order to improve the user experience of people with disabilities, in accordance with WCAG (Web Content Accessibility Guidelines) standards. defining web content accessibility guidelines. This widget offers many options like highlighting page elements, highlighting links, enlarging text, etc. USER WAY is the solution to make your forum more inclusive! Spoiler: In the image above, Forumotion had installed the widget on the HTML page of the 2021 Christmas event. As you can see, a button (installed on the right) allows you to unfold a widget with the different accessibility options without having to modify a single line of code in order to make its forum more inclusive. Get USERWAY Widget Obtaining the widget is done directly on the USER WAY website: Get UserWay Now  https://userway.org/get/ First, you must register in order to register the forum(s) on which you are going to install the widget. Two possibilities of registration: either by a valid e-mail address, or through a service (Google, Facebook and LinkedIn). Spoiler: Secondly, you must add the forum(s) on which you will install the widget. Fill in an address then click on the "Add" button. Once this is complete, click on the link (at the bottom of the page) "Skip and Get the Free Accessibility Widget": Spoiler: Thirdly, you must retrieve the Javascript code for your widget! We are going to use the Basic Script. Click on the "Copy" button to copy the code. Spoiler: Install the widget on your Forumotion forum Two installation methods are offered: a simple installation and an advanced one. Choose only one of the two modalities. Easy installation Administration panel  Modules  HTML & JAVASCRIPT - Management of Javascript codes Make sure that Javascript code management is activated , then create a new javascript with the title "Forum accessibility" and the placement "On all pages" . Insert the code below: 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); Simple Script Setup data account This customization step is mandatory! This is to fill in the identifier (ID) of the USERWAY account that you have created. This identifier is given in the script during the third step presented in 1. of this tutorial: Spoiler: So, replace ID_SCRIPT_USERWAY with your ID, framed in red in the screenshot above. Click on the Submit button to save the modifications. The Widget is now functional on your forum. However, depending on the customization of the latter, you will probably have to adapt its position with regard to the presence of the ToolBar, for example. For this purpose, you can simply configure the positioning of the button with CSS: Admin Panel  Display  Colors , CSS Stylesheet tab Code: body .uwy #userwayAccessibilityIcon {    /* Move the button down from your forum header */     margin-top: 23px;  /* Allows to shift the button to the left from the header of your forum */      margin-left: -6px; } Click on the Submit button to save the modifications. Advanced Setup Administration panel  Modules  HTML & JAVASCRIPT - Management of Javascript codes Make sure that Javascript code management is activated, then create a new javascript with the title "Forum accessibility" and the placement "On all pages" . Insert the script below: The script above is more complete than the one proposed in the simple version. Code: (function(d) {  var s = d.createElement("script");  /* Allows you to enter the identifier (ID) of your script */  s.setAttribute("data-account", "ID_SCRIPT_USERWAY");  /* Allows you to define the size of the icon (two possibilities: small (small) or large (large)*/  s.setAttribute("data-size", "large");  /* Allows you to define the color of the accessibility button (enter a hexadecimal color code) */  s.setAttribute("data-color", "#2d68ff");  /* Change the image of the icon (four possibilities: person: "1"; armchair: "2"; eye: "3"; text "4") */  s.setAttribute("data-type", "2");  /* Allows to define the default menu language (french (fr), english (en), spanish (es), german (de), portuguese (pt) ...) */  s.setAttribute("data-language", "en");  /* Allows the widget to adapt to the mobile version (two possibilities: "true" (yes), "false" (no)) */  s.setAttribute("data-mobile", true);  /* Do not modify the information below */  s.setAttribute("src", "https://cdn.userway.org/widget.js");  (d.head).appendChild(s); })(document); Overview of available options data account This customization step is mandatory! This is to fill in the identifier (ID) of the USERWAY account that you have created. This identifier is given in the script during the third step presented in 1. of this tutorial: Spoiler: So, replace ID_SCRIPT_USERWAY with your ID, framed in red in the screenshot above. data size Sets the size of the accessibility button. This option can take only two values: small (small and large ). data color Sets the background color of the accessibility button. The color must be a hexadecimal code, like #FFFFFF . data type Sets the accessibility button image. This option can take four values: 1 (person); 2 (armchair); 3 (eye) and 4 (text: Accessibility menu). data language Allows you to define the default utility language. This option can take many values: fr (French), en (English), es (Spanish), de (German), pt (Portuguese) ... mobile-data Allows the widget to adapt to the mobile version. This option can take two values: true (yes, to activate) and false (no, to deactivate). We recommend leaving the value to true . Do not forget to click on the Submit button in order to save the modifications. The Widget is now functional on your forum. However, depending on the customization of the latter, you will probably have to adapt its position with regard to the presence of the ToolBar, for example. For this purpose, you can simply configure the positioning of the button with CSS: Admin Panel  Display  Colors , CSS Stylesheet tab Code: body .uwy #userwayAccessibilityIcon {    /* Allows to shift the button down from the header of your forum */     margin-top: 23px;    /* Allows to shift the button to the left from the header of your forum */      margin-left: -6px; } Do not forget to click on the Submit button in order to save the modifications.

This tutorial was written by the Staff of the Forum des Forums, and in particular by @Bipo , with the participation of @chattigre . It has been translated to English by @skouliki No reproduction is possible without our agreement, in accordance with article L122-1 of the CPI.