Rendi il tuo forum accessibile alle persone con disabilità

Da **Niko** Sab 30 Lug 2022 - 14:54

Rendi il tuo forum accessibile alle persone con disabilità

Lo scopo di questo suggerimento è di presentarti USER WAY, un servizio che offre l'installazione di un widget sul tuo forum Forumattivo per migliorare l'esperienza utente delle persone con disabilità, in conformità con WCAG (Linee guida per l'accessibilità dei contenuti Web) standard. definizione delle linee guida per l'accessibilità dei contenuti web. Questo widget offre molte opzioni come evidenziare gli elementi della pagina, evidenziare i link, ingrandire il testo, ecc. USER WAY è la soluzione per rendere il tuo forum più inclusivo!

Spoiler:

Nell'immagine sopra, Forumattivo aveva installato il widget sulla pagina HTML dell'evento di Natale 2021. Come puoi vedere, un pulsante (installato a destra) ti permette di aprire un widget con le diverse opzioni di accessibilità senza dover modificare una sola riga di codice per rendere il suo forum più inclusivo.

Ottieni il widget USERWAY

L'ottenimento del widget avviene direttamente sul sito USER WAY:
Ottieni UserWay ora https://userway.org/get/

Innanzitutto, devi registrarti per poter registrare i forum su cui installerai il widget. Due possibilità di registrazione: o tramite un indirizzo e-mail valido, oppure tramite un servizio (Google, Facebook e LinkedIn).

Spoiler:

In secondo luogo, devi aggiungere i forum su cui installerai il widget. Inserisci un indirizzo, quindi fai clic sul pulsante "Aggiungi". Una volta completato, fai clic sul link (in fondo alla pagina) "Salta e ottieni il widget di accessibilità gratuito":

Spoiler:

In terzo luogo, devi recuperare il codice Javascript per il tuo widget! Utilizzeremo lo script di base. Fare clic sul pulsante "Copia" per copiare il codice.

Spoiler:

Installa il widget sul tuo forum Forumattivo

Sono offerti due metodi di installazione: un'installazione semplice e uno avanzato. Scegli solo una delle due modalità.

Installazione semplice

Andiamo verso Pannello di amministrazione ► Moduli ► HTML & Javascript ► Gestione del codice javascript, assicuriamoci che la gestione sia attivata e creiamo un nuovo codice con queste impostazioni:

Titolo: a tua scelta
Dove: tutte le pagine
Codice:
Codice:
(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);

Semplice configurazione dello script
data account	Questo passaggio di personalizzazione è obbligatorio! Questo serve per compilare l'identificatore (ID) dell'account USERWAY che hai creato. Questo identificatore viene fornito nello script durante il terzo passaggio presentato in 1. di questo tutorial: Spoiler: Quindi, sostituire ID_SCRIPT_USERWAY con il tuo ID, incorniciato in rosso nello screenshot qui sopra.

Fai clic sul pulsante Invia per salvare le modifiche.

Il widget è ora funzionante sul tuo forum. Tuttavia, a seconda della personalizzazione di quest'ultimo, dovrai probabilmente adattare la sua posizione per quanto riguarda la presenza della ToolBar, ad esempio. A tale scopo, puoi semplicemente configurare il posizionamento del pulsante con CSS:

andando verso Pannello di amministrazione ► Visualizzazione ► Immagini & CSS ► Gestione del foglio di stile CSS

Codice:: 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; }

Fai clic sul pulsante Invia per salvare le modifiche.

Configurazione avanzata

Andiamo verso Pannello di amministrazione ► Moduli ► HTML & Javascript ► Gestione del codice javascript, assicuriamoci che la gestione sia attivata e creiamo un nuovo codice con queste impostazioni:

Titolo: a tua scelta
Dove: tutte le pagine
Codice:
Codice:
(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);

Lo script sopra è più completo di quello proposto nella versione semplice.

Panoramica delle opzioni disponibili
data account	Questo passaggio di personalizzazione è obbligatorio! Questo serve per inserire l'identificatore (ID) dell'account USERWAY che hai creato. Questo identificatore viene fornito nello script durante il terzo passaggio presentato in 1. di questo tutorial: Spoiler: Quindi, sostituite ID_SCRIPT_USERWAY con il tuo ID, incorniciato in rosso nello screenshot qui sopra.
data size	Imposta la dimensione del pulsante di accessibilità. Questa opzione può assumere solo due valori: small (small and large ).
data color	Imposta il colore di sfondo del pulsante di accessibilità. Il colore deve essere un codice esadecimale, come #FFFFFF .
data type	Imposta l'immagine del pulsante di accessibilità. Questa opzione può assumere quattro valori: 1 (person); 2 (armchair); 3 (eye) and 4 (text: Accessibility menu).
data language	Consente di definire la lingua dell'utilità predefinita. Questa opzione può assumere molti valori:fr (French), en (English), es (Spanish), de (German), pt (Portuguese) ...
mobile-data	Consente al widget di adattarsi alla versione mobile. Questa opzione può assumere due valori: true (si, per attivare) e false (no, per disattivare). Si consiglia di lasciare il valore come true .

Non dimenticare di fare clic sul pulsante Invia per salvare le modifiche.

Il widget è ora funzionante sul tuo forum. Tuttavia, a seconda della personalizzazione di quest'ultimo, dovrai probabilmente adattare la sua posizione per quanto riguarda la presenza della ToolBar, ad esempio. A tale scopo, puoi semplicemente configurare il posizionamento del pulsante con CSS:

andando verso Pannello di amministrazione ► Visualizzazione ► Immagini & CSS ► Gestione del foglio di stile CSS, inseriamo:

Codice:: 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; }

Non dimenticare di fare clic sul pulsante Invia per salvare le modifiche.