Información general

La mayoría de la gente sabe más o menos el alt texto. Por otra parte, no hay ningún elemento independiente en el código " alt text ". Para ser técnicamente correcta, es el atributo alt de la etiqueta img . Pero el asunto no se trata de su nombre, sino en su función. Mira lo que significa tener una buena alt texto.

La importancia de la alternativa texto

En la actualidad, uno de los mayores problemas de accesibilidad en la Web es la falta de un texto alternativo para gráficos e imágenes. Las personas ciegas suelen utilizar lectores de pantalla o pantallas Braille para que puedan leer el texto en las páginas Web. Cuando estas tecnologías de asistencia "leer" las imágenes sin alt texto, no son capaces de transmitir su significado.

Cuando un lector de pantalla ", se lee" una imagen sin atributos alt , hay varias cosas que pueden suceder:

1. Puede simplemente evitar la imagen como si ni siquiera estuvo presente en la página.
2. Se puede encontrar el texto que le corresponde de un modo u otro, como el nombre del archivo de imagen y la cama en lugar del texto alternativo.

El comportamiento exacto de lector de pantalla varía entre marcas de lectores de pantalla y el código de la página web. Pero de todos modos, el resultado no es deseable: o bien el usuario no es informado del contenido de la imagen, o bien se pone un texto probablemente no sea necesario.

Ejemplo: con alt texto

Escucha esta grabación de un Home Page Reader 3.0 para la misma imagen. Esta vez, tiene un alt texto. Por lo tanto, podemos oír la diferencia.

Seleccione un formato para la grabación: Wav | Mp3 | RealMedia | Transcripción (Inglés)

Esta es la imagen que acabamos de escuchar:

Adición de un texto alternativo permite a los usuarios de lectores de pantalla para tener la misma información que los que pueden ver en la imagen.

Cómo agregar alt texto

Veamos otro ejemplo de una imagen:

Código HTML de esta imagen es la siguiente:

Puede escribir el código exactamente como se ve arriba en un editor de texto o puede utilizar el software como Dreamweaver, FrontPage o GoLive para lograr la misma cosa. En Dreamweaver, el alt el texto se añade en la ventana Propiedades, como se muestra en la imagen siguiente:

sous Alternative representations . En Microsoft FrontPage, haga clic dos veces sobre la imagen para abrir el cuadro de diálogo Propiedades de imagen que le escriba el texto alternativo en el campo de texto con representaciones alternativas.

Otros editores tienen características similares para añadir UEN texto alternativo. Consulte la documentación para obtener instrucciones sobre cómo agregar un atributo alt .

Ahora que tenemos una mejor idea del atributo alt , y lo fácil que es añadir un atributo alt de una imagen, hablando de lo que debería ser el atributo alt .

Cómo utilizar las imágenes

Imágenes en las páginas web se utilizan de 3 maneras:

1. para transmitir el contenido importante.
2. para atraer la atención y no conllevan un contenido de verdad.
3. para apuntar a otras áreas del sitio o de otros sitios.

La alt es el texto más adecuado para una imagen depende de cómo la imagen se utiliza. De hecho, la misma imagen puede ser utilizado por diferentes razones en circunstancias diferentes y cada uso de esta imagen tiene una alternativa texto diferente. Mantenga la regla en cuenta lo siguiente:

Con esto en mente, la información más importante para transmitir en un texto alternativo a un mapa de imagen es el destino del enlace.

Para transmitir la imagen

Las imágenes que contienen la información importante

Si una imagen o cuadro contiene información que es importante en el contexto de la página, entonces el atributo alt para mostrar dicha información en una forma que es consistente con el objetivo de la imagen. Recordemos que el propósito de la imagen no es necesariamente la misma que la apariencia de la imagen.

Ejemplo 1

Por ejemplo, el sitio de la Formación WebAIM usa el CD de imágenes para su navegación principal como se muestra en la imagen de abajo.

Estas imágenes parecen etiquetas de las carpetas de archivos. Algunas de estas fichas son de color marrón y otros son de color azul. Cuando se selecciona la pestaña, se convierte en blanco. Parte del texto está en mayúsculas, minúsculas es una parte. Todos estos detalles son importantes para la apariencia de la página web, pero para alguien que no puede ver, en su mayoría son irrelevantes. El aspecto importante de estos gráficos es que apuntan a otras áreas del sitio. Con esto en mente, yo le daría un texto alternativo que refleja el hecho de que el usuario puede hacer clic en la imagen para ir a otra área del sitio. En este caso, el destino del enlace es la pista 2 de entrenamiento, que es el área de los coordinadores. La alt es el texto más adecuado para esta situación es la siguiente:

"Track 2: Coordinadores".

En este caso, el alt de texto coincida exactamente con el texto de la imagen. En la mayoría de los casos en que hay texto en imágenes, esta es la mejor solución. No se preocupe que no describió la imagen. Proporcionar a la vista de usuario de la imagen, no su apariencia.

Ejemplo 2

Mira otra vez el retrato de Silvia:

Esta imagen en particular podría ser utilizado de diferentes maneras, con diferentes objetivos. Éstos son algunos de los escenarios posibles:

• Un maestro de escuela primaria en la creación de una página web para explicar la diferencia entre pinturas, dibujos y esculturas. Incluye diferentes ejemplos de cada tipo de arte. En el texto de la propia página, que describe las diferencias entre estos tres medios de comunicación. Se utiliza la imagen de Silvia como una de las cuatro tablas de ejemplo. Uno de los alt texto sería posible en este caso "Una pintura de una mujer joven." Esta es probablemente suficiente, ya que el profesor ha descrito suficientemente lo que es una pintura en el propio documento.
• Un miembro de la familia hizo una lista de las personas con retratos de sus familiares. Como todas las imágenes son retratos, un alt texto es "Silvia Álvarez".
• Un instructor de arte en una escuela secundaria crea una página web con diferentes tipos de pinturas. Él utiliza la pintura como un ejemplo de un retrato, y se explica en el texto de la página de lo que es un retrato. Un alt texto podría ser "Retrato".
• Un historiador del arte se crea un catálogo de retratos de artistas. Su propósito es mostrar los retratos de varios artistas. El alt texto incluiría información relevante para los historiadores del arte, como el título de la obra, el nombre del artista, medio, y la fecha. El alt el texto podría decir: "Silvia Álvarez, óleo sobre lienzo, Paul Bohman, 2002".

Y podríamos continuar con diferentes escenarios, pero creo que te entiendo. No hay un alt el texto de una sola imagen. Depende del contexto y la finalidad de la imagen. Es el autor de apreciar lo que tiene que escribir.

Precisión y concisión

Las alternativas de texto para las imágenes deben ser lo más precisa y concisa posible. Asegúrese de que su alt el texto transmite toda la información importante relacionada con el propósito de su imagen, pero no los usuarios de sobrecarga con alt texto demasiado largo. Los lectores de pantalla o dispositivos Braille lea siempre la alt texto, que puede provocar que las páginas de imágenes cargadas son lentos para leer. Si usted necesita una descripción más detallada de la imagen, se debe añadir un atributo longdesc en la imagen.

alt texto vacío

Las imágenes decorativas

La Web se ha convertido en un entorno gráfico en el que los desarrolladores suelen añadir imágenes a sus páginas simplemente para mejorar el atractivo visual del sitio. Por ejemplo, la imagen a continuación podría ser utilizado para crear una esquina redondeada en una página.

Las imágenes de esta categoría no transmiten la información al usuario, sino que simplemente utiliza con fines decorativos. Estas imágenes no tienen valor para alguien que no puede ver la página. El código HTML correcta para este tipo de imagen es lo que se denomina el atributo alt vacío o nulo, escribió lo siguiente: alt="" . Es pronunciado: alt equivale cita cita, sin espacio en el centro. El código fuente de la imagen en este ejemplo es:

<img src="corner.gif" width="84" height="90" alt="" />

Los lectores de pantalla ignorar las imágenes con el alt de texto vacío, que es exactamente lo que queremos en este caso. Usted puede preguntarse por qué es necesario especificar alt de texto en blanco. Tal vez, ¿no es mejor poner cualquier atributo alt ? Es una buena pregunta pero la respuesta es que el alt texto es peor que perder el alt de texto está vacío, ya que algunos lectores de pantalla a continuación, lea el nombre del archivo de la imagen, que puede ser confuso para escuchar. Cuando se agrega un alt lectores de texto en blanco la pantalla salte la imagen sin leer nada.

Dreamweaver MX permite al autor para crear alt texto con las propiedades de la caja vacía.

Por desgracia, muchos otros editores de HTML no permite crear atributos alt vacíos a través de la interfaz gráfica de usuario. A continuación, debe cambiar el código fuente HTML directamente. Para ello, busque la imagen en el código y añadir alt="" a la etiqueta img .

Imágenes transparentes y posicionamiento

Los desarrolladores a menudo utilizan las imágenes transparentes y posicionamiento para crear un espacio entre los elementos de una página. Aunque los usuarios videntes no ven las imágenes transparentes, que pueden ser visibles para las personas que utilizan navegadores de texto o lectores de pantalla. Debe agregar un atributo alt="" para vaciar todas las imágenes transparentes y de posicionamiento.

Las imágenes redundantes

A veces, los desarrolladores web añadir un alt texto a una imagen que es exactamente el mismo que el texto junto a la imagen como en el ejemplo a continuación:

En casos como este, debe agregar una alt de texto en blanco para que los usuarios de lectores de pantalla no tiene que escuchar la misma información dos veces. El lector de pantalla JAWS diría que "los estudiantes gráficos, estudiantes internacionales, gráficos, internacionales", mientras que la lectura de esta sección, lo cual puede causar confusión o al menos ser embarazoso.

Imágenes de mapas

Del lado del cliente mapas de imagen

Todas las herramientas de desarrollo web para crear mapas de imágenes del lado del cliente en el cliente en vez de lado del servidor. Como su nombre indica, los mapas de imagen del lado del servidor requieren secuencias de comandos en el servidor, mientras que el lado del cliente son tratados sólo en el navegador del cliente. A menos que haya elegido deliberadamente para crear un mapa de imagen del lado del servidor, usted probablemente nunca necesidad de crear una. Los mapas de imagen del lado del cliente son accesibles, entonces no pueden lado del servidor.

Los mapas de imagen del lado del cliente requieren una alt texto de la imagen y sus áreas. Que el ejemplo siguiente (Nota: no hay enlaces de este mapa de imagen está apuntando en algún lugar):

Sólo hay una foto de arriba, pero hay cinco áreas. Cada una de estas áreas lleva a una ubicación diferente en la página web, es necesario para transmitir la información de navegación para cada uno de estos enlaces. El alt texto de estas áreas debe ser exactamente el mismo que el texto de la imagen. , Services , Contact us et Index . El alt de texto para las zonas es el hogar, Productos, Servicios, Contacto y el índice. Ahora tenemos los alt áreas de texto, pero ¿qué pasa con la propia imagen? Fuera de las áreas, esta imagen no transmitir la información. La alt es el texto más apropiado para la imagen alt de texto en blanco. Aquí está el código de la imagen y sus áreas:

<img src= »imagemap.jpg "alt= »" width= »199" height= »303" border= »0" usemap= »#Map »> <map name= »Map »>
<AREA shape= »rect "coords= »7,9,191,54" href= »#maps" alt= »HOME ">
alt = ""> Productos
<AREA shape= »rect "coords= »7,127,190,172" href= »#maps" alt= »Services ">
<AREA shape= »rect "coords= »6,186,190,229" href= »#maps" alt= »Contact nos ">
<AREA shape= »rect "coords= »7,245,189,289" href= »#maps" alt= »Index ">
</ Map>

Las imágenes utilizadas como mapas de imagen no va a tener un todo alt de texto en blanco. El autor debe decidir la mejor alt texto.

Importante

Una cosa a tener en cuenta al crear en el cliente imagen del mapa es que los lectores de pantalla leen el orden literal de HTML. Las herramientas como Dreamweaver no suelen marcar la area junto a la etiqueta img . Etiquetas area que contiene el alt de texto para las zonas, a veces aparecen en distintas posiciones en el código de abajo en donde la zona se muestra en el navegador. En este caso, los lectores de pantalla leerán el alt texto completamente fuera de contexto. Esto puede ser muy confuso para los usuarios de lectores de pantalla. Si utiliza Dreamweaver u otras herramientas WYSIWYG, no te olvides de revisar el código HTML. Si es necesario, cortar y pegar las etiquetas de area justo después de la etiqueta img .

Del lado del servidor de mapas de imagen

Como no hay manera de hacer que las imágenes accesibles lado de servidor de mapas, la más simple es no usarlos. Sin embargo, algunas personas se preocupan de que los mapas de imagen del lado del cliente no puede crear formas geométricas, y luego usan del lado del servidor de mapas de imagen. La verdad es que del lado del cliente imágenes de mapa puede tomar cualquier forma, siempre y cuando el desarrollador tiene la paciencia para crear todas las áreas de contacto. Un ejemplo de mapa de imagen del lado del cliente, con inusuales áreas geométricas, sólo para mostrar que es factible (Nota: Ninguno de los enlaces llevan a ninguna parte).

De hecho, no hay ninguna razón para crear un servidor del lado del mapa de imagen.

Las imágenes de fondo

Si su imagen de fondo de texto transmiten información importante o una indicación visual, es necesario cambiar el código HTML para que la imagen está en el código con un alt texto propiamente dicho.