In che modo l'opacità CSS influisce sull'accessibilità?

Dopo aver sfogliato un numero di Google e altri articoli SO, ho deciso di porre la mia domanda chiaramente nella speranza di una risposta semplice e diretta.In che modo l'opacità CSS influisce sull'accessibilità?

Per aggiungere un ulteriore passo per la discussione su Does opacity:0 have exactly the same effect as visibility:hidden: capisco che display:none e visibility:hidden nascondere elementi screen reader e simili, ma per quanto riguarda opacity:0?

La tabella in una delle risposte alla domanda legata rileva che l'opacità partecipa TabOrder, quindi vuol dire necessariamente che sarà mapped to the accessibility API?

l'impostazione di un gigante negativo text-indent è tipicamente offerto come alternativa al display: none e visibility: hidden per i menu a discesa, ma mi piacerebbe a svanire miei menu e uscire senza JavaScript, badando a non li nascondo screen reader .

fonte

2012-01-29 Greg Perham

-2

L'opacità è un fattore di trasparenza così opacità: 0 significa non visibile. Se parli di display: none e visibility: hidden remeber la differenza è che il display scompare completamente dell'oggetto, contenitore e non ha alcuna dimensione, mentre la visibilità rende la non visibilità ma ha ancora delle dimensioni sulla pagina.

fonte

2012-01-29 21:18:56 TOUDIdel

che cosa questo ha a che fare con l'accessibilità? – BoltClock

Oggetto AFAIR con visibilità: nascosto è accessibile, con display: nessuno no. – TOUDIdel

Cool, per quanto riguarda 'opacity: 0'? Questo è ciò che questa particolare domanda sta chiedendo. – BoltClock

opacity: 0; non nasconderà il contenuto degli screen reader, ma nasconderà il contenuto agli utenti vedenti e agli ipovedenti.
È come visualizzare un testo bianco su uno sfondo bianco (o trasparente, si ottiene l'idea).
Sarà mappato all'API di accessibilità, dovresti ancora vedere il puntatore che cambia sopra i link, modifica: puoi ancora selezionare testo/modifica, e qualcuno dovrebbe testare per vedere se, quando si selezionano i collegamenti e gli elementi del modulo, il predefinito punteggiato il contorno verrà visualizzato come al solito o sarà trasparente. Modifica: il secondo, appena testato con Firebug in questa pagina.

fonte

2012-01-29 21:32:47 FelipeAls

La struttura viene rappresentata come parte dell'oggetto visivo stesso (la proprietà 'outline'), nonostante non influenzi le dimensioni della casella, quindi parteciperà al compositing alfa dell'oggetto come effetto di opacità'. Quindi, cosa vedi quando esegui il test con Firebug. – BoltClock

@Felipe Questa è la risposta che speravo. :) Potresti aggiungere un link ad alcuni riferimenti o spiegare la tua fiducia? –

Questa è stata una domanda fantastica. Mi sono guardato attorno, ma non vedo alcuna fonte specifica che l'opacità influenzi gli screen reader dal loro lavoro. Sembra solo avere un senso, però.Immagina che il valore di opacità fosse 50 anziché 0; il contenuto è ancora lì e occupa ancora spazio sulla pagina. Non riesco a vedere come scendere a 0 possa causare un comportamento diverso. Se gli screen reader stanno modificando il loro comportamento per quel caso limite, direi che gli sviluppatori hanno avuto troppo tempo a disposizione ... –

Mentre questo è una questione più grande, è stato uno dei primi che è emerso in una ricerca su Google, così ho voluto carillon in.

A partire da aprile 2017, lo screen reader ChromeVox non legge il contenuto che è impostato su opacità 0.

In particolare, ChromeVox non legge il testo che è stato visivamente nascosto con opacità impostato su zero, a meno che l'elemento non sia etichettato da testo visivamente disponibile.

Ad esempio:

<!-- will not be read --> 
<a href="#!" style="opacity: 0;">not read</a> 

<!-- WILL be read --> 
<a href="#!" style="opacity: 0.001;">is read</a> 

<!-- span text will not be read --> 
<a href="#!"> 
    Read More 
    <span style="opacity: 0;"> 
    this will not be read 
    </span> 
</a> 

<!-- 
    button text will not be read, 
    but aria-labelledby text will be read on button focus 
--> 
<span id="test">button label</span> 
<button type="button" aria-labelledby="test" style="opacity: 0;"> 
    This text will not be read 
</button>

fonte

2017-04-04 11:48:26 scottohara

In che modo l'opacità CSS influisce sull'accessibilità?

risposta

Problemi correlati