Introduzione

A partire da luglio 2020, tutte le nuove funzionalità di Docebo Learn soddisfano gli standard di accessibilità definiti nell'Accessibility Statement di Docebo (si apre in una nuova scheda). Docebo si impegna a creare un'esperienza compatibile per chi naviga solo tramite tastiera o screen reader continuando a monitorare le evoluzioni delle linee guida in termini di accessibilità. Docebo ha lo scopo di implementare l'accessibilità nativa per creare funzionalità accessibili di default, utilizza codice semantico - integrato da WAI-ARIA - e non si affida a sovrapposizioni o plug-in non compatibili con le esigenze delle persone con disabilità.

Considerare l'accessibilità quando si configura l'interfaccia della piattaforma è molto importante. Questo articolo fornisce alcune considerazioni di base per aiutare a configurare l'interfaccia della propria piattaforma tenendo conto dell'accessibilità.

Maggiori dettagli sulla creazione di contenuti accessibili.

Colori e Contrasto

Il contrasto e i colori sono fondamentali per un'interfaccia accessibile. Il testo deve avere un rapporto di contrasto sufficiente rispetto allo sfondo, in modo da consentire agli utenti con diverse abilità visive di percepire e comprendere il contenuto. Gli utenti, compresi quelli con problemi di vista, devono essere in grado di percepire i contenuti della pagina.

Mantenere un rapporto di contrasto minimo di almeno 4,5:1 per il testo di dimensioni normali e di almeno 3:1 per il testo di grandi dimensioni. Inoltre, la presentazione visiva dei componenti dell'interfaccia utente e degli oggetti grafici deve avere un rapporto di contrasto di almeno 3:1 rispetto ai colori adiacenti.

Sono disponibili online diversi strumenti per verificare il contrasto cromatico, come ad esempio:

• Color Contrast Checker (si apre in una nuova scheda)
• Color Contrast Analyser (si apre in una nuova scheda)

Tema con Colori Accessibili

Il tema cromatico di default di Docebo Learn include colori accessibili.

È possibile configurare i colori accessibili in piattaforma impostandoli nel menu Configurazione Aspetto e Branding, sezione Colori.

Utilizzare codici HEX indicati nella tabella che segue:

Personalizzazione del Codice

Tutte le personalizzazioni del codice della piattaforma devono utilizzare elementi semantici appropriati per non comprometterne l'accessibilità.

Codice Semantico

L'HTML semantico - o l'equivalente WAI ARIA - è essenziale per l'accessibilità, poiché fornisce una struttura e un contesto chiari e significativi per i contenuti web. Inoltre, aiuta gli screen reader e le altre tecnologie assistive nell'interpretazione e nella navigazione delle pagine web, consentendo agli utenti disabili di accedere ai contenuti con maggiore facilità.

Link e Pulsanti

Quando si includono link o pulsanti nei propri contenuti personalizzati, assicurarsi che il loro scopo sia chiaro nel testo del link. Evitare termini generici come "clicca qui" e utilizzare invece un testo descrittivo che indichi dove porterà il link. Questa pratica aiuta gli utenti di screen reader che navigano nei contenuti utilizzando link.

Non Nascondere Elementi

Fare attenzione a non nascondere gli elementi strutturali della piattaforma (come la barra del titolo, le breadcrumb e l'intestazione) per non compromettere l'esperienza d'uso di chi utilizza tecnologie assistive. Se proprio è necessario nascondere degli elementi, assicurarsi che la personalizzazione fornisca un'alternativa equivalente.

Gerarchia dei Contenuti

Assicurarsi di organizzare i contenuti assegnando ai titoli il livello di intestazione corretto: i titoli comunicano l'organizzazione dei contenuti della pagina. I browser, i plug-in e le tecnologie assistive li utilizzano per navigare la pagina. Ricordare che per ogni pagina è consentito un solo titolo di livello 1 o <h1>, gestito di default dalla barra del titolo della piattaforma. Ciò significa che è necessario utilizzare contenuti personalizzati a partire dal livello 2 o <h2>.

Attenzione! Docebo non è responsabile di eventuali modifiche applicate tramite CSS personalizzati o iniezione di contenuti HTML.