imagen - ¿Cómo afecta la opacidad CSS a la accesibilidad?
opacity css background (3)
Después de navegar por varios artículos de Google y otros artículos de SO, decidí formular mi pregunta claramente con la esperanza de obtener una respuesta simple y directa.
Para agregar un paso más a la discusión en ¿La opacidad: 0 tiene exactamente el mismo efecto que la visibilidad: oculta : entiendo esa display:none y visibility:hidden elementos visibility:hidden de los lectores de pantalla y similares, pero ¿qué pasa con la opacity:0 ?
La tabla en una de las respuestas a las preguntas vinculadas señala que la opacidad participa en taborder , ¿significa eso necesariamente que se asignará a la API de accesibilidad ?
La configuración de una text-indent negativa gigante se ofrece normalmente como una alternativa para display: none y visibility: hidden para los menús desplegables, pero me gustaría introducir y desvanecer mis menús sin JavaScript, al mismo tiempo que me aseguro de no ocultarlos. lectores de pantalla.
La opacidad es un factor de transparencia, por lo que opacidad: 0 significa que no es visible. Si dice acerca de mostrar: ninguno y visibilidad: recuerde que 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 cierto tamaño en la página.
Si bien esta es una pregunta más antigua, fue una de las primeras en aparecer en una búsqueda de Google, así que quise intervenir.
A partir de abril de 2017, el lector de pantalla ChromeVox no lee el contenido que se establece 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>
opacity: 0; no ocultará el contenido de los lectores de pantalla, aunque ocultará el contenido de los usuarios videntes y los usuarios ciegos.
Es como mostrar un texto blanco sobre un fondo blanco (o transparente, se entiende la idea).
Se asignará a la API de accesibilidad, aún debería ver el puntero cambiando los enlaces anteriores, editar: aún puede seleccionar texto / editar, y alguien debería probar para ver si, al tabular enlaces y elementos del formulario, el contorno de puntos predeterminado Se muestra como de costumbre o será transparente. Edición: la última, acabo de probar con Firebug en esta página.