Día 21: Ignorar las imágenes espaciadoras (spacer images)

Muchos diseñadores usan imágenes espaciadoras transparentes para controlar la disposición de su sitio de Internet en los navegadores visuales. Usted puede usar tantas como quiera, pero necesita especificar explícitamente un atributo alt en cada imagen espaciadora para que los navegadores no visuales sepan ignorarlas.

Quién se beneficia?

  1. Marcus se beneficia. Por defecto, Lynx muestra el nombre de archivo de cualquier imagen que no contenga un atributo alt. Muchas plantillas populares para registros de apuntes incluyen muchas imágenes espaciadoras incluso antes del nombre del sitio. Usted no se da cuenta en su navegador visual, por supuesto, pero esto es lo que ve Marcus:

    [shim.gif] [shim.gif]
[shim.gif]
[shim.gif]
Bienvenido A Mi Sitio De Internet
[ciazulEncabezado2.gif]

[ciazulCurva2.gif]

  2. Jackie se beneficia. Por defecto, JAWS lee el nombre de archivo de cualquier imagen que no contiene un atributo alt. Si creía que Marcus estaba incómodo, imagine lo frustrante que debe ser para Jackie oír esto:

    grafico shim punto gif graphic shim punto gif graphic shim punto gif grafico shim punto gif bienvenido a mi sitio de internet grafico ciazul encabezado dos punto gif grafico ciazul curva dos punto gif

    Si usted se presentara así en la vida real, nadie le hablaría jamás.

Como hacerlo

Los usuarios de Radio pueden tomarse el día libre. Radio genera automáticamente los atributos alt vacíos para todas las imágenes espaciadoras. (Gracias, Jake). Si ve el código fuente de su página de inicio y no ve alt="" on any of your spacer images, en ninguna de sus imágenes espaciadoras, actualice Radio.root y publique su sitio de nuevo.

Los usuarios de otras herramientas de publicación deben buscar en sus plantillas por etiquetas <img> con nombres como "spacer.gif", "shim.gif", "1.gif", o cualquier imagen que aparezca numerosas veces dentro de su plantilla, posiblemente con los atributos de width y height con diferentes valores cada vez.

Por ejemplo, para cada imagen espaciadora que se vea como esta:

<img src="spacer.gif" width="1" height="10">

Cámbiela a esto:

<img src="spacer.gif" alt="" width="1" height="10">

Si ha utilizado varias veces la misma imagen espaciadora, probablemente sea mejor hacer esto con buscar y reemplazar a nivel global.

Cosas que no debe hacer

  1. No defina alt=" ". El atributo alt debe estar vacío, no con un espacio.

  2. No especifique un atributo alt en su etiqueta <body>, aunque esta defina una imagen de fondo. Esta imagen de fondo es ignorada siempre por los navegadores no visuales. Se muestra así:

    <body background="http://url/to/image.gif">

  3. No especifique un atributo alt en las etiquetas <td>, aun cuando define imágenes de fondo para las celdas. Estas imágenes de fondo son ignoradas siempre por los navegadores no visuales. Se muestran así:

    <td background="http://url/to/image.gif">

Lectura añadida

 
<< Día 20: Proveer un resumen para las tablas | Contenido | Día 22: Usar listas reales (o simularlas de manera correcta) >>