El equipo de desarrollo de Medium ha discutido algunas malas prácticas que rompen la accesibilidad. En un ejemplo, argumentan que opacity no es compatible con los lectores de pantalla, por lo que si queremos ocultar un elemento en una transición, siempre debemos usar el visibility atributo, también:
.m-fadeOut {
visibility: hidden;
opacity: 0;
transition: visibility 0s linear 300ms, opacity 300ms;
}
.m-fadeIn {
visibility: visible;
opacity: 1;
transition: visibility 0s linear 0s, opacity 300ms;
}Recuerde que la opacidad y la visibilidad aún dejan un elemento en el flujo del documento. Si necesita eliminarlo del flujo, hay más trabajo por hacer. De hecho, aquí tienes una forma de pensar en ellos …
| puede hacer algo invisible | puede hacer que no se pueda hacer clic | elimina del flujo de documentos | puede ser transicional | se puede revertir en el niño | |
|---|---|---|---|---|---|
| opacidad | ya | No | No | sí | No |
| visibilidad | ya | ya | No | sí | sí |
| monitor | ya | ya | ya | No | No |
| puntero-eventos | No | ya | No | No | No |
Si necesita cambiar el valor de visualización de un elemento después de un desvanecimiento, eso es más difícil. Realmente no es posible en CSS desde display no es transitable. Snook ha escrito sobre esto, incluido algo de JavaScript para ayudar.