5

Ho scritto un sito che utilizza jQuery per visualizzare un popup modale. Copre essenzialmente l'intera area visibile dello schermo con una sovrapposizione, quindi mostra un DIV che contiene il popup effettivo sopra l'overlay. Uno dei requisiti per questo progetto ha a che fare con l'accessibilità.Uno screen reader può essere "bloccato" all'interno di un elemento DIV?

Siamo stati in grado di mettere a fuoco all'interno del modale quando si apre, in modo che lo screen reader smetta di funzionare e inizi a leggere all'interno del modal. Tuttavia, il nostro problema attuale è che una volta che lo screen reader di JAWS finisce di leggere il testo all'interno della finestra modale, continua oltre e legge il testo fuori dalla finestra (sotto l'overlay).

C'è un modo per "bloccare" lo screen reader all'interno di un particolare elemento in modo che non possa leggere nulla al di fuori di esso?

+0

Sai cosa faccio quando vedo il tuo sito Web che ha questi popup assurdi? Chiudo la finestra Se voglio davvero leggere il contenuto, farò semplicemente clic destro sulla pagina e cancellerò l'elemento dal webkit. Le "tecniche" come quello che stai facendo peggiorano il web e sono profondamente fastidiosi. Qualunque siano i problemi che stai affrontando, è meglio fare qualsiasi altra cosa che non irriti i tuoi lettori. – Incognito

+1

Apprezzo i tuoi pensieri, tuttavia, non solo i pop-up modali sono comuni oggi, la decisione non dipende da me. Sto lavorando per una società Fortune 100 ed è una loro decisione, non mia. Non tutti noi abbiamo autorità totale su ciò che creiamo, tenetelo a mente prima di esprimere giudizi su ciò che sto facendo. – Scott

+0

Non ti sto giudicando, ti sto dicendo il problema con quello che stai facendo. Se ti stavo giudicando, direi "sei pigro e spaventato nel dire loro come migliorare l'usabilità", piuttosto che i problemi reali con ciò che stai facendo e ti consiglia di scegliere un'alternativa. – Incognito

risposta

3

Se si aggiunge un attributo di:

aria-disabled="true" 

al resto del sito markup dopo aver impostato concentrarsi in modal, dovrebbe mantenere i lettori di schermo dalla lettura di tale contenuto. Questo è più semplice da fare se tutti gli altri contenuti si trovano in un DIV e il modello viene aggiunto al DOM come fratello di quel DIV (quindi è sufficiente aggiungere tale attributo su un elemento).

In alternativa, se è possibile con la finestra di dialogo, è possibile aggiungere alcuni JavaScript tab-press/focus detection per mantenere l'utente in un ciclo all'interno di questa finestra di dialogo. Se non riesci a uscire dalla finestra di dialogo con una tastiera (premendo un pulsante Chiudi/Annulla), dovrebbe essere generalmente accessibile.

+0

Grazie Matt, darò un colpo a breve. Abbiamo già "intrappolato" l'utente all'interno del modale con tabulazioni/tasti, ma se lasciamo che lo screen reader legga, continua ad andare fuori dal modal. – Scott

Problemi correlati