Ocultar contenido visualmente y/o para el lector de pantalla (tabla resumen)

Ejemplos de diferentes maneras de ocultar el contenido con etiquetas y atributos HTML y sus consecuencias. Se pueden consultar en la tabla de este artículo.

En HTML/CSS existen muchas técnicas para ocultar contenido, pero no todas tienen las mismas consecuencias. Este artículo muestra un cuadro resumen que sirve de consulta rápida sobre las consecuencias de usar una u otra técnica para ocultar el contenido.

Las posibles consecuencias de las técnicas para ocultar el contenido son tres:

Oculto visualmente- Disponible para el lector de pantalla: unas técnicas ocultan el contenido visualmente, pero este contenido sigue estando disponible para los productos de apoyo. Por ejemplo, es útil para incluir alguna información destinada a clarificar el acceso para los usuarios de lector de pantalla o línea braille (productos de apoyo utilizados fundamentalmente por las personas invidentes). Podría servir para ocultar un texto explicativo en los enlaces: Leer más <span class="ocultovisual">sobre el artículo "Accesibilidad y HTML5"</span>).
Oculto visualmente - Oculto para el lector de pantalla: otras técnicas ocultan el contenido visualmente pero también para el lector, por ejemplo, es útil para ocultar un menú plegado.
Visible - Oculto para el lector de pantalla: en otros casos, la técnica permite que el contenido se vea pero el lector de pantalla lo ignore y no lo anuncie, por ejemplo, es útil para evitar contenido redundante y repetitivo al usuario de lector de pantalla.

Tabla resumen de las consecuencias de ocultar el contenido con diferentes técnicas

En cada fila de la siguiente tabla se incluye una técnica para ocultar el contenido, indicando si oculta visualmente el contenido y si el lector de pantalla lo anuncia. La respuesta puede ser: Sí (visto verde); No (cruz roja); o una Advertencia (exclamación naranja) que se explicará en una nota.

Consecuencias de ocultar contenido con diferentes técnicas
Técnica para ocultar contenido	Tipo de técnica	¿El lector anuncia el contenido?
`display:none` (1)	CSS
`visibility:hidden` (1)	CSS
`height:0` (2)	CSS
`aria-hidden=true (3)`	atributo ARIA
`hidden (3)`	atributo HTML5
`role=presentation / role=none` (4)	rol ARIA	Si es una imagen: Cualquier otro contenido lo lee como texto plano (5):
`text-indent:-999em`	CSS
`clip: rect (...)`	CSS
`opacity:0`	CSS
`transform: scale (0)`	CSS

Si necesitáis saber las consecuencias de ocultar el contenido con otra técnica, dejadme un comentario y lo añadiré a la tabla.

Notas de interés sobre el cuadro resumen

(1) display:none oculta el elemento y sus descendientes no solo visualmente, sino también para los lectores de pantalla. Aunque es el comportamiento habitual, no es cierto para todos los lectores de pantalla, en todos los casos y con todos los navegadores. Por su parte, el contenido con el estilo visibility:hidden no se anuncia en muchos contextos, pero la aplicación de esta técnica en determinadas etiquetas y con cierta combinación de navegadores y lectores de pantalla, provoca que el lector sí anuncie el contenido. Como el lector de pantalla no interpreta igual ambas técnicas, se pueden usar combinadas para mayor soporte.

Artículos de interés:

“JAWS, Window-Eyes and display:none: Return to 2007” de Jason Kiss, 2011
“Do not use display:none to visually hide content intended for screen readers”, de Roger Johansson, 2011.
Empty Links and Screen Readers

(2) Esta técnica se aplicaría por ejemplo así: .element-invisible { height: 0; overflow: hidden; position: absolute;}. Los lectores de pantalla NVDA y Jaws leerán el contenido, pero Voice Over (en dispositivos Apple) no lo lee. Por tanto, es mejor usar otras técnicas con un soporte más homogéneo, por ejemplo, text-indent:-999em si lo que se quiere es ocultar contenido visualmente pero no para el lector de pantalla.

Artículo de interés:

"Using CSS clip as an Accessible Method of Hiding Content" de Jeff Burnz.

(3) Artículo de interés: Screen reader support for hidden content

(4) WAI-ARIA 1.1 añade un nuevo role=none que es sinónimo de role=presentation y al que espera sustituir cuando esté ampliamente soportado. Mientras esto no ocurra es preferible seguir usando role=presentation. Artículo relacionado: Novedades WAI-ARIA 1.1).

(5) La consecuencia de aplicar role=presentation es diferente según el elemento al que se aplica. En una imagen (<img role=presentation ...>) el lector ignorará la imagen y no la anunciará. En cualquier otro elemento, lo leerá solo como texto, ignorando la información semántica. Por ejemplo, <h1 role="presentation">Ventas</h1> será anunciado como "Ventas", en vez de como "Ventas encabezado de nivel 1". Este rol es muy útil para aplicarlo a las tablas de presentación.