Diseño de patrones para contenidos accesibles, rastreables e indexables

jueves, 5 de marzo de 2009

Como seguimiento a una entrada anterior [inglés] sobre accesibilidad, he aquí algunas recomendaciones sobre diseño para la creación de contenido web que pueda ser usado por una audiencia lo más amplia posible y que, a la vez, se indexe y se rastree.

Evita XMLHttpRequests falsos

Las páginas que permiten a los usuarios buscar información utilizan a menudo XMLHttpRequests para rellenar la página con información una vez que ésta ha cargado. Si utilizas este patrón, asegúrate de que tu página principal contiene información útil. De lo contrario, tanto el Googlebot como los usuarios que tienen desactivados los scripts en el navegador podrían pensar que tu sitio solamente contiene el mensaje "cargando ..." y nada más.

CSS con imágenes precargadas (Sprites CSS) y links de navegación

Disponer de texto relevante que acompañe a los enlaces de navegación es importante tanto para el Googlebot como para los usuarios que no pueden visualizar imágenes. Al diseñar la apariencia de los enlaces de navegación de tu sitio, puedes haber elegido tener imágenes que funcionan como enlaces, por ejemplo, colocando etiquetas <img> en elementos <a>. Ese diseño te permite colocar texto descriptivo como atributo alt [inglés] para la etiqueta <img>.

¿Y qué pasa si has optado por el uso de imágenes precargadas ( sprites CSS ) para optimizar el proceso de carga de las páginas? También puedes incluir texto descriptivo relevante. Para ver un ejemplo, mira cómo se ha codificado el logotipo de Google y los distintos enlaces de navegación en la parte inferior de la página de resultados de Google. Resumiendo, hemos puesto el texto descriptivo justo debajo de la imagen con sprites CSS.

Resultados de búsqueda de Google con CSS activado


Resultados de búsqueda de Google con CSS desactivado (Se ha perdido la imagen, pero permanece el enlace descriptivo"Google")



Utiliza JavaScript no intrusivo (unobtrusive JavaScript)

Hemos hablado sobre el concepto de mejora progresiva [inglés] al crear un sitio interactivo. A medida que añades funcionalidades, también vas utilizando técnicas de JavaScript no intrusivo ( unobtrusive JavaScript ), para crear páginas web basadas en JavaScript que se integran con el resto. Esto garantiza que tu contenido siga siendo accesible para el mayor número posible de usuarios sin la necesidad de sacrificar las funcionalidades interactivas propias de la aplicaciones Web 2.0.

Facilita el acceso a las versiones para imprimir

Los sitios web con diseños visuales muy interactivos proporcionan a menudo su contenido en versión para imprimir. Generadas con el mismo contenido que la versión interactiva, resultan una excelente fuente de contenido de alta calidad, tanto para el Googlebot como para los usuarios con deficiencias visuales que no pueden experimentar las características interactivas de un sitio web. Pero a menudo estas versiones para impresión permanecen ocultas detrás de enlaces en scripts como este:

<a href = "#" onclick = "javascript: print(...)"> Imprimir </ a>

Crear URL para estas versiones para imprimir y enlazarlas mediante anclas HTML simples mejorará mucho la calidad del contenido que se rastrea:

<a href="https://example.com/pagina1-para-imprimir.html" target="_blank">Imprimir</a>

Si estás especialmente preocupado por el contenido duplicado [inglés] de la versión interactiva y de la versión para imprimir, entonces puedes elegir una versión preferida del contenido y enviar un sitemap que contenga la URL preferida, así como enlazar internamente a dicha versión. Esto puede ayudar a Google a aclararse en el caso de que se encontraran partes del mismo texto en URL diferentes.

Crea URL para tu contenido útil

Como webmaster, tienes el poder de acuñar URL con el contenido útil que publicas. Esto es lo que hace que la web se mueva. Crear URL para cada contenido útil que publicas y enlazarlo mediante enlaces HTML simples hará que:
  • El Googlebot aprenda sobre ese contenido
  • Los usuarios puedan encontrar ese contenido
  • Los usuarios puedan guardarlo y volver más tarde.
No hacer esto fuerza a los usuarios a tener que recordar secuencias de clics para llegar al contenido que vieron antes en tu sitio.