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:
| Area Colore | Codice Hex Colore |
|---|---|
| Colore Principale | #0068D9 |
| Colore del Testo Principale | #212721 |
| Colore del Testo Secondario | #707070 |
| Testo Accentato & Colore del Link | #0068D9 |
| Bordi, Linee | #E4E6E5 |
| Background e Elementi Sensibili | #f5f5f5 |
| Messaggi di Conferma | #008767 |
| Avvisi | #F7681E |
| Errori | #E62231 |
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.