Palette di colori ad alto contrasto WCAG per la bassa visione

Grazie al lavoro di @pmusaraj e al mio, Discourse ora include l’opzione per selezionare una palette di colori ad alto contrasto direttamente dalla procedura guidata di configurazione.

Queste palette danno priorità al contrasto del testo e sono progettate per rispettare le Linee Guida per l’Accessibilità dei Contenuti Web (WCAG) per il contrasto dei colori (Livello AA). Sotto il cofano, queste non sono palette di colori normali; includono anche automaticamente CSS aggiuntivo.

Sono disponibili sia una versione chiara che una scura (sono le ultime due opzioni nell’elenco). I siti esistenti possono accedere ai colori visitando community.yoursite.com/wizard/steps/color o selezionandoli come palette di base quando ne creano una nuova da admin > personalizza > colori.

Una volta create, queste palette saranno elencate sotto admin > personalizza > colori — se non le stai utilizzando come colori predefiniti del tuo sito, puoi anche consentire agli utenti di selezionarle.

Quando impostate come selezionabili dagli utenti, le persone possono scegliere la propria palette di colori nella sezione interfaccia delle loro preferenze (community.yoursite.com/my/preferences/interface).

Se riscontri problemi con il contrasto di queste palette, faccelo sapere in modo che possiamo continuare a rispettare gli standard stabiliti dalle WCAG!

27 Mi Piace

Sarebbe davvero bello se il tema predefinito di Discourse rispettasse gli standard stabiliti dal WCAG. Puoi commentare il motivo per cui non è così?

4 Mi Piace

Poiché Discourse non è stato originariamente progettato con colori ad alto contrasto, probabilmente dovremmo apportare modifiche più significative oltre al solo colore per tenere conto delle differenze. Fare questo come primo passo rende disponibili oggi questi colori più accessibili.

Un esempio rapido è il modo in cui mostriamo la differenza tra argomenti letti e non letti. Di default, lo facciamo riducendo il contrasto dopo aver letto un argomento:

Quando si rispettano gli standard WCAG, dobbiamo aumentare il contrasto dei titoli degli argomenti letti e, di conseguenza, c’è poco contrasto tra quelli letti e quelli non letti… quindi penso che, nel lungo termine, dovremmo considerare un approccio diverso dal contrasto per distinguerli.

15 Mi Piace

Ho capito. Vorrei solo incoraggiare il team a continuare a portare avanti quel lavoro.

8 Mi Piace

Questo è fenomenale, grazie. A nome di alcuni dei miei utenti con disabilità visive che hanno lamentato questo problema, è molto apprezzato. L’ho immediatamente abilitato.

15 Mi Piace

Dopo aver letto il primo post, avevo l’impressione che i nuovi colori dovessero essere selezionati nella procedura guidata per essere aggiunti a un elenco. Avviando la procedura guidata e arrivando alla pagina Colori, stavo cercando un modo per selezionare tutti i colori, poiché volevo aggiungere i nuovi colori all’elenco. A quanto pare, la mia comprensione non era corretta. Da quello che vedo, basandomi sul modo in cui i colori vengono selezionati nella pagina Colori, è possibile scegliere solo una combinazione di colori. Quindi ora sono confuso.

  1. Cosa si ottiene scegliendo una combinazione nella pagina Colori? Imposta il valore predefinito per tutti?
  2. Perché nella procedura guidata è consentita la scelta di una sola combinazione di colori? Probabilmente la risposta è la stessa della domanda 1.

Poiché sto scrivendo mentre seguo il primo post, ho lasciato le impostazioni della pagina Colori così come erano.

Passando a admin > personalizza > colori. Dopo alcune prove ho scoperto che:

  1. Seleziona Nuovo
  2. Per Tavolozza di base apri il menu a tendina che ora include WCAG Light e WCAG Dark.
    questo offre un modo per selezionare gli elementi.

Quindi ho selezionato WCAG Light e mi è stato presentato un dialogo per nominare la tavolozza di colori e scegliere i colori. Come nell’esempio, ho inserito il nome WCAG Light, selezionato La combinazione di colori può essere scelta dagli utenti e poi ho cliccato su Salva.

Passando a community.yoursite.com/my/preferences/interface, non ho trovato la sezione Combinazione di colori.

Inoltre, il nostro sito ha il Selettore tema Hamburger; pensavo che questi potessero apparire automaticamente lì, ma sembra che debba creare un nuovo Tema di base (Tema) per utilizzarli.

Non si tratta di una lamentela, ma solo di un feedback da parte di qualcuno che legge il post per la prima volta e lo mette alla prova. :slightly_smiling_face:

2 Mi Piace

Hmm, avrebbe dovuto funzionare. È possibile che fosse necessario un aggiornamento della pagina delle preferenze dell’interfaccia.

3 Mi Piace

Questa è la schermata che vedo. Ho anche ricaricato la pagina HTML, ma non c’è stato alcun cambiamento.

Nota: il sito è ospitato da Discourse Hosting, se questo ha importanza - https://swi-prolog.discourse.group/

1 Mi Piace

Ho dato un’occhiata al tuo sito e non vedo l’opzione “Gli utenti possono selezionare lo schema dei colori” abilitata in nessuno dei due schemi. Forse non hai selezionato la casella per salvare la scelta?

5 Mi Piace

Oh, è stato così divertente. Non tu, ma quello che ho fatto io. Grazie per aver controllato e risposto.

Da Admin > Impostazioni > Personalizza > Colori

Vedi WCAG Light e WCAG Dark nel pannello di sinistra.

Cliccando su WCAG Light appare

Ho poi abilitato Lo schema colori può essere selezionato dagli utenti

Quello che non ho notato la prima volta è stata la casella di controllo blu aggiunta

Cliccando sulla casella di controllo blu aggiunta, la visualizzazione cambia in

poi andando su SWI-Prolog - Users and developers of SWI-Prolog, an implementation of the Prolog programming language ora mostra

:slightly_smiling_face:


Dopo aver aggiunto alcuni altri colori utilizzabili dagli utenti, l’opzione dell’interfaccia è cambiata per offrirmi una scelta sia per la modalità Regular che per quella Dark

7 Mi Piace

Puoi spiegare meglio cosa significa? Sto per configurare il mio primo forum e vorrei personalizzare la combinazione di colori, oltre a supportare il passaggio automatico alla modalità scura in base alle preferenze di sistema dell’utente.

Dovrei personalizzare i colori partendo da questi nuovi schemi come base?

Quali sono i passaggi attuali per creare una combinazione di colori personalizzata, tenendo conto delle recenti modifiche alla costruzione degli schemi di colore per supportare la modalità scura (come discusso in recenti discussioni) e di questi nuovi schemi accessibili?

Grazie!

2 Mi Piace

Quindi, quando vengono selezionate queste palette WCAG, viene caricato del CSS aggiuntivo (trovato qui) per modificare i colori di vari elementi (solitamente per utilizzare una variabile di colore a contrasto più elevato rispetto a quella che usiamo di default). Credo che il CSS venga caricato in base al nome della palette di colori…

Quindi, se vuoi modificare queste palette e mantenere alcuni dei miglioramenti di contrasto forniti dal CSS personalizzato, penso che dovrai semplicemente non cambiare il nome (è corretto, @pmusaraj?).

In alternativa, puoi copiare il CSS dal link sopra e utilizzarlo nel tuo tema (anche se perderai gli aggiornamenti che apportiamo).

9 Mi Piace

No, il CSS specifico per WCAG viene incluso se lo schema corrente è un derivato di uno dei due schemi WCAG di base. Quindi puoi chiamare il nuovo schema come preferisci, ma se è creato a partire da uno schema WCAG di base, avrà il CSS aggiuntivo.

10 Mi Piace

È fantastico vedere questa nuova funzionalità! Sono curioso: Discourse rispetta attualmente tutte le linee guida WCAG o c’è ancora del lavoro da fare?

1 Mi Piace

C’è ancora un po’ di lavoro da fare, ma non molto. Siamo al 99% e stiamo lavorando attivamente con un consulente per l’accessibilità per colmare le ultime lacune.

7 Mi Piace

È ottimo sentirlo per tutti gli utenti. E a quali linee guida WCAG state lavorando? WCAG 3.0?

2 Mi Piace

Stiamo lavorando per conformarci alle WCAG 2.0; la versione 3.0 è ancora in fase di bozza, come indicato su WCAG 3 Introduction | Web Accessibility Initiative (WAI) | W3C

7 Mi Piace

Seguendo questo thread, sono felice di sapere che WCAG 2.0 è supportato. Potrei averlo perso, ma non vedo menzionata la sottotitolazione. Discourse supporta i sottotitoli per i file video? Esiste un meccanismo in Discourse per pubblicare video con sottotitoli?

2 Mi Piace

Puoi aggiungere manualmente i sottotitoli utilizzando il tag video HTML5, ed esiste anche un componente del tema che fornisce una piccola interfaccia utente per questo.

8 Mi Piace

Grazie mille per WCAG Dark! Lo adoro!!

In realtà non ne ho un bisogno specifico (per quanto ne so) - penso solo che abbia un aspetto fantastico. :heart:

3 Mi Piace