The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Make your forum accessible to people with disabilities

Go down

Tutorial Make your forum accessible to people with disabilities

Post by skouliki June 14th 2022, 2:49 pm

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 accountThis 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 accountThis 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 sizeSets the size of the accessibility button. This option can take only two values: small (small and large ).
data colorSets the background color of the accessibility button. The color must be a hexadecimal code, like #FFFFFF .
data typeSets the accessibility button image. This option can take four values: 1 (person); 2 (armchair); 3 (eye) and 4 (text: Accessibility menu).
data languageAllows you to define the default utility language. This option can take many values: fr (French), en (English), es (Spanish), de (German), pt (Portuguese) ...
mobile-dataAllows 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.
skouliki
skouliki
Manager
Manager

Female Posts : 15411
Reputation : 1709
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Luzz, Ape, sivastar, SLGray, Bipo, SarkZKalie, TonnyKamper and like this post

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum