Código fuente del caso:
https://codepen.io/shadeed/pen/03caf6b36727accb692eecbc38f95d39?editors=1100
5. El impacto de la accesibilidad en la visibilidad: oculto
El elemento está oculto, sus descendientes se eliminan del árbol de accesibilidad y los lectores de pantalla no representan el elemento.
(1) Posicionamiento
Para ocultar un elemento con atributo de posición, debemos moverlo fuera de la pantalla y establecer su tamaño en 0 (ancho y alto). Un ejemplo son los enlaces de navegación de salto. Considere el siguiente diagrama:
Para colocar el enlace fuera de la pantalla debemos agregar lo siguiente
"css"
.skip-enlace {
posición: absoluta;
arriba: -100%;
}Un valor de -100% empujará el elemento al 100% de la altura de su ventana gráfica. Como resultado, quedará completamente oculto. Una vez que esté enfocado en el teclado, se mostrará así.
.skip-link:enfoque {
posición: absoluta;
arriba: 0;
}Código fuente del caso:
https://codepen.io/shadeed/pen/707992e7c98ea633fc6606e576ef8a04?editors=0100
6. El impacto de la accesibilidad en la posición: absoluto |
El elemento es accesible para lectores de pantalla y teclado enfocable. Simplemente está oculto desde la ventana gráfica.
Ruta de recorte Cuando se utiliza la ruta de recorte en un elemento, se crea un área de recorte que define qué partes deben mostrarse y ocultarse.
En el ejemplo anterior, el área negra transparente tiene una ruta de recorte. Cuando se aplica la ruta de clip a un elemento, nada debajo del área negra transparente no se mostrará.
Para demostrar lo anterior de manera más visual, usaré la herramienta clippy. En el GIF a continuación, tengo la siguiente ruta de clip:
Establezca el valor del polígono en cada dirección en 0 0 y el área de recorte cambiará de tamaño a 0. Como resultado, la imagen no se mostrará. Asimismo, esto también se puede hacer reemplazando el polígono por un círculo:
imagen {
ruta de clip: círculo (0 al 50% 50%);
} 
7. Impacto de la accesibilidad en el clip-path
El elemento sólo está oculto visualmente, los lectores de pantalla y el foco del teclado aún pueden usarlo.
Código fuente del caso:
https://codepen.io/shadeed/pen/9fdbd7be9fd9dac17a614c96ba7f64b1?editors=0100
3. Controlar el color y el tamaño de fuente
Si bien estas dos técnicas no son tan comunes como las que analizamos anteriormente, pueden resultar útiles para determinados casos de uso.
1. color transparente
Al hacer transparente el color del texto, quedará oculto visualmente. Esto es útil para botones que sólo tienen iconos.
2. Tamaño de fuente
Además, establecer el tamaño de fuente en 0 es útil ya que esto oculta visualmente el texto. Considere el siguiente ejemplo, donde hay un botón con la siguiente estructura:
<botón> <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="false" focusable="false"> <!-- Datos de ruta --> </svg> <span>Me gusta</span> </botón>
Nuestro objetivo es ocultar el texto de forma accesible. Para esto agregué el siguiente CSS
.botón abarcar {
color: transparente;
tamaño de fuente: 0;
}De esta forma, el texto queda oculto. Incluso funciona sin cambiar el color, pero lo agregué con fines explicativos.
Código fuente del caso:
https://codepen.io/shadeed/pen/4eacdf50c3339fced7f787156c569372?editors=1100
3. Aria escondida
Cuando agrega el atributo aria-hidden a un elemento, se elimina el elemento del árbol de accesibilidad, lo que puede mejorar la experiencia de los usuarios de lectores de pantalla. Tenga en cuenta que no oculta visualmente el elemento, solo está destinado a usuarios de lectores de pantalla.
<botón> Menú <svg aria-hidden="true"><!-- --></svg> </botón>
En el ejemplo anterior, tenemos un botón de menú con una etiqueta y un ícono. Para ocultar iconos de los lectores de pantalla, se agregó aria-hidden.
Según Mozilla Developer Network (MDN), a continuación se muestran los casos de uso de propiedades
Oculte contenido decorativo como iconos e imágenes. Ocultar texto copiado. Ocultar contenido fuera de pantalla o contraído.
4. Impacto de la accesibilidad en aria-hidden="true"
está diseñado para lectores de pantalla porque oculta contenido sólo a los lectores de pantalla. Sin embargo, el contenido sigue siendo visible para los usuarios videntes y el teclado se puede enfocar.
(1) Animación e interacción
Cuando queremos animar un elemento oculto, por ejemplo, para revelar la navegación móvil oculta, debemos hacerlo de forma accesible. Para lograr una experiencia accesible, exploraremos algunos buenos ejemplos de los cuales aprender, así como también algunos malos ejemplos para evitar cometer errores que puedan crear una mala experiencia para los usuarios de lectores de pantalla.
Animación del menú: mal ejemplo
Tenemos un menú que debe tener una animación deslizante cuando se expande. La forma más sencilla es agregar lo siguiente a su menú:
ul {
opacidad: 0;
transformar: traducirX(100%);
transición: 0,3 s de relajación;
}
ul.activo {
opacidad: 1;
transformar: traducirX(0);
}Con lo anterior, el menú se expandirá y contraerá según la clase .active, la cual se agregará vía JavaScript de la siguiente manera:
menuToggle.addEventListener('hacer clic', función(e){
e.preventDefault();
navMenu.classList.toggle('activo');
});
El resultado puede parecer bueno, pero tiene un gran error. Usar opacidad: 0 no ocultará la navegación del árbol de accesibilidad. Incluso si la navegación está oculta visualmente, aún se puede enfocar mediante el teclado y ser accesible para los lectores de pantalla. Debe estar oculto para evitar confundir a los usuarios.
Aquí hay una captura de pantalla del árbol de accesibilidad de Chrome Dev Tools:
En pocas palabras, un árbol de accesibilidad es una lista de todo el contenido accesible para los usuarios de lectores de pantalla. En nuestro caso, la lista de navegación está ahí, pero está oculta visualmente. Necesitamos resolver dos problemas:
Evite utilizar el foco del teclado cuando el menú esté oculto. Evite informar a la navegación a través del lector de pantalla cuando la navegación esté oculta.
La siguiente captura de pantalla muestra cómo el rotor VoiceOver ve la página en Mac OS. La lista de navegación está ahí mientras está oculta.
Código fuente del caso:
https://codepen.io/shadeed/pen/e94f377dae6104fe45a71c80d59bb58d?editors=0100
Animación del menú: buen ejemplo
Para corregir este error, necesitamos usar visibilidad: oculto para el menú de navegación. Esto asegurará que el menú esté oculto a los lectores visuales y de pantalla.
"css"
ul {
visibilidad: oculta;
opacidad: 0;
transformar: traducirX(100%);
transición: 0,3 s de relajación;
}
ul.activo {
visibilidad: visible;
opacidad: 1;
transformar: traducirX(0);
}Una vez agregado, el menú quedará oculto para los lectores de pantalla. Probemos nuevamente y veamos qué mostrará VoiceOver:
Código fuente del caso:
https://codepen.io/shadeed/pen/e94f377dae6104fe45a71c80d59bb58d?editors=0110
5. Casilla de verificación personalizada
El diseño de casilla de verificación predeterminado es difícil de personalizar, por lo tanto, necesitamos crear un diseño personalizado para la casilla de verificación. Veamos HTML básico:
<p clase="c-casilla de verificación"> <input class="sr-only" tipo="casilla" nombre="" id="c1"> <label class="c-checkbox__label" for="c1">Casilla de verificación personalizada</label> </p>
Para personalizar la casilla de verificación, debemos ocultar la entrada de forma accesible. Para ello se deben utilizar la posición y otras propiedades. Existe una clase CSS común llamada sr-only o visual-hidden que solo oculta visualmente un elemento y lo hace accesible para los usuarios de teclados y lectores de pantalla.
.sr-solo {
borde: 0;
clip: rect(0 0 0 0);
-webkit-clip-path: polígono (0px 0px, 0px 0px, 0px 0px);
ruta del clip: polígono (0px 0px, 0px 0px, 0px 0px);
altura: 1px;
margen: -1px;
desbordamiento: oculto;
relleno: 0;
posición: absoluta;
ancho: 1px;
espacio en blanco: nowrap;
}Código fuente del caso: https://codepen.io/shadeed/pen/b722aa72dbe3574617f6506d14e5ac03?editors=1100
botón ocultar
En Twitter, hay un botón llamado "Ver nuevos tweets" que está oculto para los lectores de pantalla con contenido oculto y solo aparece cuando hay nuevos tweets disponibles.
Resumir
Con esto concluye este artículo sobre el tutorial detallado sobre cómo ocultar elementos en la Web y sus ventajas y desventajas. Para obtener más información sobre cómo ocultar elementos en la Web, busque artículos anteriores en downcodes.com o continúe explorando los siguientes artículos relacionados. downcodes.com ¡más en el futuro!