Sto lavorando all’iniziativa COVID-19 RAMP. Abbiamo scelto Discourse per il nostro forum e ne siamo molto soddisfatti.
Un mio collega e io stiamo esaminando l’accessibilità. Credo di aver risolto i problemi di contrasto insufficiente tramite la funzionalità CSS dell’amministratore. Tuttavia, secondo WAVE, ci sono alcuni problemi che non siamo sicuri di poter risolvere da soli, come segue:
Immagini collegate prive di testo alternativo: si tratta delle immagini degli avatar. Esiste un titolo descrittivo, ma l’attributo alt è vuoto.
Manca un’etichetta in ogni pagina:
<div><input type="text"></div>
In ogni pagina è presente un’intestazione vuota:
<div class="title"><h3></h3><!-- --></div>
Sono segnalati numerosi pulsanti vuoti, associati a SVG.
Ci sono link vuoti, ad esempio: <a href="" aria-hidden="true" tabindex="-1" class="tabLoc"></a>
e <a href="" class="edit-topic" title="edit the title and category of this topic" data-ember-action="" data-ember-action-27="27"><svg class="fa d-icon d-icon-pencil-alt svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use xlink:href="#pencil-alt"></svg></a>.
C’è un’intestazione di tabella vuota: <th data-sort-order="posters" class="posters"></th>
Mi sorprenderebbe molto se fossimo gli unici ad avere questi problemi, quindi mi chiedo se WAVE stia esagerando o se forse ci stiamo perdendo qualche accorgimento. Qualsiasi aiuto sarà molto apprezzato.
Grazie per l’interesse. C’è un elemento di cui non sono sicuro di riuscire a trovare (l’intestazione vuota), ma gli altri li individuo tramite la funzionalità “codice” di WAVE e riesco a trovarli (con un po’ di sforzo) con l’ispettore F12.
Non sono sicuro che i fusi orari giochino a nostro favore (sono nel Regno Unito, UTC+01:00), ma sarei felice di fare una chiamata su Teams o simile per mostrare, se utile.
Alcuni screen reader ignorano correttamente gli avatar, ma altri leggono due volte il nome/nome utente a causa di ciò.
Ho creato una PR per rimuovere l’attributo title dagli avatar nei post:
Questo è l’input dove mostriamo l’URL da copiare e condividere. PR per aggiungere un’etichetta aria qui:
Non sono riuscito a trovarla… potrebbe dipendere dalle impostazioni del sito? Devo guardare un po’ più a fondo
Non etichettiamo questo elemento per gli utenti vedenti perché possiamo dare un’occhiata alla colonna e dedurre il suo contenuto… è molto più difficile farlo se non si vede… ha senso aggiungere un’etichetta per gli screen reader:
I problemi rimanenti che non ho trattato sono relativi ai pulsanti; devo ancora analizzarli…
Molte grazie per le rapide risposte e azioni intraprese all’epoca. Posso confermare che le richieste unite sono ora presenti nel codice a partire da una certa versione?
Inoltre, sarebbe utile se io (riordinassi e) condividessi il tema che abbiamo modificato per superare i test di accessibilità WAVE?
Prenderò il coraggio necessario per effettuare tutti gli aggiornamenti in un secondo momento (spero) e farò di nuovo rapporto.
Per quanto riguarda il tema, è diventato un po’ confuso. Utilizziamo (e abbiamo modificato) il tema Light. Abbiamo apportato le seguenti modifiche di alto livello ai colori:
L’astuto trucco che ho pensato in ritardo è semplicemente testare la pagina dei colori per l’accessibilità.
Successivamente, abbiamo apportato un gran numero di modifiche utilizzando l’editor CSS (admin/customize/themes/3/common/scss/edit) e non sono sicuro di come trasmetterle (posso copiare e incollare, ma non sono sicuro che sia ciò che desideri o se desideri che venga inserito in questo thread). Penso che se potessimo visualizzare gli altri colori menzionati (ad esempio var(–primary-medium)) in un’interfaccia di alto livello, le cose potrebbero diventare più semplici. Ad esempio, una classica modifica è stata #919191 → #595959, ma il mio metodo tratta solo i sintomi che riesco a vedere navigando tra le pagine (e poi ancora, la natura dinamica del “sito” significa che ciò che funziona oggi potrebbe non funzionare domani).
Sono disponibile a provare in un modo diverso, fammi solo sapere, anche se in nessun momento potrò eseguire un servizio di dimostrazione, controllare il codice, ecc.
Dovrei anche notare che non sono riuscito a correggere affatto admin/upgrade (e presenta numerosi problemi di contrasto); non sono sicuro se non segua il CSS o qual sia il motivo.
Il mio ricordo è che la parte di amministrazione di Discourse abbia fogli di stile separati (più difficili da modificare) per rendere più difficile per gli utenti bloccarsi accidentalmente fuori da un’interfaccia di amministrazione utilizzabile con modifiche al CSS.
Mi sono un po’ lasciato indietro con questo, anche se abbiamo aggiornato il forum. Tuttavia, ho pensato di rispondere alle persone che si sono prese il tempo (molti ringraziamenti!) per esaminare questa discussione.
Grazie. Se faccio clic sul tuo collegamento, Wave rileva 13 problemi di accessibilità (basso contrasto), ma non sui colori stessi. Questo perché, a differenza della pagina dei colori, non mostra come vengono utilizzati (come sfondo o primo piano con il testo).
Fammi sapere come posso aiutare; ci sono molti errori di contrasto.
Ho dato un’occhiata più attenta e il numero di errori è notevolmente diminuito, grazie mille a @awesomerobot e a tutti gli altri che hanno contribuito!
Rimangono ancora i seguenti errori:
Visitando una categoria: pulsante vuoto nel seguente codice:
Nei post valutati (non sono sicuro di quanto sia diffuso in Discourse, è un’estensione che @angus ha gentilmente sviluppato per noi): Etichetta del modulo mancante
Numerosi (40 nella pagina che sto esaminando, con due utenti che hanno valutato) esempi come questo: <input class=" disabled" type="radio" value="1" checked="" disabled="">. Questo si trova sotto <span class="star-rating">.
