Scott O’Hara publicó recientemente “Inclusively Hidden”, un agradable recorrido por las diferentes formas de ocultar cosas en la web. ¡Nada se corta y se seca cuando se trata de la web! Lo que complica esto es que oculto plantea la pregunta: ¿oculto para quién? Diferentes respuestas a eso tienen diferentes soluciones:
- ¿Oculto para todos?
display: none;ovisibility: hidden;o lahiddenatributo. (Pero cuidado con esohiddenatributo, dice Monica Dinculescu.) - ¿Oculto visualmente, pero presente para la tecnología de asistencia? A
.screen-reader-onlyclase con un puñado de propiedades para hacer el trabajo correctamente. - ¿Oculto para tecnología de asistencia, pero no visualmente? El
aria-hidden="true"valor de atributo.
Vale la pena asimilar todo esto porque es un ejemplo perfecto de por qué HTML y CSS no son una habilidad sencilla para el desarrollo web front-end. Esto es algo fundamental que no se hace tan correctamente como debería.
Si te gusta el video, hice uno llamado “Ocultar cosas con CSS” que trata mucho de esto.
La clase visualmente oculta que usa Scott es:
/* Hiding class, making content visible only to screen readers but not visually */
/* "sr" meaning "screen-reader" */
.sr-only:not(:focus):not(:active) {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}Mientras escribo esto, acabo de regresar de Smashing Conf en San Francisco. Sara Soueidan tuvo una charla maravillosa que cubrió algunas situaciones de “esconder cosas” que son incluso menos intuitivas de lo que estamos acostumbrados a ver.
Una cosa que cubrió fue la inert atributo y cómo se puede utilizar para omitir elementos interactivos de las pestañas del teclado. Incluso se puede usar en un elemento padre, anulando todo lo que contiene. Entendí esa parte, pero no del todo por qué es útil, ya que parece que también podrías usar display: none; si un elemento está oculto y los elementos internos no deben estar enfocados. Pero estoy seguro de que es mi falta de comprensión, así que estoy deseando que salga el video de Sara para poder volver a verlo. Tenía que ver con mantener un orden de tabulación no incómodo.
Otra cosa que Sara cubrió es que algunas personas que usan tecnología de asistencia también tienden a explorar las pantallas táctiles con hápticos, moviéndose por la página con los dedos en busca de elementos interactivos. Si, por ejemplo, reemplaza una casilla de verificación nativa con una casilla de verificación con estilo, es posible hacerlo de una manera que sea más accesible usando una casilla de verificación real que oculte y reemplace con un gráfico, pero Sara demostró cómo puede cambiar el tamaño de la casilla de verificación sobre el parte superior del reemplazo y esconderse visualmente con opacity: 0; – eso asegura que alguien todavía pueda encontrar el elemento al tacto. Esa no parece ser la forma predeterminada en que se enseña o construye este tipo de cosas, por lo que es genial ver a Sara diciéndolo. Otro ejemplo más de HTML y CSS son lenguajes matizados y complicados.
Enlace directo →