Foros del Web » Creando para Internet » Diseño Gráfico »

Pauta 1

Estas en el tema de Pauta 1 en el foro de Diseño Gráfico en Foros del Web. Hola a todos. Soy un mar de dudas, así que e decidido empezar por el principio. Pauta 1 - "Proporcione alternativas equivalentes para el contenido ...
  #1 (permalink)  
Antiguo 23/02/2006, 14:55
 
Fecha de Ingreso: octubre-2005
Mensajes: 536
Antigüedad: 19 años, 1 mes
Puntos: 1
Pauta 1

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...

Cita:
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?

Cita:
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?
  #2 (permalink)  
Antiguo 23/02/2006, 15:41
 
Fecha de Ingreso: diciembre-2003
Mensajes: 1.583
Antigüedad: 20 años, 10 meses
Puntos: 13
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.
__________________
El conocimiento es libre: Movimiento por la Devolución
  #3 (permalink)  
Antiguo 23/02/2006, 16:55
 
Fecha de Ingreso: octubre-2005
Mensajes: 536
Antigüedad: 19 años, 1 mes
Puntos: 1
Hola frijolerou, gracias por la respuesta.

¿Podrías poner un ejemplo práctico? ¿Qué alt le pondrías tú a mi ejemplo?
  #4 (permalink)  
Antiguo 23/02/2006, 17:10
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.936
Antigüedad: 21 años, 8 meses
Puntos: 65
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
  #5 (permalink)  
Antiguo 23/02/2006, 17:52
 
Fecha de Ingreso: diciembre-2003
Mensajes: 1.583
Antigüedad: 20 años, 10 meses
Puntos: 13
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.
__________________
El conocimiento es libre: Movimiento por la Devolución
  #6 (permalink)  
Antiguo 23/02/2006, 18:18
 
Fecha de Ingreso: octubre-2005
Mensajes: 536
Antigüedad: 19 años, 1 mes
Puntos: 1
Hola a todos.

Hola frijolerou.

Cita:
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.
  #7 (permalink)  
Antiguo 23/02/2006, 19:00
 
Fecha de Ingreso: diciembre-2003
Mensajes: 1.583
Antigüedad: 20 años, 10 meses
Puntos: 13
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".
__________________
El conocimiento es libre: Movimiento por la Devolución

Última edición por frijolerou; 23/02/2006 a las 19:06
  #8 (permalink)  
Antiguo 24/02/2006, 13:05
 
Fecha de Ingreso: julio-2004
Ubicación: San Sebastián de los Reye
Mensajes: 140
Antigüedad: 20 años, 4 meses
Puntos: 2
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
__________________
tecomweb.com - diseño y desarrollo Web
  #9 (permalink)  
Antiguo 24/02/2006, 14:39
 
Fecha de Ingreso: diciembre-2003
Mensajes: 1.583
Antigüedad: 20 años, 10 meses
Puntos: 13
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.

Cita:
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ó.
__________________
El conocimiento es libre: Movimiento por la Devolución
  #10 (permalink)  
Antiguo 24/02/2006, 18:02
 
Fecha de Ingreso: octubre-2005
Mensajes: 536
Antigüedad: 19 años, 1 mes
Puntos: 1
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...
Cita:
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
Cita:
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?

Última edición por Jorolo; 24/02/2006 a las 19:40
  #11 (permalink)  
Antiguo 24/02/2006, 19:36
 
Fecha de Ingreso: diciembre-2003
Mensajes: 1.583
Antigüedad: 20 años, 10 meses
Puntos: 13
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?
__________________
El conocimiento es libre: Movimiento por la Devolución
  #12 (permalink)  
Antiguo 27/04/2006, 20:54
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.936
Antigüedad: 21 años, 8 meses
Puntos: 65
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...

Cita:
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?

  #13 (permalink)  
Antiguo 09/05/2006, 20:54
 
Fecha de Ingreso: enero-2006
Ubicación: Maracay, Edo. Aragua
Mensajes: 206
Antigüedad: 18 años, 10 meses
Puntos: 0
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;".

Cita:
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.

Cita:
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.
  #14 (permalink)  
Antiguo 11/05/2006, 12:54
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.936
Antigüedad: 21 años, 8 meses
Puntos: 65
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

Cita:
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?

  #15 (permalink)  
Antiguo 15/05/2006, 10:36
 
Fecha de Ingreso: octubre-2005
Mensajes: 536
Antigüedad: 19 años, 1 mes
Puntos: 1
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é.
  #16 (permalink)  
Antiguo 14/06/2006, 22:27
 
Fecha de Ingreso: junio-2006
Mensajes: 20
Antigüedad: 18 años, 5 meses
Puntos: 0
Disculpenme...

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

Saludos...
  #17 (permalink)  
Antiguo 14/06/2006, 23:17
 
Fecha de Ingreso: diciembre-2003
Mensajes: 1.583
Antigüedad: 20 años, 10 meses
Puntos: 13
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.
__________________
El conocimiento es libre: Movimiento por la Devolución
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 23:06.