Problema 1: Navigazione intestazione interrotta / Manipolazione DOM

[adress (Angela Dresselhaus)]

Problema: Gli elementi dei post di risposta non vengono visualizzati inizialmente nel Document Object Model (DOM) al caricamento iniziale della pagina e vengono rimossi dal DOM dopo che lo screen reader li ha attraversati, causando la perdita di accesso ai contenuti da parte degli screen reader di Windows e limitando gli strumenti che VoiceOver può utilizzare per accedere alla pagina.

Comportamento specifico:

● Quando si tenta di navigare dal post principale ai post di risposta, gli elementi utilizzati nei post di risposta non sono ancora stati renderizzati nel DOM, pertanto gli utenti non possono utilizzare la navigazione rapida per spostarsi su alcun elemento in alcun post di risposta.

● I singoli post di risposta vengono contrassegnati come intestazione di livello 2 nel DOM solo quando lo screen reader è focalizzato su di essi, richiedendo agli utenti di navigare ogni elemento della pagina per raggiungere i post di risposta.

● Lo strumento di accessibilità ANDI mostra una struttura di intestazione in costante cambiamento dopo le interazioni con gli elementi.

● Gli elementi mostrano errori “rimossi dal DOM” quando si tenta di accedervi.

● Lo screen reader perde la visualizzazione coerente della struttura della pagina.

Dettagli della piattaforma:

● JAWS/NVDA: Fallimento completo: impossibile accedere alle intestazioni di risposta.

● VoiceOver: Accesso tramite navigazione rapida ma nessun accesso al rotore: poiché VoiceOver funziona leggendo direttamente la pagina, gli utenti possono navigare tra le intestazioni di risposta utilizzando i tasti di navigazione rapida, tuttavia solo gli elementi su cui lo screen reader è focalizzato sono accessibili all’interno del rotore.

Perché critico: Gli utenti di screen reader non possono completare l’attività principale di lettura delle risposte alle discussioni. Questa è una barriera totale alla partecipazione alle discussioni.

[adress (Angela Dresselhaus)]

Questi problemi sono stati segnalati per la prima volta in Screen Reader Accessibility issues . Si prega di assistere nella risoluzione, abbiamo un’intera comunità di utenti non vedenti e ipovedenti impossibilitati a completare le funzioni di base sulla bacheca delle discussioni.

[awesomerobot (Kris)]

Grazie per aver segnalato questi problemi!

Sai su quale argomento specifico è stato testato? Sarebbe utile avere un riferimento condiviso per assicurarci di vedere gli stessi problemi, ci sono molte variazioni nei contenuti dei post, quindi vorrei assicurarmi che stiamo concentrando i nostri sforzi nel posto giusto.

Potremmo usare try.discourse.org, o possiamo usare un post qui su Meta come riferimento, se questo può aiutare.

@adress

quindi gli utenti non possono utilizzare la navigazione rapida per navigare verso alcun elemento in alcuna risposta.

Con “navigazione rapida” ti riferisci specificamente agli elenchi di elementi? Posso confermare che sia in NVDA che in VoiceOver solo il contenuto attualmente disponibile nel DOM può essere accessibile negli elenchi di elementi, questo è vero anche per gli utenti vedenti ed è una parte fondamentale del funzionamento di Discourse. Invece della paginazione manuale, carichiamo/scarichiamo contenuti mentre qualcuno scorre verso il basso/l’alto della pagina.

@adress

richiedendo agli utenti di navigare ogni elemento della pagina per raggiungere le risposte.

Questo è solitamente ciò che mi aspetto quando qualcuno menziona la “navigazione rapida”, anche se mi rendo conto che la terminologia non è sempre coerente tra le applicazioni.

Ho confermato che la navigazione da elemento a elemento funziona in NVDA e VoiceOver, ma ho identificato un problema con i nostri “piccoli post” all’interno degli argomenti che può impedire la continuazione della navigazione e applicherò una correzione.

Un “piccolo post” è un aggiornamento di stato dell’argomento come fissato, chiuso/aperto, attivato, ecc. Il problema con questi è che non hanno un’intestazione interna come i post normali, quindi quando cadono sulla soglia prima che vengano caricati altri post durante la navigazione… un utente potrebbe essere fermato e sentire solo “nessuna intestazione successiva”.

@adress

Lo strumento di accessibilità ANDI mostra una struttura di intestazione in costante cambiamento dopo le interazioni con gli elementi.

Strumenti automatici come ANDI spesso non riescono a riconoscere le modifiche del DOM nelle applicazioni web come Discourse, sono generalmente costruiti per scenari più semplici come le pagine statiche. Quindi, mentre a volte utilizziamo questi strumenti per identificare i problemi noi stessi, in scenari più complessi come la navigazione dobbiamo concentrarci su ciò che possiamo riprodurre con test manuali.

@adress

Gli elementi mostrano errori “rimossi dal DOM” quando si tenta di accedervi

Lo screen reader perde la visione coerente della struttura della pagina

Presumo che anche questo si riferisca agli elenchi di elementi? Questo è previsto, ma forse c’è un miglioramento che possiamo considerare per far funzionare gli elenchi di elementi in Discourse, posso discuterne con i nostri ingegneri per un input.

@adress

JAWS/NVDA: Fallimento completo - impossibile accedere alle intestazioni delle risposte

Anche questo è specificamente in un elenco di elementi? Come menzionato sopra, ho testato la navigazione NVDA e VoiceOver per la navigazione da elemento a elemento e posso confermare che funziona… ma se c’è un contesto specifico in cui non funziona, possiamo esaminarlo più da vicino.

[adress (Angela Dresselhaus)]

@awesomerobot

Sai su quali argomenti specifici è stato testato?

Latest Expanded Core Curriculum/Mastering the Monarch topics - APH Hive Discussion Board

Le attività espresse sono state testate.

[awesomerobot (Kris)]

Aggiornamento rapido su questo, ho lavorato per migliorare i nostri landmark in un modo che dovrebbe fornire un modo migliore per navigare in un elenco di elementi.

La navigazione delle intestazioni negli elenchi di elementi rimarrà invariata, ma si spera che questa fornisca un’alternativa ragionevole. Le modifiche sono delineate qui: A11Y: improve landmark navigation and add aria-labels to post controls by awesomerobot · Pull Request #34421 · discourse/discourse · GitHub

In breve, questo fa quanto segue:

• Fornisce regioni landmark per tutti i post nel DOM
• Aggiunge una regione landmark che rende più chiaro che ci sono più post sopra/sotto — carichiamo/scarichiamo i post in modo da non dover utilizzare la paginazione manuale, se un argomento avesse centinaia di post caricati nel DOM contemporaneamente, ciò potrebbe causare problemi di prestazioni.

Rendere tutto il contenuto delle intestazioni accessibile nel DOM senza degradare le prestazioni per tutti sarebbe un cambiamento molto complicato, quindi questo è un po’ una via di mezzo. Sebbene non sia perfetto, navigare nelle aree “carica altri contenuti” caricherà correttamente più post, a quel punto l’elenco degli elementi potrà essere riaperto.

• Ho apportato una modifica per trasformare i controlli dei post da una regione di navigazione a una regione della barra degli strumenti, questo è semanticamente più accurato e consente all’elenco delle regioni landmark di concentrarsi sui post.

• Ho anche migliorato l’etichettatura dei controlli dei post mentre ero lì

Quindi stiamo passando da un elenco di elementi landmark piuttosto scarno all’interno degli argomenti

A qualcosa che rappresenta più chiaramente la struttura dell’argomento

Questo aggiornamento dovrebbe essere disponibile nel corso di questa settimana. Sarò curioso di sentire qualche feedback su queste modifiche una volta che saranno disponibili @adress!

[Cody_Laplante]

Ciao @awesomerobot, siamo stati assunti da APH per una consulenza sull’accessibilità riguardo a questo problema. Ho fornito un paio di link video qui sotto che mostrano il nostro problema principale relativo a questo thread. Vedrai il problema nella prima registrazione a partire dal timestamp 08:36 nella prima registrazione.
Discourse Accessibility Audit JAWS
Questo non è correlato all’elenco degli elementi, ma a quello che chiameremmo Quick Keys o Quick Navigation, in cui navigheremo al tipo di elemento HTML successivo (in questo caso, le intestazioni).

Il problema nel risolvere questo problema creando nuovi landmark è che i landmark sono tipicamente riservati a sezioni di alto livello, quindi per un utente di screen reader, la navigazione tra piccole sezioni della pagina con i landmark toglierebbe l’accesso rapido alle grandi regioni della pagina come il banner di navigazione. Questo viola anche gli standard WCAG di livello A creando un Bypass Block.

[awesomerobot (Kris)]

ottimo, grazie per i dettagli aggiuntivi! un video aiuterà enormemente: sembra che il video sia protetto da password, puoi sbloccarlo o inviare il codice a accessibility@discourse.org

[Cody_Laplante]

Sì, mi scusi. Ecco il link con il passcode incorporato. Video Conferencing, Web Conferencing, Webinars, Screen Sharing - Zoom
Passcode: .kBwdK3a

[dkapoor (Dylan Kapoor)]

Ciao @awesomerobot, sono un collega di Cody e un ingegnere dell’accessibilità. Ho dato un’occhiata al repository per diagnosticare il problema. Come forse già saprai, il problema principale sembra essere che (1) il contenuto nei post mascherati non è visibile dagli screen reader e (2) i post vengono scoperti solo quando si trovano nella visualizzazione dell’utente per PostStreamViewportTracker

Pensando a una potenziale soluzione, voglio ottimizzare due aspetti: (1) abilitare la navigazione di ciascun post tramite intestazione con gli screen reader e (2) ridurre al minimo le modifiche al repository Discourse e l’impatto sulle prestazioni.

L’approccio che raccomando è quello di mantenere un wrapper leggero per ciascun post caricato che includa l’H2 semantico utilizzato per la navigazione tramite intestazione, mentre il corpo pesante del post rimane mascherato. Questo mantiene le intestazioni stabili per la tecnologia assistiva senza gonfiare il DOM sull’intera pagina. Quando un utente atterra su un H2 di un post tramite la navigazione tramite intestazione, lo screen reader attiverà uno scorrimento della pagina che a sua volta scoprirà il corpo del post in loco.

La fattibilità di questa soluzione dipende da quando viene caricato il prossimo blocco di post. Un miglioramento opzionale è un’intestazione sentinella solo per screen reader “carica altri post” (simile alla “regione di caricamento” proposta nel tuo PR) situata in fondo all’elenco dei post caricati. Quando questa intestazione entra in visualizzazione o viene selezionata dal rotore delle intestazioni, carica il blocco successivo e annuncia il completamento tramite un messaggio aria-live=polite.

[awesomerobot (Kris)]

Grazie per il feedback e i suggerimenti, ne discuteremo internamente e torneremo con un aggiornamento!

[awesomerobot (Kris)]

@dkapoor

L’approccio che consiglio è quello di mantenere un leggero wrapper per ogni post caricato che includa l’H2 semantico utilizzato per la navigazione delle intestazioni, mentre il corpo pesante del post rimane nascosto. Questo mantiene le intestazioni stabili per le tecnologie assistive senza gonfiare il DOM su tutta la pagina. Quando un utente atterra su un H2 di un post tramite la navigazione delle intestazioni, lo screen reader attiverà uno scorrimento della pagina che a sua volta renderà visibile il corpo del post sul posto.

Questo è l’approccio su cui stiamo attualmente lavorando in A11Y: improve heading-to-heading nav, fix infinite scrolling for screenreaders by awesomerobot · Pull Request #34589 · discourse/discourse · GitHub

Come hai suggerito, stiamo aggiungendo alcune leggere intestazioni solo per screen reader su tutti i post (nascosti o meno) e un’intestazione che attiverà il caricamento di altri post, insieme all’annuncio che il caricamento è completo.

È ancora un lavoro in corso, quindi avrà ancora bisogno di qualche rifinitura, ma speriamo di poter rendere questa correzione disponibile a tutti presto.

[awesomerobot (Kris)]

Aggiornamento rapido sulle aspettative della timeline: siamo in un blocco pre-rilascio per la prossima settimana circa e gran parte del nostro team sarà assente per il nostro incontro annuale… quindi è probabile che passeranno un paio di settimane prima che questa modifica possa essere implementata.

[awesomerobot (Kris)]

Ciao! Dal 5 novembre abbiamo unito un aggiornamento che dovrebbe migliorare la navigazione per argomento tramite intestazione. Maggiori dettagli qui:

@awesomerobot

Grazie per aver segnalato questo. Da ieri abbiamo unito un aggiornamento che ha lo scopo di rendere la navigazione dei post tramite intestazione più affidabile. Abbiamo garantito intestazioni coerenti disponibili per ogni post e aggiunto intestazioni con aree attive che annunceranno quando verranno caricati post aggiuntivi.