Pauta 1

[Jorolo]

Hola a todos.

Soy un mar de dudas, así que e decidido empezar por el principio.

Pauta 1 - "Proporcione alternativas equivalentes para el contenido visual y auditivo".

La cosa parece bastante clara pero...

Iniciado por WAI

Puntos de verificación:

1.1 Proporcione un texto equivalente para todo elemento no textual (Por ejemplo, a través de "alt", "longdesc" o en el contenido del elemento). Esto incluye: imágenes, representaciones gráficas del texto, mapas de imagen, animaciones (Por ejemplo, GIFs animados), "applets" y objetos programados, "ascii art", marcos, scripts, imágenes usadas como viñetas en las listas, espaciadores, botones gráficos, sonidos (ejecutados con o sin interacción del usuario), archivos exclusivamente auditivos, banda sonora del vídeo y vídeos. [Prioridad 1]

Por ejemplo, en HTML:
* Utilice "alt" para los elementos IMG, INPUT y APPLET o proporcione texto equivalente en el contenido de los elementos OBJECT Y APPLET.
...

¿Que pasa si todo o parte de el contenido del documento (no del elemento) es en sí un texto equivalente?

Ejemplo:

<img alt="¿?" width="80" height="100" src="/la/casa/del/ogro.png" />
<h3>La casa del ogro</h3>
<p>La casa del ogro era enorme, parecía un castillo, con una torre muy alta en la que... imaginaos el resto</p>

¿Que pasa si no hace falta alt ni longdesc?

Iniciado por WAI

Utilice "alt" para los elementos IMG, INPUT y APPLET ' o en el contenido de los elementos' OBJECT Y APPLET.

¿Y en el contenido del documento?

[frijolerou]

En el ejemplo que pusiste para la etiqueta <img> el atributo ALT es necesario, por ejemplo, para los lectores de pantalla, que leyendo el texto alternativo de la imagen pueden tener una mini descripción sobre qué trata la foto; lo mismo para el caso de los navegadores de sòlo texto, para que el usuario se pueda hacer una idea sobre qué trata la fotografía que el navegador no es capaz de mostrar; y más importante aún por si falla algo y un navegador gráfico no puede mostrar la imagen (por el tiempo de carga, por que el archivo está malo, etc.), así puede tener una idea de qué es lo que NO está viendo.

Imagina el ejemplo del ogro. Un usuario no vidente y un usuario con navegador textual conocen el contenido del encabezado y del párrafo, pero salvo el propio nombre del archivo PNG no hay nada más que le pueda entregar una descripción sobre la imagen que no puede visualizar.

[Jorolo]

Hola frijolerou, gracias por la respuesta.

¿Podrías poner un ejemplo práctico? ¿Qué alt le pondrías tú a mi ejemplo?

[kahlito]

Hola

Creo que se podria poner algo así en el caso de que sea una mini descripción:

Código HTML:

<img alt="La casa del ogro" title="La casa del ogro" width="80" height="100" src="/la/casa/del/ogro.png" />
<h3>La casa del ogro</h3>
<p>La casa del ogro era enorme, parecía un castillo, con una torre muy alta en la que... imaginaos el resto</p> 

Saludosss

[frijolerou]

El ejemplo de kahlito es el más adecuado (a no ser que quieras alguna descripción más específica). en este caso longdesc no es necesario ya que una descripción detallada la tienes en el párrafo dentro del documento.

[Jorolo]

Hola a todos.

Hola frijolerou.

Iniciado por frijolerou

lo mismo para el caso de los navegadores de sòlo texto, para que el usuario se pueda hacer una idea sobre qué trata la fotografía que el navegador no es capaz de mostrar; y más importante aún por si falla algo y un navegador gráfico no puede mostrar la imagen (por el tiempo de carga, por que el archivo está malo, etc.), así puede tener una idea de qué es lo que NO está viendo.

Este comentario me ha convencido, pero solo a medias. Solo en un entorno gráfico. ¿Qué pasa en un entorno no gráfico? me explicare al comentar el código de kahlito.


Hola kahlito.

Gracias por la aportación.

El alt que propones parece de lo más apropiado pero tengo una duda.
Imaginémonos un invidente que usa algún tipo de lector. No sé como funcionan estas "ayudas técnicas" pero tengo miedo que lo hagan de la siguiente manera:

Código HTML:

<img alt="La casa del ogro" title="La casa del ogro" width="80" 
height="100" src="/la/casa/del/ogro.png" />
<h3>La casa del ogro</h3>
<p>La casa del ogro era enorme, parecía un castillo, 
con una torre muy alta en la que... imaginaos el resto

Leido así:
La casa del ogro (alt) La casa del ogro (title) La casa del ogro (título) La casa del ogro era enorme, parecía un castillo, con una torre muy alta en la que... imaginaos el resto

Sonaría un poco redundante.

[frijolerou]

Eso ya va a depender de las características del lector de pantalla o sintetizador de voz que esté siendo utilizado, y de como el usuario lo tenga configurado. Por ejemplo hay algunos que en los links no leen el atributo TITLE y otros sí, no estoy seguro que pasará en el caso de las imágenes, aunque lo más seguro es que ALT tenga preferencia por sobre TITLE.

Puede que sí, que resulte algo redundante, pero cuando el software lea el atributo ALT le avisa al usuario que corresponde a la descripción de una imagen. Cuando lea el elemento H3 el usuario sabrá que se trata del título de un bloque de texto (según como haya configurado el software, modificando el volumen, la entonación, el género de la voz, etc.). Por tanto el usuario va a ser capaz de reconocer a que corresponde cada texto repetido.

Ahora, si te complica el tema de la redundancia, en el ALT podrías usar "Fotografía de la casa del ogro".

[hurricane]

Esto es muy importante respecto al ALT... TODO DEPENDE DEL CONTEXTO.

Parate a pensar.. ¿que es esa imagen? ¿es un logo? ¿es una imagen decorativa? ¿tiene alguna funcionalidad?

Me explico. Si por ejemplo la imagen es un logo que está puesto en la cabecera de una página puedes poner alt="logotipo de mi empresa". Si por ejemplo al hacer clic sobre ese logo vas a la página de inicio entonces el alt="Ir a la página de inicio".

Si la imágen es decoratíva y no aporta nada a la página entonces el alt tiene que ser alt="", si utilizas imágenes para dejar espacios en blanco (cosa que no recomiendo por cierto) entonces el alt deberiá de ser alt=" ".

Respecto al ejemplo que pones como te digo DEPENDE DEL CONTEXTO. Si es una imágen descriptiva podrías escribir alt="Imagen de la casa del ogro", si la imagen es muy descriptiva puedes añadir longdesc="En la imagen se ve una casa de color verde de con una puerta vieja de madera por donde asoma un ogro de color marrón que nos mira en tono amenazante".

Espero haberte resuelto tus dudas

[frijolerou]

Comparto plenamente con el amigo(a) hurricane, pero me gustaría hacer dos observaciones.

Si las imágenes son decorativas, debieras optar porque éstas sean imagenes de fondo del correspondiente contenedor (propiedad background de CSS). La etiqueta <IMG> debe usarse en lo posible sólo para imágenes informativas.

Iniciado por hurricane

longdesc="En la imagen se ve una casa de color verde de con una puerta vieja de madera por donde asoma un ogro de color marrón que nos mira en tono amenazante"

Ojo... que el valor del atributo longdesc debe ser una URL a un documento que contenga la descripción detallada del elemento al que se le aplicó.

[Jorolo]

Hola a todos.

Caramba, entre todos puede que acabemos montando un tema interesante, hasta puede que aprendamos algo.

Hola hurricane.

Gracias a tus aportaciones esto empieza a tener sentido.
¿Algun enlace a un documento de referencia o normativo donde se explique eso de los alt vacios?

El longdesc que nos ofreces me ha hecho pensar...

longdesc="En la imagen se ve una casa de color verde de con una puerta vieja de madera por donde asoma un ogro de color marrón que nos mira en tono amenazante".

Imaginemos un niño invidente, ¿Le importará de que color es la piel del ogro? ¿O el de las paredes de la casa? ¿Cambiaría algo la historia si cambiásemos los colores?
¿Como entiende un invidente la descripción:"una casa roja"?


Hola frijolerou.

Sin duda tienes razón, Longdesc a de contener un URI.

Me ha llamado la atención este comentario

Si las imágenes son decorativas, debieras optar porque éstas sean imagenes de fondo del correspondiente contenedor (propiedad background de CSS). La etiqueta <IMG> debe usarse en lo posible sólo para imágenes informativas.

¿Algun enlace a un documento de referencia o normativo donde se explique esto?

[frijolerou]

En la red existen muchos artículos que hablan sobre el marcado semántico y la separación entre contenido y presentación. No sé si existirá alguno en particular (o que no recuerdo, lo más probable) que especifique el tema de las imágenes, pero entendiendo la filosofía de lo que significa contenido/presentación deberías ser capaz de sacar tus propias conclusiones.

Te pongo un ejemplo básico: las típicas esquinas redondeadas ¿se utilizan para presentar contenido o como un mero elemento decorativo?; Un banner publicitario ¿es un elemento para presentar contenido o un elemento meramente decorativo?.


Sobre el tema del color del ogro y de la casa. Recuerda que la accesibilidad no significa pensar una solución para los invidentes, es una solución para un acceso universal (para el mayor número de usuarios dentro de lo que sea posible).

Tal vez para un niño invidente el color de la casa puede que no represente una mayor relevancia... ¿y para un usuario con navegador de texto?

[kahlito]

Hola a todos.

Retomo este tema por una pequeña duda sobre el mismo ejemplo que puse con anterioridad:

Código HTML:

<img alt="La casa del ogro" title="La casa del ogro" width="80" 
height="100" src="/la/casa/del/ogro.png" />
<h3>La casa del ogro</h3>
<p>La casa del ogro era enorme, parecía un castillo, 
con una torre muy alta en la que... imaginaos el resto

En este caso repito el contenido descriptivo de la imagen con alt y tittle, pero...

Iniciado por frijolerou

Eso ya va a depender de las características del lector de pantalla o sintetizador de voz que esté siendo utilizado, y de como el usuario lo tenga configurado. Por ejemplo hay algunos que en los links no leen el atributo TITLE y otros sí, no estoy seguro que pasará en el caso de las imágenes, aunque lo más seguro es que ALT tenga preferencia por sobre TITLE.

Puede que sí, que resulte algo redundante, pero cuando el software lea el atributo ALT le avisa al usuario que corresponde a la descripción de una imagen. Cuando lea el elemento H3 el usuario sabrá que se trata del título de un bloque de texto (según como haya configurado el software, modificando el volumen, la entonación, el género de la voz, etc.). Por tanto el usuario va a ser capaz de reconocer a que corresponde cada texto repetido.

Ahora, si te complica el tema de la redundancia, en el ALT podrías usar "Fotografía de la casa del ogro".

puede ser que Alt prevalezca sobre Tittle y de ahí que no se repita la misma palabra o descripción varias veces, pero claro no estoy seguro del todo y ahí es donde voy, saber si realmente es necesario poner los dos o solo uno.

La ventaja que veo de poner tambien title es que en el resto de navegadores que no sean Iexplorer se asegura ver la descripción alternativa al pasar el cursor sobre la imagen, pero claro aun no estoy seguro de que se repita al leerse desde un dispositivo y de ahí un posible inconveniente. Por otro lado al poner solo alt en otros navegadores que no sean Iexplorer esa descripción alternativa no aparece por lo tanto podria ser otro inconveniente.

En definitiva ¿cual es la mejor opción, poner solo alt o alt y title?

[thisisalexis]

Voy a hacer varias correcciones, si me equivoco en alguna, les pido disculpas y además, que me lo hagan saber.

Primero, para las imágenes se usa el atributo ALT, a pesar de que soportan el Tittle; de hecho, Title surgió por la necesidad de aplicar un atributo con el mismo comportamiento de ALT en otro tipo de etiquetas.

Segundo, para los que trabajan con Xhtml: cuando quieran colocar un ALT vacio, no coloquen ALT = " ", más bien es ALT ="&nsbp;".

Iniciado por Jorolo

Hola a todos.
Gracias por la aportación.

El alt que propones parece de lo más apropiado pero tengo una duda.
Imaginémonos un invidente que usa algún tipo de lector. No sé como funcionan estas "ayudas técnicas" pero tengo miedo que lo hagan de la siguiente manera:

Código HTML:

<img alt="La casa del ogro" title="La casa del ogro" width="80" 
height="100" src="/la/casa/del/ogro.png" />
<h3>La casa del ogro</h3>
<p>La casa del ogro era enorme, parecía un castillo, 
con una torre muy alta en la que... imaginaos el resto

Leido así:
La casa del ogro (alt) La casa del ogro (title) La casa del ogro (título) La casa del ogro era enorme, parecía un castillo, con una torre muy alta en la que... imaginaos el resto

Sonaría un poco redundante.

Fíjate, las pautas de accesibilidad de W3C no se limitan a lo técnico, también abarcan factores humanos, es por ello que no tienen un validador para accesibilidad.

Tu dices que si un lector lee lo que mencionaste, caería en redundanc¡a....pues si, pero de eso tienes que cuidarte tu; W3C en sus pautas habla mucho sobre la presentación de la información, y no me refiero a lo semántico, sno más bien a la utlidad de la misma, su relevancia dentro del contenido y el contexto, etre otras. También hablan sobre las imágenes, donde especifican que las mismas deben tener sentido dentro del texto y deben tener una razón de ser asociada al mismo.

Por ejemplo, no tiene sentido que yo tenga un texto que dice: La casa roja es bonita, y tenga una imagen de un pajaro volando...se capta mi idea?

Con lo del atrbuto ALT y el longdesc ocurre lo mismo, tu estás viendo que estás redundando con tu ALT y el título de tu texto, pues dale una descripcón más valiosa y diferenciada a tu imagen que realmente aporte algo al texto, porque sino no tiene razón de ser......ojo, eso lo lei en las pautas de accesibilidad de W3.

Creo que ya lo dijeron, pero voy a confirmarlo: el atributo Longdesc es una URL de un archivo donde se da una descripcón más detallada de la imagen.

Iniciado por Jorolo

Hola a todos.
¿Algun enlace a un documento de referencia o normativo donde se explique eso de los alt vacios?

Normativo no, al menos no de W3, pues ellos establecen claramente que toda magen tiene que tener un ALT con una descripción que añada valor; supongo que esto es por el simple hecho de que para ellos las imágenes no deben ser decorativas sino que deben proponer un valor agregado a la información que se está presentando.

[kahlito]

Hola de nuevo, sigo planteándome la misma duda entre "alt" y "title" en una misma imagen.

Si pongo este ejemplo :

Código HTML:

<img src="imagen_la_casa_del_ogro.jpg" alt="La casa del ogro en imagen" title="La casa del ogro en imagen" width="80" height="100" /> <h3>La casa del ogro</h3> <p>La casa del ogro era enorme, parecía un castillo, con una torre muy alta en la que... imaginaos el resto</p> 

Al aparecer o leerse en un emulador de voz com por ejemplo Fangs-(Emulador de lector de pantalla) apareceria o se leeria lo siguiente:

GraphicLa casa del ogro en imagenHeading level three La casa del ogro La casa del ogro era enorme, parecía un castillo, con una torre muy alta en la que... imaginaos el resto

por lo tanto no se repite "La casa del Ogro en imagen" al poner alt y title.

No se si será lo más correcto pero sigo pensando que así se aprovecha una descripción visual al pasar el ratón por la imagen en todos los navegadores e incluso creo que fomenta este punto que cita thisisalexis

Iniciado por thisisalexis

Normativo no, al menos no de W3, pues ellos establecen claramente que toda magen tiene que tener un ALT con una descripción que añada valor; supongo que esto es por el simple hecho de que para ellos las imágenes no deben ser decorativas sino que deben proponer un valor agregado a la información que se está presentando.

o sea que le da ese valor agregado a la información que se presenta pero ya en todos los navegadores

¿Es correcto o va en contra de la accesibilidad?

[Jorolo]

Hola a todos.

Tenéis que disculparme.

Hace tiempo di por 'muerto' este dialogo, no me dí cuenta que habéis seguido hablando del tema.

Se han dicho cosas muy interesantes, quiero volver a leerlas.
Ya os comentaré.

[Spider22]

Disculpenme...

Pero no termino de entender la diferencia entre title y alt.... y cual es la correcta...

Saludos...

[frijolerou]

ALT se usa para entregar al usuario un texto alternativo a la imagen en caso que use algún lector de pantalla (algunos), o un browser de sólo texto, o tenga desactivada la carga de imagenes, o simplemente porque el server falló al intentar cargar la foto.

TITLE vendría siendo algo así como un texto de apoyo, para complementar a la imagen (una breve descripción, alguna anotación sobre la foto, etc.