El equipo de desarrollo de Medium ha discutido algunas malas prácticas que rompen la accesibilidad. En un ejemplo, argumentan que los opacity
lectores de pantalla no lo admiten bien, por lo que si queremos ocultar un elemento en una transición, siempre deberíamos 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í hay una forma de pensar en ellos ...
puede hacer algo invisible | puede hacer que no se pueda hacer clic | elimina del flujo de documentos | se puede cambiar | se puede revertir en el niño | |
---|---|---|---|---|---|
opacidad | ya | No | No | sí | No |
visibilidad | ya | ya | No | sí | sí |
mostrar | 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 ya display
que no es transitable. Snook ha escrito sobre esto, incluido algo de JavaScript para ayudar.