domingo, 13 de noviembre de 2011

Ocultar contenido sin comprometer la accesibilidad ni el posicionamiento de la página

Nota 2020: consultar tabla resumen en el artículo Ocultar contenido visualmente y/o para el lector de pantalla (tabla resumen).

El objetivo del artículo es explicar cuál es la mejor manera de ocultar visualmente contenido de una página web de tal manera que:

  • no comprometa el posicionamiento de la página con prácticas sancionables por Google
  • asegure la accesibilidad de las páginas para aquellas personas que utilicen lectores de pantalla

¿Qué texto podemos desear ocultar? ¿deberíamos ocultarlo?

En un desarrollo accesible hay dos ejemplos típicos y habituales en los que se plantea ocultar texto:

  • el enlace “Saltar al contenido” que suele incluirse al comienzo de las páginas. Según la encuesta “Survey of Preferences of Screen Readers Users” de WebAim de 2009, el 38% de los usuarios de lectores de pantalla lo utiliza siempre que puede o a menudo y el 24% algunas veces (otros prefieren saltar de encabezado en encabezado). Recordemos que incluir este tipo de enlace es de prioridad AAA en las WCAG 1.0 (punto de verificación 13.6) y de prioridad A en las WCAG 2.0 (criterio de verificación 2.4.1)
  • el texto complementario a los enlaces del tipo “Leer más”, puesto que deben evitarse enlaces con el mismo texto pero con vínculos a páginas diferentes. Por tanto, cada uno de los enlaces “Leer más” (por ejemplo asociados a los titulares de varias noticias) es en realidad “Leer más sobre la Noticias 1”, “Leer más sobre la Noticia 2”, pero el texto que sigue a “Leer más” se oculta a la vista. Recordemos que evitar este tipo de enlaces con texto igual pero vínculo diferente es un requisito AA en las WCAG 1.0 (punto de verificación 13.1) y A o AAA en las WCAG 2.0 en función de si es comprensible el enlace en el contexto (criterio de verificación 2.4.4 y 2.4.9)

Por tanto se dan casos en los que para cumplir con las pautas de accesibilidad puede que pensemos que hay que ocultar algún texto. Digo que “puede que pensemos” puesto que antes de tomar esta decisión habría que meditar si es realmente necesario o conveniente ocultarlo.

Por ejemplo, en el primer caso, si bien es cierto que el enlace “Saltar al contenido” beneficia a los usuarios que utilizan lectores de pantalla porque les permite alcanzar el contenido principal de una forma sencilla y rápida (evitándoles escuchar la cabecera y el sistema de navegación en todas las páginas antes de llegar al contenido) también beneficia a las personas que acceden con el teclado, a aquellos que utilizan magnificadores de pantalla o a los que acceden desde un dispositivo móvil.

Sería por tanto recomendable incluirlo siempre visible, pero a veces se imponen otros criterios estéticos. Solo quería dejar ahí la reflexión. Pasemos ahora a ver, si los ocultamos, cómo deberíamos hacerlo.

Display:none

Aplicar el estilo display:none a un elemento de una página lo hace totalmente invisible: no genera una caja, no ocupa lugar, no afecta a la disposición. Oculta el elemento y sus descendientes no sólo visualmente sino también a los lectores de pantalla.

Para saber exactamente cómo interpretan diferentes lectores de pantalla display:none (pues no es cierto que todos los lectores de pantalla en todos los casos y con todos los navegadores no lean un elemento oculto con display:none) recomiendo el artículo de agosto de 2011 “JAWS, Window-Eyes and display:none: Return to 2007” de Jason Kiss.

Sobre el uso de display:none recomiendo el artículo “Do not use display:none to visually hide content intended for screen readers” de Roger Johansson.

Visibility:hidden

Con visibility:hidden ocurre algo similar, el contenido así oculto no siempre será leído por los lectores de pantalla, pero estos tampoco lo interpretan como un display:none. Por eso, cuando lo que se quiere es que algo esté oculto visualmente y oculto para todos los lectores de pantalla (lo contrario que estamos tratando aquí, que queremos ocultarlo visualmente pero que sea leído por los lectores de pantalla) lo que se recomienda es que se oculte con ambos:

.hide { display: none; visibility: hidden; }

Recomiendo leer el artículo “Screen readers sometimes ignore display:none” de Roger Johansson y el estudio “Empty Links and Screen Readers” de yuiblog.com donde se muestran esquemáticamente los resultados de utilizar display:none y visibility:hidden con diferentes navegadores y lectores de pantalla.

En cualquier caso, ni display:none ni visibility:hidden cumplirían el requisito que necesitamos de que el texto oculto sea leído por todos los lectores de pantalla.

Height:0

.element-invisible { height: 0; overflow: hidden; position: absolute;}

Hubiera estado bien, pero Jeff Burnz indica en “Using CSS clip as an Accessible Method of Hiding Content”, que desgraciadamente, aunque NVDA y Jaws leían el contenido, Voice Over (en dispositivos Apple) no lo lee.

Posicionar el texto fuera de pantalla

Por ejemplo con text-indent:-999em (no aplicable a los lenguajes que se leen de derecha a izquierda) o top: -999em;

Esta técnica es accesible para los lectores de pantalla. Pero debe tenerse en cuenta también a los usuarios que no usan un lector de pantalla y asegurarse de que el foco se haga visible. No puede ser que una persona que accede con el tabulador pierda el foco porque este se ha ido a una serie de elementos ocultos situados fuera de pantalla, de tal manera que debe tabular varias veces, sin saber dónde está el foco, hasta que este vuelve a ser visible.

Fijaros cómo lo resuelve la página Department of Homeland Security


a#skip, a#skip:hover, a#skip:visited {position:absolute; top:-100px; width:1px; height:1px; overflow:hidden; font-size:x-small;}

a#skip:active, a#skip:focus {position:static;width:auto;height:auto;text-align:center;margin:0 auto}

<a href="#content" id="skip" accesskey="2">Skip Navigation</a>

El enlace está fuera de pantalla, pero cuando el enlace coge el foco este se hace visible.

Os recomiendo también el artículo “Skip Navigation Links” de James W. Thatcher, donde recuerda también el tema del tabindex=”-1” y las anclas en Explorer.

Puede parecer entonces que esta opción, bien implementada, sería la solución ideal. Sin embargo surge la duda de si podemos tener un problema con el posicionamiento de la página.

Google dice que penaliza el contenido que se oculta, y contenido con text-indent negativo parece fácil de rastrear. Da igual que lo incluyas en la CSS porque también analiza las CSS. Si las restringimos en el fichero “robots.txt” no quiere decir que Google no pueda acceder a ellas y entonces puede que sí seamos realmente sospechosos.

¿Se debe por tanto dejar de utilizar text-indent negativo por miedo a ser penalizado? He estado leyendo experiencias de mucha gente y todos parecen coincidir al final en lo mismo: lo utilizan sin sufrir penalización cuando se hace sin intención maliciosa, es decir, cuando el texto oculto no incluye un relleno de palabras clave, así lo dicen incluso desde Google, cuya página, al fin y al cabo también utiliza el posicionamiento fuera de pantalla.

Resultan muy ilustrativos los comentarios del artículo ”Google, SEO and using CSS to hide text” o el artículo “Demystifying Google's text-indent mystery”

En fin, que después de horas leyendo no he encontrado a nadie que diga que utilizando text-indent de forma legítima, como los ejemplos que he expuesto, le hayan penalizado.

Aun así nos queda una última técnica.

Clip

.element-invisible {
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}

Está técnica es explicada en “Using CSS clip as an Accessible Method of Hiding Content”. Según se indica, el texto así oculto trabaja en todos los navegadores y es leído por Jaws, NVDA y Apple Voice Over. En realidad hay que retocarlo para que esto sea realmente así según se explica en “Clip your hidden content for better accessibility”, de Thierry Koblentz.

Esta técnica la podemos mejorar para el tema del foco (cuando lo que ocultamos son elementos que cogen el foco, por ejemplo un enlace), tal y como veíamos en el ejemplo anterior, de tal manera que cuando coja el foco ponemos "clip" a "auto" y "position" a "static"

Por otra parte, Google no penaliza esta práctica. Así que parece la solución ideal: accesible y no compromete el posicionamiento. Pero siempre hay una pega, en este caso que clip: rect(1px 1px 1px 1px); no pasa el validador de sintaxis CSS. Resulta que IE6 y IE7 no siguen la especificación y para que funcione en estos navegadores los parámetros deben separarse sin comas.

Mi opinión es que, si las definiciones específicas para determinados navegadores:

  • no provocan conflictos con otros navegadores
  • no suponen un problema de accesibilidad
  • se agrupan en una CSS independiente
no deben coartar que se utilicen en aras precisamente de mejorar la accesibilidad de las páginas.


Conclusión

  • No usar display:none, visibility:hidden, ni height:0, puesto que no aseguran la accesibilidad de los textos ocultos en todos lectores de pantalla.
  • Se puede usar el posicionamiento fuera de pantalla porque es accesible, siempre y cuando lo utilices de forma lícita y no para incluir palabras clave, de lo contrario puedes ser penalizado.
  • Se puede usar la técnica del clip porque es accesible y no provoca problemas con el posicionamiento de la página, pero tienes que ser consciente de que la CSS no pasará el validador de sintaxis del W3C.


Artículos relacionados:

18 comentarios :
Víctor Herraiz dijo...

Muy buen artículo, como todos...

Me gustaría comentar que se podría mejorar la solución de "clip" sacando la parte que no valida a una hoja exclusiva para IE 6 y 7. Más tarde o más temprano siempre se tiene que crear una para dar soporte a esos fiascos, perdón, navegadores.

Para incluir la hoja se utiliza un comentario un tanto especial: < !--[if lte IE 7] >

Esta práctica te quita de hacer muchas "chapuzas" en la CSS y reduce el peso de la hoja estándar. Sólo los navegadores (IE) que necesiten estas chapuzillas se las descargan.

De todas formas, aún sigo esperando que los "lectores de pantalla" entiendan media="aural" o "speech"...

Posicionar en Buscadores dijo...

Muy interesante tu artículo. Hay datos que no conocía, eso del display está interesante, lo mismo sobre "salta al contenido" ya que oye mas interesante que "leer más" que muchas veces no da los resultados que queremos. Gracias por el aporte.

Soluciones para Webmasters dijo...

Yo uso "display:none, visibility:hidden" para mis diseños «responsive» , en estos diseños adaptables hay que ocultar div que no necesitamos en los moviles.

Ahora el asunto del spam en la misma codificación se puede identificar inmediatamente, sin ser un super bot, las granjas de links son conocidas por todos, lamentablemente todas ellas tienen anuncios de Adsense ... cosa rara no?

El diseño «responsive» ha ganado la batalla a los diseños «hechos a medida» para los móviles.

Veamos si Google panda o cualquier otra versión sea más inteligente de lo que es ahora.

Fran | TotSEO dijo...

Muy bueno el artículo, aunque personalmente, considero que utlizando la técnica que usemos para ocultar texto, seguro que finalmente Google acaba por castigarla tarde o temprano.

Me apunto a leerte más a menudo, a pesar de que no puedo aplicar estos consejos, seguro que aprendo mucho de tí en otras publicaciones ;)


Saludos

Fran

Olga Carreras dijo...

En "Nada por aquí, nada por allá... 8 formas de desaparecer con CSS" Kseso explica dos formas más de ocultar contenido: opacity:0 y transform

ant dijo...

La frase "Pero debe tenerse en cuenta también a los usuarios que no usan un lector de pantalla y asegurarse de que el foco se haga visible." ...

¿no debería tener un "no" al final tal que fuese:

La frase "Pero debe tenerse en cuenta también a los usuarios que no usan un lector de pantalla y asegurarse de que el foco NO se haga visible."

?

Olga Carreras dijo...

Hola, la frase es correcta.

El elemento está fuera de pantalla pero va a coger el foco cuando accedas con el tabulador, saltando de enlace a enlace.

Como está fuera de pantalla el foco te desaparecerá y esto desorienta mucho.

Por ello, aunque esté posicionado fuera de pantalla, debe tener un foco visible.

Pongo el ejemplo del Department of Homeland Security. Cuando el elemento coge el foco con el tabulador se hace visible.

Unknown dijo...

Yo utilizo este CSS que viene el Bootstrap y funciona de maravillas en distintos navegadores y lectores de pantalla:

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

.sr-only-focusable:active,
.sr-only-focusable:focus {
position: static;
width: auto;
height: auto;
margin: 0;
overflow: visible;
clip: auto;
}

Anónimo dijo...

Muy bueno el artículo. Me surge una duda relacionada con contenido oculto con css.

Por ejemplo, he visto el caso del típico aviso de uso de cookies oculto por css con display:none. Después de leer este artículo entiendo que sería incorrecto porque no se asegura que se esté ocultando para todos los lectores de pantalla y además al tabular el foco se va al input para aceptar las cookies (que no es visible). ¿Estoy en lo correcto? ¿Qué técnica sería la más adecuada en esta situación?

Un caso parecido es el mensaje de carga de la página (un popup que se muestra mientras se están cargando los datos de la página). Mientras no se utiliza está con display:none y se muestra con display:block.

Gracias!

Olga Carreras dijo...

Hola,

al final se reduce a:

- si quiero que esté oculto a los lectores de pantalla uso display: none junto a visibility: hidden;
- si quiero que esté disponible para los lectores de pantalla uso posicionamiento fuera de pantalla

Carmen R. dijo...

Si estos mensajes están al principio en el HTML de la página y ocultos con display:block, al desactivar las CSS aparecen en primer lugar en todas las páginas. Por esta razón me surgió la duda.

Es decir, todas las paginas comienzan con el Html de las cookies y carga de datos, seguidos del h1 y el resto de contenido. ¿Esta sintaxis seria correcta o podría mejorarse por razones de accesibilidad?

Carmen R. dijo...

Disculpa, quería decir "ocultos con display:none". ;)

Olga Carreras dijo...

Hola, lo que no sería correcto es que el mensaje de las cookies tuviera el H1 de la página. Saludos.

Unknown dijo...

Buen artículo y referencias te falta mojarte con temas de SEO xD, cuando tenga las pruebas te las paso. saludos

wili dijo...

genial gracias

jiony dijo...

gracias me gusta esto

Anónimo dijo...

Hola,

Si tengo un texto oculto con opacity: 0, pero al hacer hover en él, se ve este texto con opacity: 1, quería saber si ¿Google también lo penaliza o si perjudica al posicionamiento SEO?

Muchas gracias y un saludo.

Olga Carreras dijo...

No. Te penaliza si la zona está claramente pensada para no ser vista por el usuario, por su tamaño o color de texto o por el uso de display:none, o si oculta muchas palabras clave. Si es un contenido que en algún momento va a ser visualizado por el usuario, y que no estás utilizando para "hacer trampas" no te va a penalizar.

Te recomiendo estos vídeos sobre lo que sí que penaliza:

https://www.youtube.com/watch?v=EsW8E4dOtRY
https://www.youtube.com/watch?v=QHtnfOgp65Q

Publicar un comentario