Respuesta corta: una clase de ocultación visual, llamada sr-only o visually-hidden, deja un texto en la página para el lector de pantalla sin que se vea en pantalla. Úsala pocas veces, para algo que quien ve la página ya recibe de otra forma. Para ocultar contenido a todo el mundo, usa display: none.
Cuándo ocultar un texto solo en pantalla
Para WebAIM, en la gran mayoría de los casos el contenido debe ser igual para quien ve la página y para quien usa un lector de pantalla. Las instrucciones largas que solo lee el lector de pantalla suelen hacer más mal que bien.
Las excepciones son los casos en que el sentido está claro en pantalla pero no en el código. Una lupa que hace de etiqueta de un buscador es el ejemplo de The A11Y Project. El de Tailwind es un icono de ajustes con la palabra Settings oculta al lado. Para un botón con icono, aria-label es la otra forma de darle nombre, como muestra nuestra guía de aria-label.
Qué técnica oculta el texto y cuál lo quita
| Técnica | Lector de pantalla | Para qué sirve |
|---|---|---|
| display: none o visibility: hidden | No lo lee | Contenido oculto para todos |
| El atributo hidden | No lo lee | Lo mismo que display: none |
| Ancho o alto de 0 píxeles | La mayoría lo salta | Para nada: WebAIM lo desaconseja |
| Fuera de la pantalla (sr-only) | Lo lee | Texto que solo necesita el lector de pantalla |
| El patrón clip (visually-hidden) | Lo lee | Lo mismo, y también texto de derecha a izquierda |
De WebAIM y The A11Y Project, en inglés, consultados el 5 de noviembre de 2026.
La clase sr-only de WebAIM saca el texto de la pantalla y lo reduce a un píxel con el desbordamiento oculto. El patrón clip de The A11Y Project lo recorta a una caja de un píxel en vez de sacarlo de la pantalla. Funciona también con idiomas que se escriben de derecha a izquierda.
Los frameworks ya incluyen estas clases. Bootstrap llama a la suya visually-hidden, y Tailwind la llama sr-only, con not-sr-only para volver a mostrar el texto.
Los enlaces y botones deben aparecer con el foco
Un enlace o un botón oculto así puede seguir recibiendo el foco del teclado. WebAIM y The A11Y Project dicen que tiene que hacerse visible cuando lo recibe; si no, quien navega con teclado y ve la pantalla no sabe dónde está el foco.
Los enlaces para saltar al contenido son el caso típico: ocultos hasta el primer Tab y visibles después, arriba de la página. Bootstrap tiene la clase visually-hidden-focusable justo para eso, y nuestra guía de saltar al contenido principal muestra cómo hacer uno.
Texto oculto dentro de un enlace
La técnica C7 del W3C oculta parte del texto de un enlace para completar su propósito. Un enlace que muestra Full Story puede llevar el título de la noticia como texto oculto, y el lector de pantalla anuncia qué noticia abre.
El W3C asocia la técnica a los criterios de propósito de los enlaces de las WCAG: el enlace se entiende incluso fuera de su contexto. Nuestra guía del lector de pantalla muestra cómo recorre la gente una página.
Cómo añadir texto oculto visualmente
- Comprueba antes que esa información también está en pantalla.
- Usa la clase de tu framework, o define una con el patrón clip.
- Haz que el texto oculto sea corto y concreto.
- No uses nunca display: none, visibility: hidden ni el atributo hidden para esto.
- Haz visible cualquier enlace o botón oculto cuando reciba el foco.
- En un enlace, pon las palabras ocultas dentro de él, junto a las visibles.
- Comprueba con un lector de pantalla o en el árbol de accesibilidad que el texto se lee.
Qué ocultamos en nuestra web
El 5 de noviembre de 2026 revisamos seis de nuestras páginas: la de inicio, la de contacto y una guía en cada idioma. Los textos que siguen son solo para el lector de pantalla, y cada uno se oculta con el patrón clip en una caja de un píxel.
Dos enlaces para saltar llevan al contenido principal y al pie de página. El primer Tab muestra «Saltar al contenido principal» arriba a la izquierda de la página, y el segundo Tab, «Saltar al pie de página» en el mismo sitio.
El texto «Se abre en una pestaña nueva» describe los enlaces que abren una pestaña nueva. En la guía, el botón de reproducir del audio lleva su nombre, «Reproducir la versión en audio», junto a su icono. Y el aviso de cookies compacto guarda su título, «Tus opciones de privacidad», solo para el lector de pantalla.
Antes de publicar
- El texto oculto repite algo que quien ve la página ya recibe.
- Nada pensado para el lector de pantalla usa display: none.
- Los enlaces y botones ocultos aparecen al recibir el foco.
- El texto oculto es corto y concreto.
- Los enlaces se entienden fuera de contexto con sus palabras ocultas.
- El texto de derecha a izquierda, si la web lo tiene, usa el patrón clip.
RecuerdaLa ocultación visual es una herramienta pequeña para pocos casos. La mayor parte del contenido debe ser igual para todos, en pantalla y en el lector de pantalla.
Nuestro servicio de diseño web reserva estas clases para los pocos sitios que las necesitan.
Respuestas rápidas sobre el texto oculto visualmente
¿Qué significa sr-only?
Screen reader only, solo para lector de pantalla. Es el nombre de una clase de CSS que oculta un texto en pantalla pero lo deja en la página, y el lector de pantalla lo sigue leyendo. WebAIM señala que el nombre da igual; Bootstrap llama a la suya visually-hidden.
¿Por qué no usar display: none?
Porque oculta el contenido a todo el mundo. WebAIM explica que display: none y visibility: hidden también lo quitan del lector de pantalla, y que el atributo hidden funciona igual. Úsalos para el contenido que nadie debe recibir.
¿Se puede ocultar visualmente un enlace o un botón?
Solo si aparece cuando recibe el foco del teclado. Si no, avisa The A11Y Project, quien navega con teclado y ve la pantalla no sabe dónde está el foco. Los enlaces para saltar al contenido son el caso típico, y Bootstrap tiene una clase para ello.
¿Cuándo añado texto solo para el lector de pantalla?
Pocas veces. WebAIM dice que las instrucciones largas que solo lee el lector de pantalla suelen hacer más mal que bien. Úsalo cuando algo queda claro en pantalla pero no en el código, como un icono que hace de palabra.
¿Es mejor el patrón clip que mover el texto fuera de la pantalla?
Los dos funcionan con el lector de pantalla. The A11Y Project señala que el patrón clip funciona además con idiomas que se escriben de derecha a izquierda, donde fallan el posicionamiento fuera de pantalla y el text-indent negativo.
Fuentes
Consultadas el 5 de noviembre de 2026. En inglés: WebAIM, CSS in Action: Invisible Content Just for Screen Reader Users; The A11Y Project, How-to: Hide content; Iniciativa de Accesibilidad Web del W3C, C7: Using CSS to hide a portion of the link text; Bootstrap, Visually hidden; Tailwind CSS, display. Nuestro caso: nuestras propias páginas, leídas en un navegador el 5 de noviembre de 2026.