En curso lleva a: Índice estamos en: Pauta 1

En curso...

Imagen

Comunicación

Diseño

Accesibilidad

Nuevas Tecnologías

 

Aplicando las Pautas

1.- Imágenes y animaciones: Use el atributo alt para describir la función de cada elemento visual

 

Son numerosas las personas que navegan sin descargarse las imágenes, función que ofrecen la mayoría de los navegadores, con el fin de navegar más rápido ya sea porque se tenga prisa o porque se tenga una conexión lenta. Las personas ciegas o con graves deficiencias visuales tampoco puden acceder al contenido de las imágenes. También puede navegarse utilizando una agenda o "Palm Pilot" o un teléfono móvil. Por esta razón es necesario que todas las imágenes tengan un texto alternativo que indique la función que cumple, dicho texto debe ser claro y conciso, se recomienda que no sea mayor de 20 palabras, y puede además, en algunos casos, ofrecer una corta descripción de la imagen.

 

Procedimiento para definir el texto alternativo

En Frontpage: En la vista normal, una vez incrustado el gráfico se selecciona, se va al menú "formato" y se elige "propiedades" (alt+enter). Aparece entonces un cuadro de diálogo en el que bajo el título "Representaciones alternativas" aparece un campo llamado "Texto" (alt+t) en el que se escribe el texto alternativo que deseamos ofrecer. Se puede acceder con el teclado una vez insertada y seleccionada la imagen con: alt+o, alt+p, alt+t.

En HotMetal: Al insertar la imagen, ya sea usando el menú insertar/imagen o bien el botón correspondiente, aparece un cuadro de diálogo en el que ya se nos ofrece un campo para poner el texto alternativo (Alternate text). Se puede acceder a él mediante las teclas con: alt+i para abrir el menú insertar/imagen y de nuevo alt+i para ir al campo de texto alternativo

En HomeSite: Al insertar una imagen, utilizando el botón correspondiente en la "Quick Bar", aparece un cuadro de diálogo en el hay un campo llamado "Alt. Text" en el que se escribe el texto alternativo. Con el teclado se accede con: mayúscula+control+i al cuadro de diálogo para insertar una imagen y, con alt+t para poner el texto alternativo.

En Dreamwever: en la barra de propiedades de la imagen (Inspector de propiedades), que aparece automáticamente cuando se selecciona una imagen, hay un campo para introducir el texto alternativo, llamado "Alt".

En Amaya: En el menú "Types" seleccionar "image" o directamente presionar el botón de insertar gráficos (botón para insertar gráficos en Amaya.)o la combinación ctrl+t, aparece entonces un cuadro de diálogo en el que hay que seleccionar la localización del gráfico en cuestión y que ofrece un campo para poner el texto alternativo, titulado "Alternate text".

 

Buenas prácticas

La imágenes pueden cumplir una gran variedad de funciones en una página y por ello el texto alternativo debe adecuarse a la función que cumple la imagen, veamos en cada caso cual debe ser el contenido del texto alternativo:

Cuando se trata de imágenes ilustrativas, que ofrecen datos importantes para la comprensión del contenido de la página, como por ejemplo en el caso de presentar gráficas (de barras, "pie" o cualquier otro tipo) o en el de presentar imágenes de productos, etc., el texto alternativo debe ser lo más explícito posible y siempre debe ofrecerse una descripción más extensa en una página aparte. Dicha descripción se marca con el atributo LONGDESC y con un enlace en formato texto constituido por una D mayúscula junto al gráfico en cuestión, que lleva al usuario a la página en la que se encuentra la citada descripción; la razón para esta aparente redundancia es que no todos los navegadores soportan el atributo "longdesc". Dicho atributo debe colocarse "a mano" en la vista del código fuente html, porque las actuales herramientas de autor no ofrecen automáticamente esta posibilidad al insertar una imagen.

Ejemplo:

Pendientes de brillante, modelo 1830SB-100Y | D |

El código de este ejemplo es:

<img src="1830SB-100Y.jpg" width="142" height="120" border="0" alt="Pendientes de brillante, modelo 1830SB-100Y" longdesc="descrip.htm#1830SB-100Y"> | <a href="descrip.htm#1830SB-100Y" title="Descripción de este modelo.">D </a>|

Fin del ejemplo

Las imágenes decorativas deben tratarse de forma similar a las ilustrativas, ofreciendo al usuario la información necesaria para que sepa de su existencia si utiliza lectores de pantalla o navegadores sin cargar los gráficos y, ofreciendo en el texto alternativo una corta explicación sobre la función que cumplen además, por supuesto, del enlace "D" que lleve a la descripción del gráfico.

Ejemplo:

Margarita amarilla.D

El código de este ejemplo es:

<img src="flor.gif" width="101" height="100" border="0" alt="Margarita amarilla." longdesc="descrip.htm#flor"><a href="descrip.htm#flor" title="Descripción de la imagen.">D</a>

Fin del ejemplo

Enlaces y botones. Cuando los gráficos cumplen la función de enlace, el texto alternativo debe ser una frase similar a la que usaríamos si se tratase de un enlace en formato sólo texto. Por ejemplo, un botón gráfico cuya función es enviar la información de un formulario deberá llevar como texto alternativo: "Enviar un mensaje". No debe obviarse el texto amplio y descriptivo en página aparte.

Ejemplo:

Envía un mensaje a Fulano de Tal. [D]

El código de este ejemplo es:

<a href="mailto:fulano.tal@suservidor.com" title="Envía un mensaje a Fulano de Tal."><img src="docus/greymail.gif" width="88" height="31" border="0" alt="Envía un mensaje a Fulano de Tal." longdesc="descrip.htm#mail" title="Envía un mensaje a Fulano de Tal."></a> [<a href="descrip.htm#mail" title="Describe la imagen que aparece en el botón.">D</a>]

Fin del ejemplo

Títulos gráficos. El texto alternativo de un título gráfico o texto "bitmap", debe estar conformado por un texto igual al contenido en el propio título gráfico. En este caso también debe ofrecerse una descripción más amplia del gráfico en una página aparte y, por tanto, el enlace "D" correspondiente.

Ejemplo:

Colour!D

El código de este ejemplo es:

<img src="b_colored-logo.gif" width="398" height="82" border="0" alt="Colour!" longdesc="descrip.htm#texto"><a href="descrip.htm#texto" title="Descripción de la imagen.">D</a>

Fin del ejemplo

Separadores de sección. Suelen utilizarse gráficos consistentes en barras en tres dimensiones, con más o menos elementos gráficos, para separar las distintas secciones de una página. En este caso, de nuevo, debe primar sobre la información descriptiva la informativa sobre la función que cumple el gráfico y que es la que percibe el lectoautor que puede visualizarla, es decir, la de separar o indicar el fin de una sección y comienzo de otra.

Ejemplo:

Fin de la introducción, sigue índice de contenido.

El código de este ejemplo es:

<img src="barsidar.jpg" width="340" height="4" border="0" alt="Fin de la introducción, sigue índice de contenido." longdesc="descrip.htm#barra">

Fin del ejemplo

Viñetas y/o caracteres pi. Las viñetas y/o caracteres pi, llamados comúnmente "bolos", también constituyen un caso especial en lo que a su texto alternativo se refiere, además, la utilización del texto alternativo tampoco sigue las mismas pautas que rigen para otro tipo de gráficos. Veamos los distintos casos:

Cuando se trata de una lista sin orden determinado y se desea utilizar una imagen para representar la viñeta deben utilizarse los estilos en cascada, en caso de no poder utilizarlos el texto alternativo puede ser, o bien, la palabra "ítem" o bien, un asterisco ["*"]; veasé más adelante, en la sección "Prácticas anticuadas" el ejemplo sin estilos en cascada.

Ejemplo:

El código de este ejemplo es:

<HEAD>
<TITLE>Utilizando estilos para cambiar las viñetas</TITLE>
<STYLE type="text/css">
UL { list-style: url(bolo.gif) square
</STYLE>
</HEAD>
<BODY>
<UL>
<LI>Naranjas
<LI>Limones
<LI>Limas
</UL>

Fin del ejemplo

Cuando se trata de un texto bitmap que cumple la función de viñeta, se aplica la pauta para dicho tipo de gráficos, es decir, el texto alternativo debe decir lo que se puede leer en el gráfico, por ejemplo: "nuevo" y para asegurarse de que el usuario comprende la información que se le quiere transmitir a través de esa viñeta diferente a las demás, conviene añadir una etiqueta de texto antes o después del ítem, de esta manera, cuando la única diferencia entre la viñeta que marca la novedad y las demás es el color, por ejemplo, viñetas amarillas para marcar las cosas nuevas y azules para las anteriores, el usuario que no puede decodificar los gráficos entenderá la razón de la diferencia.

Ejemplo:

El código de este ejemplo es:

<HEAD>
<TITLE>Bullet styles example</TITLE>
<STYLE type="text/css">
.newtxt { font-weight: bold;
color: red;
background-color: yellow
.newbullet { list-style : url(yellow.gif) disc
</STYLE>
</HEAD>
<BODY>
<UL>
<LI class="newbullet">Legislación
<SPAN class="newtext">Nuevo</SPAN></LI>
<LI> Asociaciones</LI>
</UL>
</BODY>

Fin del ejemplo

ASCII Art. Debe evitarse el uso de ilustraciones creadas con caracteres, en vez de esto deben usarse imágenes ya que a ellas puede dárseles un texto alternativo. Pero si no puede evitarse el uso de este tipo de ilustraciones, debe ofrecerse una forma de saltarlas y una descripción de las mismas.

Ejemplo del uso de ASCII Art (Tomado de http://www.w3.org/TR/WCAG10-HTML-TECHS/#after-ascii-chart):

saltarse la ilustración ASCII art 


  %   __ __ __ __ __ __ __ __ __ __ __ __ __ __   
100 |             *                             |
 90 |                *  *                       |
 80 |          *           *                    |
 70 |             @           *                 |
 60 |          @                 *              |
 50 |       *        @              *           |
 40 |                   @              *        |
 30 |    *  @              @  @           *     |
 20 |                                           |
 10 |    @                       @  @  @  @     |
      0  5 10 15 20 25 30 35 40 45 50 55 60 65 70
      Frecuencia de destello (Hercios)

La figura muestra el porcentaje de fotosensitividad en pacientes que tienen una respuesta fotocompulsiva, que fue provocada por una serie de flashes de dos segundos con los ojos abiertos y cerrados. | Descripción completa

El código de este ejemplo es:

Por favor, mire el código fuente.

Fin del ejemplo

Cuando se trata de el uso de unos pocos caracteres para formar un emoticón o algún signo, debe usarse el elemento <abbr> con el atributo "title" en el que se indicará el significado del emoticon o signo

Ejemplo:

De acuerdo, ;-)

El código de este ejemplo es:

<p>De acuerdo, <abbr title="sonrisa con guiño">;-)</abbr></p>

Fin del ejemplo

Prácticas anticuadas

Imágenes transparentes. Algunos autores utilizan imágenes transparentes para forzar la maquetación, para cumplir la función de crear un espacio fijo entre textos o que obligue a un gráfico a aparecer en una determinada posición. En su lugar deben utilizarse estilos en cascada para esta función, pero entonces en caso de no ser posible, no deben utilizarse espacios como valor del atributo "Alt" con el fin de prevenir que las imágenes se junten cuando no se descargan los gráficos.

Ejemplo, un verso de un poéma:

Vacío, vacío,     un gran vacío,
dejó en mi corazón tu ausencia.

El código de este ejemplo es:

Vacío, vacío,<img src="blank.gif" width="19" height="1" border="0" alt="&nbsp;&nbsp;&nbsp;">un gran vacío,
dejó en mi corazón tu ausencia.

Ejemplo de posicionamiento de una imagen:

espaciadorOsito de peluche saliendo de una caja de regalo.

El código de este ejemplo es:

<img src="blank.gif" width="80" height="109" border="0" alt="espaciador"><img src="teddy.gif" width="117" height="109" border="0" alt="Osito de peluche saliendo de una caja de regalo.">

Fin del ejemplo

Cuando se trata de una lista sin orden definido y se usan imágenes como viñetas, ya se ha dicho que deben utilizarse estilos en cascada, pero en caso de no poder hacerlo debe ponerse siempre el texto alternativo

Ejemplo a evitar, de uso de viñetas gráficas sin estilos en cascada:

*  Naranjas
*  Limones
*  Limas

El código de este ejemplo es:

<DL> <DD><IMG src="azul.gif" alt="* ">Naranjas
<DD><IMG src="azul.gif" alt="* ">Limones
<DD><IMG src="azul.gif" alt="* ">Limas
</DL>

Fin del ejemplo

Ejemplo a evitar de utilización de viñetas diferentes en una misma lista

Nuevo: Legislación
antiguo: Asociaciones

El código de este ejemplo es:

<DL>
<dd><img src="nuevo.gif" width="45" height="16" border="0"
alt="Nuevo:" longdesc="descrip.htm#barra"> Legislación</dd>
<dd><img src="bolo.gif" width="45" height="16" border="0"
alt="antiguo:"> Asociaciones</dd>
</dl>

Fin del ejemplo

Enlaces "d" invisibles: También es común el uso de una imagen transpararente y de un sólo pixel, que enlace con la página de descripción de imágenes. De esta manera, se reemplaza el enlace "D" que puede no interesar por razones estéticas y sin embargo el enlace es "visible" para aquellos que usan lectores de pantalla o que habilitan su navegador para no descargar las imágenes. Se puede acceder a este enlace con el tabulador, porque es casi imposible localizarlo y pinchar en él debido a su tamaño y a que no está a la vista. En vez de esto, deben seguirse las "buenas prácticas" que se citan en esta misma página.

Ejemplo a evitar, de uso enlaces "D" transparentes:

Margarita variedad 'Golden'.Enlaza con la descripción de la Margarita 'Golden'.

El código de este ejemplo es:

<img src="flor.gif" width="101" height="100" border="0" alt="Margarita variedad 'Golden'."><a href="descrip.htm#flor" title="Descripción de la variedad de Margarita 'Golden'."><img src="dlink.gif" width="1" height="1" border="0" alt="Enlaza con la descripción de la Margarita 'Golden'."></a>

Fin del ejemplo

Malas prácticas

Los programas de verificación de accesibilidad sólo pueden verificar si existe el texto alternativo en una imagen, pero no pueden saber si ese texto alternativo cumple su función, es decir, si está redactado de manera que el usuario tenga la información pertinente sobre la imagen en cuestión.

Algunos editores ponen de forma automática un texto alternativo cada vez que se inserta una imagen, que consiste en algunos casos en el nombre del fichero en cuestión y en otro en el texto "image". Naturalmente estos textos no dicen nada al usuario y corresponde al autor redactar un texto alternativo adecuado.

En muchos casos se utiliza el texto alternativo pero de manera incorrecta, veamos algunos ejemplos:

Ejemplo:

moto.jpg [8,18Kb]
Aquí el texto alternativo indica el nombre del fichero y su tamaño, lo cual puede ser útil en algunos casos, pero como la función que cumple el gráfico es servir de enlace, el texto alternativo correcto sería la indicación de a dónde lleva ese enlace.

imagen Aquí el texto alternativo sólo dice que se trata de una imagen, lo cual no nos informa sobre su propósito o función y no podríamos saber si se trata de una foto de una persona o cosa (vestuario, por ejemplo), de una imagen decorativa, etc. y en el caso de que fuera un enlace no podríamos saber a dónde nos conduce.

Fin del ejemplo

Cuando se trata de una lista numerada, debe marcarse con el elemento "OL" y pueden utilizarse los estilos en cascada, el uso de gráficos para marcar la numeración de una lista no es correcto, pero si se hace, el texto alternativo debe ser el número del ítem que está destacando.

Ejemplo:

Uno.Clasificado por temas
Dos.Clasificado por autores
Tres.Clasificado por títulos

El código de este ejemplo es:

<dl> <dd><img src="4th_1.gif" width="44" height="32" border="0" alt="Uno." longdesc="descrip.htm#barra" align="left">Clasificado por temas</dd> <dd><img src="4th_2.gif" width="44" height="32" border="0" alt="Dos.">Clasificado por autores</dd> <dd><img src="4th_3.gif" width="44" height="32" border="0" alt="Tres.">Clasificado por títulos</dd> </dl>

Fin del ejemplo

Para verificar el trabajo

Para asegurarse de que el contenido del texto alternativo cumple su función, imagínese que la página es leída a través del teléfono fijo y pregúntese qué debería decir, en vez del gráfico, para hacer comprensible la página a quien la está escuchando.

Para facilitar la verificación del texto alternativo, existen dos herramientas muy útiles a las que se puede acceder desde la página en la que hago una recopilación de herramientas, se trata de Lynxme que nos muestra como se representa la página en un navegador sólo texto y de Wave 2.0 diseñada especialmente para verificar la corrección de los textos alternativos. Naturalmente el TAW revisa la aplicación de esta pauta. También Bobby es útil, pero sólo le indicará cuándo falta el texto alternativo.

Como herramienta reparadora puedo recomendar A-prompt, que revisa la existencia del texto alternativo y de los elances "D" y en el caso de no encontrarlos facilita su creación.

Anterior Flecha que apunta hacia la izquierda. Índice Flecha que apunta a la derecha. Siguiente

Para hacer sus aportaciones, comentarios o sugerencias, envíe un mensaje a la autora: Emmanuelle Gutiérrez y Restrepo


Creada: 15 de diciembre de 2000