Métodos de ocultamiento de páginas web

Los desarrolladores web tienen que ocultar elementos de la página web por una variedad de razones. Por ejemplo, hay un botón que debe estar visible cuando se visualiza el sitio en un dispositivo móvil y debe estar oculto cuando se utiliza un navegador de escritorio. O, por ejemplo, hay un cierto elemento de navegación que debe ocultarse en el navegador móvil y mostrarse en el escritorio. Los elementos que son invisibles en la página pueden estar en varios estados:

• Un elemento es completamente invisible y, además, se elimina de la secuencia de documentos.
• El elemento no se puede ver a través de los ojos, pero está presente en el documento y está disponible para tecnologías de asistencia, como lectores de pantalla.
• El elemento es visible pero está oculto para los lectores de pantalla.

El artículo, cuya traducción publicamos hoy, está dedicado al análisis de métodos para ocultar elementos de páginas web usando HTML y CSS. Aquí, se discutirán temas como la accesibilidad al contenido, la animación y los escenarios para usar tecnologías para ocultar datos en las páginas.

Atributo oculto HTML5

Hidden es un atributo HTML lógico que oculta los elementos a los que está asignado. Cuando el navegador carga la página, no mostrará elementos con el atributo hidden , excepto cuando la visibilidad de los elementos se habilita manualmente mediante CSS. El efecto de este atributo es similar a la aplicación de la display: none regla a un elemento CSS.

Considere el siguiente ejemplo:

 <h1>Spring is on the way</h1> <img hidden src="landscape.jpg" alt=""> <p><!-- Description content --></p> 

Hay un marcado que establece el título, la imagen y la descripción. La imagen debe mostrarse solo si el ancho de la ventana 400px supera los 400px . He agregado el atributo hidden al elemento <img> .

En CSS, utilicé el atributo hidden para mostrar el elemento solo si el área de visualización de la página tenía el tamaño correcto.


Fragmento de página web

Aquí está el código CSS que se usa aquí:

 img[hidden] {  display: none; } @media (min-width: 400px) {  img[hidden] {    display: block;  } } 

→ Aquí hay un ejemplo de esta página en CodePen

Aquí puede tener una pregunta sobre por qué no solo usar display: none . Buena pregunta Cuando se llama a un selector de imágenes a través de su atributo hidden , podemos estar seguros de que incluso si el código CSS por alguna razón no se cargó, el elemento estará oculto.

AttributeAtributo oculto y accesibilidad al contenido

Si consideramos el atributo hidden desde el punto de vista de la accesibilidad al contenido, resulta que este atributo oculta completamente el elemento. Como resultado, los lectores de pantalla no pueden trabajar con este elemento. No utilice este atributo en los casos en que ciertos elementos de la página deben hacerse invisibles para los humanos, pero no para los lectores de pantalla.

Propiedad de visualización CSS

Cada elemento de una página web tiene un cierto valor de propiedad de display asignado por defecto. Puede ser inline-block , block , table , etc. Para ocultar un elemento usando la propiedad de display , podemos usar la construcción display: none . Si un elemento está oculto usando esta construcción, todos sus descendientes estarán ocultos con él.

Imagine que queremos ocultar la imagen del ejemplo anterior y decidimos usar el siguiente código CSS:

 img {  display: none; } @media (min-width: 400px) {  img {    display: block;  } } 

Con este enfoque, la imagen se excluirá completamente del documento (del denominado flujo de documentos - "flujo de documentos"), será inaccesible para los lectores de pantalla. Quizás no conozca muy bien el concepto de "flujo de documentos". Para abordar este concepto, eche un vistazo a la siguiente figura.


El libro azul fue retirado de la pila.

El "flujo de documentos" se compara aquí con una pila de libros. Si la propiedad display: none se aplica al libro azul, significará que simplemente se eliminó de la pila. Al mismo tiempo, el espacio que este libro solía ocupar será ocupado por otros libros. Lo mismo sucede al ocultar elementos HTML. El lugar que ocuparía un elemento oculto está ocupado por otros elementos, esto afecta la disposición de los elementos en el documento. En nuestro ejemplo, esto afectó la posición de los libros en la pila.

Aquí hay una versión animada de un ejemplo con libros que muestran lo que sucede si uno de ellos se elimina de la pila.


Si elimina un libro de la pila, la posición de otros libros en él cambiará

▍ ¿Los recursos ocultos por CSS están cargados?

Responda brevemente esta pregunta; entonces sí, se realiza la carga de dichos recursos. Por ejemplo, si el elemento <img> está oculto por CSS, y mostramos este elemento en algún punto de la página, para entonces la imagen ya estará cargada. La presencia en la página de una imagen, incluso oculta por CSS, conducirá a la ejecución de una solicitud HTTP para descargarla.

Aquí puede encontrar una demostración de cómo trabajar con una imagen oculta por CSS. Si explora este ejemplo, al abrir las Herramientas para desarrolladores de Chrome y mirar la pestaña Network , puede ver la solicitud correspondiente allí.


Examinando una página que contiene una imagen latente

▍ Estilo de elemento

Vale la pena mencionar que hay elementos HTML cuya propiedad de display se establece en none de forma predeterminada. Por ejemplo, este es un elemento <style> que se puede agregar al cuerpo de una página HTML. Su propiedad de display se puede cambiar para block y hacerla visible.
Aquí está el código HTML para el cuerpo de la página:

 <body>    <style>       .title { color: #000; }    </style> </body> 

Aquí está el CSS con el que hacemos visible el elemento de style :

 style {    display: block; } 

Dicha técnica puede ser útil si desea que el bloque de style sea ​​visible y, además, editable. Para que dicho bloque sea editable, puede agregar el atributo contenteditable=true a la etiqueta de style .

Así es como se ve.


Bloque de estilo editable visible

→ Aquí hay una demostración de este ejemplo

▍ Propiedad de visualización CSS y accesibilidad al contenido

Al usar la propiedad display: none , el elemento se vuelve invisible y, además, inaccesible para los lectores de pantalla.

Propiedad de opacidad CSS

Al establecer la propiedad de opacity CSS en 0 , puede ocultar el elemento y todos los elementos anidados dentro de él. Esta propiedad no se hereda. Sin embargo, esta propiedad oculta elementos solo del que está mirando la página, y no de los lectores de pantalla. Aquí vale la pena decir que un elemento cuyo valor de opacity es diferente de 1 crea un nuevo contexto de superposición .

Aquí hay un ejemplo.


El libro azul es invisible, pero el lugar que ocupa todavía está reservado.

La figura anterior muestra que el libro azul se vuelve invisible para el observador. Pero el lugar que ella ocupaba está reservado. El orden de los otros libros en la pila no ha cambiado. Compare esto con lo que el uso de la display: none condujo.

En CSS, el uso de la propiedad de opacity ve así:

 img {    opacity: 0; } 

Si volvemos a nuestro primer ejemplo y asumimos que queremos ocultar la imagen usando la propiedad de opacity , el resultado será el que se muestra a continuación.


La imagen se oculta usando la propiedad de opacidad CSS

Como puede ver, la imagen todavía está presente en la página, pero su lugar no está ocupado por nada. Está oculto solo para el observador, pero no desaparece de la página. Después de la publicación del material, me dijeron que la propiedad pointer-events: none | auto pointer-events: none | auto se puede usar para deshabilitar eventos del mouse en elementos ocultos usando la propiedad opacity: 0 . Esta es una idea importante, ya que el usuario puede confundirse al interactuar con un elemento oculto (hacer clic sobre él, desplazarse sobre él con el mouse, seleccionar texto).

→ Aquí hay una demostración del uso de la propiedad de opacity

▍ Propiedad de opacidad CSS y accesibilidad al contenido

Un elemento oculto con opacity: 0 permanece accesible para los lectores de pantalla. Tal elemento puede enfocarse cuando se trabaja con la página usando el teclado.

Propiedad de visibilidad CSS

Usando la visibility: hidden propiedad visibility: hidden , puede mostrar u ocultar elementos, haciéndolo de la misma manera que lo hicimos con opacity: 0 . Esto no afecta el flujo del documento.


Cuando se usa la visibilidad: oculto, el libro desaparece, pero su lugar permanece desocupado

Tenga en cuenta que el libro azul ha desaparecido, pero esto no afectó la disposición de otros libros en la pila.

Debe tenerse en cuenta que cuando visibility: hidden usa para el elemento padre, todos sus descendientes están ocultos, pero si la propiedad visibility: visible se asigna a uno de los descendientes, entonces este descendiente será visible.


La pila de libros está oculta, pero el libro azul se hace visible.

Volvamos a nuestro ejemplo habitual con un título, imagen y descripción. Reescribimos su código HTML así:

 <article>  <h1>Spring is on the way</h1>  <img align="center" src="landscape.jpg" alt="">  <p><!-- Desc --></p> </article> 

Lo diseñamos con el siguiente código CSS:

 article {    visibility: hidden; } img {    visibility: visible; } 

Después de eso, veamos cómo una página a la que no se ha aplicado una estilización similar diferirá de la página estilizada.


El elemento anidado es visible

Aquí, la visibility: hidden propiedad CSS visibility: hidden se asigna al elemento <article> . Y si agrega la visibility: visible propiedad visibility: visible al elemento <img> , la imagen será visible. Nuevamente, el punto aquí es que la propiedad en cuestión se aplica a los descendientes del elemento, pero se puede redefinir en el elemento descendiente.

→ Aquí hay una demostración de cómo trabajar con la propiedad de visibility

Visibility Visibilidad de propiedad CSS y accesibilidad al contenido

Cuando utiliza la visibility: hidden propiedad visibility: hidden , el elemento está oculto. También se elimina del árbol de accesibilidad y, como resultado, los lectores de pantalla no lo notan.

Ocultar elementos y posicionamiento

Para ocultar un elemento actuando sobre su posición en la página, debe llevarlo fuera del área visible de la página y establecer sus dimensiones (ancho y alto) en 0 . Como ejemplo del uso de una técnica similar para ocultar elementos, puede citar un enlace que le permite saltar rápidamente al contenido principal de la página. Considere la siguiente imagen.


Enlace oculto fuera de la visibilidad de la página

Para colocar un elemento fuera del área de visibilidad de la página, puede usar el siguiente código CSS:

 .skip-link {    position: absolute;    top: -100%; } 

Un valor de top: -100% eliminará un elemento de la ventana gráfica al 100% de su altura. Como resultado, el elemento será completamente invisible. Pero si recibe el foco después de que el usuario lo alcanza usando las teclas del teclado, se puede mostrar este elemento:

 .skip-link:focus {    position: absolute;    top: 0; } 

→ Aquí hay una demostración de este método de ocultar elementos

▍ Propiedad de posición CSS y accesibilidad al contenido

Un elemento que se muestra fuera del área de visualización está disponible para los lectores de pantalla; también puede acceder a él utilizando el teclado. Solo resulta ser invisible durante el trabajo normal con la página.

Propiedad de ruta de clip CSS

Si la propiedad CSS de clip-path se aplica a un elemento, le permite describir una región que determina qué parte del elemento debe estar oculta y cuál debe estar visible.


Área de recorte de imagen

En el ejemplo anterior, la propiedad de clip-path se aplica al hecho de que el lado izquierdo de la imagen está oscurecido. Cuando se aplica esta propiedad, desaparecen los fragmentos oscuros de la imagen.

Para ver esta propiedad en acción, utilizamos la herramienta clippy . El trabajo comienza con los siguientes valores de clip-path especificados en CSS y que describen la máscara como un polígono:

 img {    clip-path: polygon(0 0, 0 0, 0 0, 0 0); } 

Experimentos con la propiedad de ruta de recorte, el área de recorte se especifica como un polígono

Si todas las propiedades del polygon se establecen en 0 , la imagen simplemente se ocultará. El área de recorte de la imagen se puede establecer no solo en forma de polígono, sino también en forma de círculo:

 img {    clip-path: circle(0 at 50% 50%); } 

Así es como se ve.


Experimentos con la propiedad de ruta de recorte, el área de recorte se establece como un círculo

Puede experimentar con esta propiedad aquí.

▍ Propiedad de ruta de clip CSS y accesibilidad al contenido

Un elemento al que se aplica la propiedad clip-path solo se oculta visualmente. Se puede acceder con el teclado, está disponible para lectores de pantalla.

Manipulaciones con color de texto y tamaño de fuente.

Aunque ocultar texto al cambiar su color o tamaño de fuente no está tan extendido como las técnicas discutidas anteriormente para ocultar elementos, en algunos casos esto puede ser útil.

▍ Establecer transparencia de color

Si usa un color transparente para el texto, este texto será invisible. Esto puede ser útil al crear botones que usan solo iconos.

▍ Ajustar tamaño de fuente

Además, si establece el tamaño de fuente en 0 , esto también ocultará el texto.

Considere el siguiente ejemplo. Aquí hay un botón, cuya estructura está definida por el siguiente código HTML:

 <button>  <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="false" focusable="false">    <!-- Path data -->  </svg>  <span>Like</span> </button> 

Nuestro objetivo es ocultar el texto de este botón, pero al mismo tiempo dejarlo disponible para tecnologías de asistencia. Para hacer esto, utilicé el siguiente código CSS:

 .button span {    color: transparent;    font-size: 0; } 

Ahora el texto está oculto. Cabe señalar que esta técnica funcionará sin cambiar el color del texto. Pero yo, para distinguir diferentes opciones para ocultar el texto, cambié el color aquí.


1. El contenido del botón está centrado. 2. Al texto se le asigna un color transparente. 3. El tamaño de la fuente se establece en 0

→ Aquí hay una demostración para este ejemplo

Atributo HTML aria-hidden

Cuando se agrega un atributo aria-hidden a un elemento, este elemento se elimina del árbol de accesibilidad. Esto facilita que los usuarios que usan lectores de pantalla usen la página. Tenga en cuenta que un elemento con este atributo es visible en la página. Es invisible solo para las tecnologías de asistencia.

 <button>    Menu    <svg aria-hidden="true"><!-- --></svg> </button> 

En este ejemplo, hay un botón de Menu con un icono y una etiqueta. El atributo aria-hidden="true" permite ocultar este botón de los lectores de pantalla.

Este atributo, de acuerdo con los materiales de MDN, se utiliza en los siguientes escenarios:

• Ocultar elementos decorativos como iconos e imágenes.
• Ocultar texto duplicado.
• Ocultar elementos minimizados o elementos que están fuera de la pantalla.

AttributeAtributo oculto de Aria y accesibilidad al contenido

Este atributo se creó específicamente para ocultar contenido de tecnologías de asistencia. Pero los elementos son visibles en la página, puede interactuar con ellos usando el teclado.

Animación e interactividad.

Antes de entrar en los ejemplos, me gustaría detenerme en las formas discutidas anteriormente de ocultar elementos. Haremos esto para compararlos y elegir lo que satisfaga nuestras necesidades. La siguiente tabla, que se puede encontrar aquí , se basa en este maravilloso artículo.

Si desea animar un elemento oculto, por ejemplo, una barra de navegación móvil, este elemento debe crearse teniendo en cuenta su disponibilidad. A continuación consideraremos ejemplos infructuosos y exitosos de trabajar con elementos en términos de accesibilidad. Esto nos permitirá evitar errores que complican el trabajo con sitios para usuarios que utilizan tecnologías de asistencia.

▍ Animación del menú: enfoque equivocado

Tenemos un menú que, cuando se abre, debe salir de la pantalla. La forma más fácil de hacer esto es con el siguiente CSS:

 ul {    opacity: 0;    transform: translateX(100%);    transition: 0.3s ease-out; } ul.active {    opacity: 1;    transform: translateX(0); } 

Gracias a este código, el menú se expandirá y colapsará según la clase .active , que se agregará utilizando el siguiente código JavaScript:

 menuToggle.addEventListener('click', function(e){  e.preventDefault();  navMenu.classList.toggle('active'); }); 

Así es como se ve trabajar con ese menú.


Dejando el menú en acción

Puede parecer que hemos logrado buenos resultados al crear este menú, pero aquí se ha cometido un gran error. El uso de la propiedad opacity: 0 no eliminará los elementos de navegación del árbol de accesibilidad. Incluso si el menú de la página no está visible, se puede acceder con el teclado, los lectores de pantalla pueden trabajar con él. Para no confundir a los usuarios que usan tales herramientas, el menú también debe estar oculto de estas herramientas.

Aquí está el árbol de accesibilidad para la página en cuestión, creado utilizando las herramientas de la pestaña Accessibility la herramienta Chrome.


Árbol de accesibilidad de un menú oculto mal diseñado

El árbol de accesibilidad es, en pocas palabras, una lista de todo lo que los usuarios que usan lectores de pantalla pueden acceder. En nuestro caso, tienen acceso a todos los elementos del menú que son invisibles en la pantalla. Aquí puede encontrar dos problemas que debemos resolver:

1. Es necesario asegurarse de que no se pueda acceder a los elementos ocultos del menú con el teclado.
2. Es necesario que los lectores de pantalla no vean el menú oculto y no lean el contenido correspondiente.

La siguiente imagen muestra cómo la página es visible para VoiceOver desde Mac OS. Es fácil notar que esta herramienta ve el menú perfectamente incluso si este menú no está en la pantalla.


El lector de pantalla ve lo que no debería ver

→ Aquí hay una versión funcional de este ejemplo

Reparemos los errores anteriores.

▍ Animación de menú: correcciones de errores

Para mejorar el menú y corregir errores, debe usar la visibility: hidden propiedad CSS visibility: hidden . Esto le permitirá ocultar el menú de la página y evitará que los medios de lectura de la pantalla funcionen con él. Aquí está el código CSS para solucionar el problema:

 ul {    visibility: hidden;    opacity: 0;    transform: translateX(100%);    transition: 0.3s ease-out; } ul.active {    visibility: visible;    opacity: 1;    transform: translateX(0); } 

Después de aplicar este código, el menú minimizado desaparecerá de la pantalla y del "campo de visión" de las tecnologías de asistencia. Explore la página nuevamente con VoiceOver.


El lector de pantalla no ve nada extra

→ Aquí hay un proyecto que ilustra un ejemplo

Elementos de casilla de verificación personalizados

Elemento de casilla de verificación

Las banderas estándar, <input> elementos de tipo checkbox de checkbox , son difíciles de configurar. Si necesitamos configurarlos, esto significa que necesitaremos crear nuestra propia implementación de dicho elemento. Eche un vistazo a su código HTML básico:

 <p class="c-checkbox">  <input class="sr-only" type="checkbox" name="" id="c1">  <label class="c-checkbox__label" for="c1">Custom checkbox</label> </p> 

Para configurar la casilla de verificación, debe poder ocultar el elemento teniendo en cuenta las necesidades de las tecnologías de asistencia. Para hacer esto, debe usar la propiedad de position , así como otras propiedades. Aquí hay una clase CSS que se puede llamar sr-only o visually-hidden , que oculta un elemento solo visualmente, pero lo deja accesible para lectores de pantalla y para la navegación del teclado.

 .sr-only {  border: 0;  clip: rect(0 0 0 0);  -webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);  clip-path: polygon(0px 0px, 0px 0px, 0px 0px);  height: 1px;  margin: -1px;  overflow: hidden;  padding: 0;  position: absolute;  width: 1px;  white-space: nowrap; } 

Gracias al uso de esta clase, el elemento de checkbox de checkbox de nuestro propio diseño no pierde accesibilidad. Aquí hay una historia más detallada sobre tal elemento. Y aquí hay una demostración de trabajar con un elemento similar.

Ocultar contenido de lectores de pantalla

▍ Ocultar algunos personajes

El encabezado donde desea ocultar el emoticón

El encabezado que se muestra arriba usa el emoticón. Si este smiley no está oculto a las tecnologías de asistencia, el lector de pantalla, al leer el título, dirá lo siguiente:

 Hiding On The Web grinning face with open mouth 

Diferentes emoticones tienen diferentes descripciones de texto, expresados ​​mediante la lectura de la pantalla. Imagine la sensación de un usuario que, después de mirar la página, escucha algo así. Seguramente sentirá que algo anda mal con esta página. Para no sobrecargar a los usuarios con información innecesaria, vale la pena usar el atributo aria-hidden. Es decir, puse el emoticón en la etiqueta <span>con el atributo aria-hidden="true"y así lo oculté de los lectores de pantalla.

 <h1>Hiding On The Web <span aria-hidden="true"></span></h1> 

, , .

▍

Twitter See New Tweets , aria-hidden . ( ) .

▍

. aria-hidden="true" , «» .

Resumen

- . , , .

Estimados lectores! - ?