¿Cómo afecta la opacidad de CSS a la accesibilidad?

Después de navegar un número de Google y otros artículos de SO, he decidido hacer mi pregunta claramente con la esperanza de una respuesta simple y directa.¿Cómo afecta la opacidad de CSS a la accesibilidad?

Para añadir un paso más a la discusión sobre Does opacity:0 have exactly the same effect as visibility:hidden: entiendo que display:none y visibility:hidden ocultar los elementos de los lectores de pantalla y similares, pero qué pasa con opacity:0?

La tabla en una de las respuestas a la pregunta vinculada indica que la opacidad participa en taborder, ¿significa necesariamente que será mapped to the accessibility API?

Ajuste un gigante negativo text-indent se ofrece normalmente como una alternativa a display: none y visibility: hidden para los menús desplegables, pero me gustaría a desvanecerse mis menús y salir sin JavaScript, mientras se asegura de que no ocultarlos de los lectores de pantalla .

Fuente

2012-01-29 Greg Perham

-2

La opacidad es un factor de transparencia así que la opacidad: 0 significa no visible. Si dice sobre pantalla: ninguno y visibilidad: memoria oculta la diferencia es que la pantalla desaparece por completo algún objeto, contenedor y no tiene ningún tamaño mientras que la visibilidad no es visible pero aún tiene algún tamaño en la página.

Fuente

2012-01-29 21:18:56 TOUDIdel

¿Qué tiene esto que ver con la accesibilidad? – BoltClock

objeto AFAIR con visibilidad: oculto es accesible, con pantalla: ninguno no. – TOUDIdel

Cool, ¿qué pasa con 'opacity: 0'? Eso es lo que esta pregunta en particular está haciendo. – BoltClock

opacity: 0; no ocultará el contenido de los lectores de pantalla, aunque ocultará el contenido de los usuarios que ven y parcialmente.
Es como mostrar un texto blanco sobre fondo blanco (o transparente, se entiende la idea).
Se asignará a la API de accesibilidad, aún debería ver el puntero cambiando enlaces anteriores, editar: aún puede seleccionar texto/editar, y alguien debe probar para ver si, al tabular enlaces y elementos de forma, el valor predeterminado punteado el esquema se mostrará como siempre o será transparente. Editar: este último, recién probado con Firebug en esta página.

Fuente

2012-01-29 21:32:47 FelipeAls

El contorno se representa como parte del propio objeto visual (la propiedad 'outline'), a pesar de no afectar las dimensiones del cuadro, por lo que participará en la composición alfa del objeto como un efecto de' opacidad'. De ahí lo que ves cuando pruebas con Firebug. – BoltClock

@Felipe Esta es la respuesta que esperaba. :) ¿Podría agregar un enlace a alguna referencia o explicar su confianza? –

Esta fue una pregunta fantástica. He mirado alrededor, pero no veo ninguna fuente que indique específicamente que la opacidad afecta a los lectores de pantalla para que hagan su trabajo. Sin embargo, parece tener sentido.Imagine que el valor de opacidad fuera 50 en lugar de 0; el contenido sigue ahí, y aún ocupa espacio en la página. No puedo ver cómo bajar a 0 desencadenaría un comportamiento diferente. Si los lectores de pantalla están modificando su comportamiento para ese caso extremo, yo diría que los desarrolladores tenían demasiado tiempo en sus manos ... –

Si bien esto es una cuestión mayor, que fue uno de los primeros que apareció en una búsqueda en Google, por lo que quería meter su cuchara.

A partir de abril de 2017, el lector de pantalla ChromeVox no lee el contenido que es configurado en opacidad 0.

Específicamente, ChromeVox no leerá el texto que se ha ocultado visualmente con la opacidad establecida en cero, a menos que el elemento esté etiquetado por texto visualmente disponible.

Por ejemplo:

<!-- 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>

Fuente

2017-04-04 11:48:26 scottohara

¿Cómo afecta la opacidad de CSS a la accesibilidad?

Respuesta

Cuestiones relacionadas