Podemos hallar diferentes opiniones en torno a si el rastreador de Google castiga al usar técnicas CSS de ocultación de contenido. Unos opinan que se trata de un bulo, que Google no interpreta el CSS. Sin embargo, otros llegan a afirmar que en la indexación se tasa la experiencia de usuario, teniendo la capacidad de saber cómo el usuario ve un sitio en su navegador; esto implicaría leer y comprender CSS.
Habitualmente hacemos empleo de las propiedades “display:none”, “visibility:hidden”, “height:0” o “text-indent: -9999px” con el propósito de ocultar algún elemento textual o visual en nuestro diseño. Pero el conflicto con Google aflora cuando pretendemos no mostrar enlaces o palabras clave contenidas en texto exclusivamente dirigidos a los motores de búsqueda para conseguir un mejor posicionamiento. Encontraremos más información de cómo penaliza y reacciona Google a los textos y enlaces ocultos visitando la página web de directrices para webmasters.
Referente a la accesibilidad, cuando tratamos de desarrollar una aplicación web accesible debemos de tener en consideración los textos de asistencia. Su desarrollo está pensado para que el software de lector de pantalla facilite la comprensión de los distintos menú de navegación o secciones de un sitio, pero deben de ocultarse al usuario común porque tendrían el efecto contrario: saturar por la gran cantidad de texto, haciendo más difícil la interacción.
Al utilizar los atributos “display:none”, “visibility:hidden” o “height:0”, nos encontramos con el problema que nuestro contenido reacciona de forma diferente, dependiendo del tipo de software empleado por los usuarios discapacitados. Como los lectores de pantalla se ejecutan en la parte superior de los navegadores, el contenido oculto será leído por estos, aunque algunos lectores no lo consiguen. En el caso de emplear la propiedad “text-indent: -9999px” puede dar como resultado el contratiempo de perder el foco cuando tabulamos por el contenido del site.
Existe un estilo para ocultar contenido sin dejar a los sintetizadores pasarlo por alto, ni causar problemas de “saltos” en la lectura confundiendo con ello a las personas que leen visualmente. Se consigue con la propiedad “clip”, aunque esta tiene ciertos inconvenientes; no pasará el validador de sintaxis CSS y corresponderá especificar definiciones para navegadores antiguos como IE6 y IE7.
En definitiva, el código compatible a emplear para el uso de “clip” con la finalidad de ocultar textos de asistencia será:
.textoClip {
position: absolute;
clip: rect(0px 0px 0px 0px); //Para IE<8
clip: rect(0px, 0px, 0px, 0px); //Para IE8+ y los demás navegadores
}
En el caso de desear mostrar el contenido oculto cuando coge el foco solo deberemos de cambiar en el código anteriormente indicado el atributo “position” a “static” y “clip” a “rect(auto)”, ligados al evento :focus de CSS.