Ocultar contenido correctamente

No todos los métodos para ocultar contenido son adecuados para usuarios que utilizan lectores de pantalla u otras tecnologías de asistencia. En esta página se describen los métodos principales para ocultar contenido tanto para todos los usuarios como específicamente para usuarios de lectores de pantalla.

Hacer que el contenido sea invisible (oculto visualmente)

Si un elemento en la página:

• es un elemento interactivo que debe hacerse invisible pero aún ser temático (por ejemplo, un enlace, casilla de verificación, interruptor o control de formulario con estilos personalizados),
• es un encabezado o etiqueta para algo cuyo propósito es evidente (y por lo tanto el encabezado/etiqueta no debe mostrarse a usuarios videntes; por ejemplo, etiqueta de sección o etiqueta de elemento de formulario),
• no debe ser visible para usuarios videntes pero sí para usuarios de lectores de pantalla,

... entonces debes hacerlo invisible (oculto visualmente).

Puedes hacerlo:

asignando al elemento la clase visually-hidden,
en Drupal 8 configura campos en la página de administración de visualización para los subtipos de entidad (por ejemplo, el campo "Etiquetas" en el tipo de contenido Artículo) para establecer la etiqueta del campo en "- Visually Hidden -",
usar CSS para posicionarlo fuera del área visible de la página, o,
usar CSS

position: absolute !important;
clip: rect(1px, 1px, 1px, 1px);
overflow: hidden;
height: 1px;
width: 1px;
word-wrap: normal;

en el elemento.

Ejemplo:
Ocultar el título de mensajes de error, advertencia y estado.

Justificación:
En la mayoría de los temas, los mensajes de estado se muestran de forma visible en un recuadro coloreado para atraer la atención de usuarios videntes, pero de acuerdo con la Sección 1.3.3 de WCAG 2.0, la comprensión y el uso del contenido no deben depender únicamente de características sensoriales como forma, tamaño, posición visual u orientación.

Sin un título que indique qué son estos mensajes de estado, pueden confundir a usuarios de lectores de pantalla.

La mayoría de los lectores de pantalla permiten saltar por los encabezados de la página. Dar un encabezado a los mensajes facilitará encontrarlos.

Hacer que el contenido sea invisible hasta que alguien navegue hacia él con el teclado

Si un elemento en la página:

• es un enlace para ayudar a usuarios a saltar al contenido principal o a la navegación principal,
• es una alternativa a otros elementos que solo se pueden usar con el ratón, o,
• simplemente no debe ser visible para usuarios videntes, a menos que naveguen con el teclado,

... entonces debes hacerlo invisible hasta que alguien navegue hacia él con el teclado.

Puedes hacerlo:

• asignando al elemento ambas clases visually-hidden y focusable, o,
• usando CSS

css_selector_for_my_element {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
  height: 1px;
  width: 1px;
  word-wrap: normal;
}
css_selector_for_my_element:active,
css_selector_for_my_element:focus {
  position: static !important;
  clip: auto;
  overflow: visible;
  height: auto;
  width: auto;
}

Donde css_selector_for_my_element es el selector del elemento que quieres hacer invisible hasta que alguien navegue hacia él con el teclado.

Ejemplo:
El enlace "Saltar al contenido principal" en la parte superior de cada página en temas principales.

Justificación:
Los usuarios que usan solo teclado y lectores de pantalla quieren saltar rápidamente al contenido principal de la página.

Para cumplir con la norma Sección 2.4.1 de WCAG 2.0, debes proporcionar un método para saltar bloques de contenido que se repiten en varias páginas.

Ocultar completamente el contenido para todos los usuarios

Si un elemento en la página:

• no debe mostrarse hasta que un evento de JavaScript lo haga visible,
• no es relevante para usuarios videntes o lectores de pantalla en ese contexto,
• contiene valores que son leídos/escritos por JavaScript pero nunca deben mostrarse directamente, o,
• generalmente no debe ser visible para usuarios videntes ni para lectores de pantalla,

... entonces debes ocultarlo completamente para todos los usuarios.

Puedes hacerlo:

• asignando al elemento la clase hidden (en D8),
• si es un campo en un subtipo de entidad, configúralo en "Oculto" en la página de administración de visualización para ese subtipo,
• si es la etiqueta de un campo en un subtipo de entidad, configúrala en "Oculto" en la página de administración de visualización para ese subtipo, o,
• usando CSS: display: none;

Ejemplo:
Ocultar el área de previsualización del módulo de color hasta que se active JavaScript:

/* color.css (Drupal 7 y 8) */
#preview {
  display: none;
}

Justificación:
La previsualización no funciona si JavaScript no está activo, así que no es necesaria para nadie.

Mal uso

Un uso común inapropiado de "display:none" es eliminar la etiqueta o encabezado de un formulario para cambiar la apariencia de la página. Sin embargo, esto hará que el elemento del formulario no sea accesible para usuarios de lectores de pantalla.

Por ejemplo, si eliminas la etiqueta de un formulario con "display:none", un usuario de lector de pantalla podría decir: "Tengo un campo de texto obligatorio pero no sé para qué sirve". En este caso, es más apropiado hacer el contenido invisible (oculto visualmente).

Hacer el contenido invisible para lectores de pantalla

Si un elemento en la página:

• es confuso por sí mismo, o,
• debe ser visible solo para usuarios videntes,

... entonces debes hacerlo invisible para lectores de pantalla.

Puedes hacerlo:

• asignando al elemento el atributo aria-hidden="true"

Ejemplo:
Un control para eliminar un filtro de búsqueda muestra una "x" solo a usuarios videntes y provee instrucciones accesibles visualmente ocultas para usuarios de lectores de pantalla:

Currently filtering by: <a href="...">Module <span class="visually-hidden">Click to remove this filter.</span> <span aria-hidden="true">x</span></a>

Justificación:
Ya existe un texto alternativo accesible.

Escuchar solo la "x", incluso después de escuchar el texto alternativo, puede confundir a usuarios de lectores de pantalla.

Mal uso

Crear contenido invisible para lectores de pantalla significa que las personas que dependen de ellos no pueden percibirlo ni interactuar con él. Para cumplir con la Sección 1.1 de WCAG 2.0, debes proveer contenido alternativo accesible, de lo contrario las personas que usan tecnologías de asistencia no podrán usarlo.

Más sobre contenido invisible

• Recomendaciones de WebAIM
• display:none y lectores de pantalla