¿Qué alt poner a una imagen puramente estética?

[Sanva]

Hola a todos.

Mi duda es sobre el atributo alt de las imágenes. ¿Qué alt debo poner a una imagen que no cumple ninguna función más que la púramente estética?

Ejemplo: Tengo varias listas de elementos y al inicio de cada una de ellas hay un título que la identifica, a la izquierda de ese título hay una imagen (un icono) que identifica visualmente la lista (una lista de vinos, por ejemplo, llevaría una botella de vino, y una de platos, un plato), ¿qué alt deberían llevar esas imágenes? Pensé en una pequeña descripción, pero lo siguiente me parece estúpido:

Botella de vino Vinos

Lo cual creo que sería como lo leería un usuario que use un lector de pantalla o un navegador en modo texto

¿Alguna sugerencia al respecto? ¿Acaso al ser las imágenes una parte estética y no de estructura o contenido deberían ir insertadas de otra forma?

[frijolerou]

Las imágenes meramente decorativas debieran ser insertadas como fondo de un elemento mediante CSS. Lasimágenes que formen parte del contenido debieran ser insertadas mediante el elemento <img> y el atributo ALT correspondiente.

Ahora la pregunta es si esos íconos los consideras "decoración" o "contenido".

[Sanva]

Como digo claramente en mi post, los considero decoración.

Valoraré entonces lo de insertarlos como fondo de un elemento mediante CSS

Gracias

[K3NNY]

De última, no le pongas nada. Osea...

<img alt="" />

[talmente]

si no pones nada no Valida

[JavierB]

Iniciado por talmente

si no pones nada no Valida

¿Seguro?

[demiurgo_daemon]

Iniciado por JavierB

¿Seguro?

Formalmente sí debe validar, pero ante los analizadores de accesibilidad quedas en vergüenza. De hecho, he visto que algunos detectan los intentos de engaño del Dreamweaver por poner alt sin sentido (o vacíos) para salir del paso; ejemplo:

Código HTML:

<img src='img1.jpg' alt='img1.jpg' /> 

[Daniel Ulczyk]

Los analizadores de accesibilidad son una guía, no una referencia. Las pautas de accesibilidad deben analizarse en forma manual.

Pero cualquiera que tenga un conocimiento más o menos fundado de lo que significa la accesibilidad sabe que dichas aplicaciones son ayudas para el webmaster pero no un indicador del nivel de accesibilidad.

Fuente: Por qué son insuficientes los estándares y la revisión automática

Iniciado por frijolerou

Las imágenes meramente decorativas debieran ser insertadas como fondo de un elemento mediante CSS.

[Sanva]

Las imágenes meramente decorativas debieran ser insertadas como fondo de un elemento mediante CSS.

Estoy de acuerdo, y es lo que haré.

Gracias por vuestras opiniones

[Jose_marin]

que tal si pones como ALT la dirección del sitio donde esta la imagen?

[Daniel Ulczyk]

Iniciado por Jose_marin

que tal si pones como ALT la dirección del sitio donde esta la imagen?

Está en claro que la imagen es decorativa; por lo tanto debe insertarse como fondo de elemento mediante CSS. Si así no lo fuera; off-topic, pero atento a mostrar contenido accesible, la etiqueta alt debe debe trasmitir el contenido de la imagen y de ninguna manera pude contener una cadena de texto como la URL.

[davidsink]

Yo lo pondría como fondo del enlace mediante css, con un poco de padding quedaría exactamente igual y es mucho más puro.
De todas formas una opción es decir lo que es: "Icono de vino" o algo parecido. También algo del tipo: "categoría vinos", "producto perteneciente a la categoría de vinos"...

[metacortex]

puedes colocarle alt="imagen decorativa". La sugerencia de ponerla como fondo quizás sea más viable.

[Sanva]

Creo que lo del fondo mediante CSS es la única opción viable... la que tú propones es desagradable: Imagínate que eres ciego y que estás visitando mi web, y cada dos por tres escuchas las palabras imagen decorativa, recordándote que eres ciego y, más aún, tocándote los huevos.

[metacortex]

Jajajajaja me hiciste escupir el café. Tienes razón Sanva. Mejor como background. Aunque también mencioné que así era mejor.

[hey_alan]

Supuestamente se debe poner un ALT con una cadena de texto vacía.

Recuerdo que hace poco tiempo (mientrás validaba uno de mis sitios) en la página de la WC3 y leyendo los "Tips del día" decía que para imagenes únicamente decorativas se debe poner alt con la cadena vacía. ¿Qué curioso no?

Creo que lo del fondo mediante CSS es la única opción viable... la que tú propones es desagradable: Imagínate que eres ciego y que estás visitando mi web, y cada dos por tres escuchas las palabras imagen decorativa, recordándote que eres ciego y, más aún, tocándote los huevos.

¿Llegará a pasar!? :P

[JIg_Ramos]

alt="cabecera", .... o "bordeIzquierdo" o "LineaSeparacion" o algo así

[mispedidosonline]

Este tipo de imagenes las debes poner por CSS y no en el html ya que son imagenes tipo bullets.
Al ponerlas de background en el css no va a ser necesarios ponerle ningun alt y como vos decis que son meramente decorativos si el usuario usa un navegador en modo texto plano no hay problema si no las ven porque no tienen ningun significado especial mas que decorar.

Saludos

[pablisho]

También puedes sacarle provecho a los alts en imágenes que son de importancia para el posicionamiento en buscadores y agregar allí palabaras relacionadas con tu web para las cuales quieras aparecer en los resultados de búsquedas.

[webosiris]

Iniciado por pablisho

También puedes sacarle provecho a los alts en imágenes que son de importancia para el posicionamiento en buscadores y agregar allí palabaras relacionadas con tu web para las cuales quieras aparecer en los resultados de búsquedas.

y hacer un sitio pensado para los buscadores pero no para los usuarios. Fabuloso

La primera directriz de calidad, por la misma gente de Google:

Directrices de calidad: principios básicos
Cree páginas para usuarios y no para motores de búsqueda.

[pablisho]

Fue un consejo, tomalo o dejalo.
De esa manera le ayudas a Google a ordenar el contenido, nada más que eso.. no le estás robando a nadie ni mucho menos te van a penalizar por insertar un alt a una imagen.

[ssthormess]

No creo que debas poner [imágen decorativa] por todos lados, pero quizás podrias poner un guión largo o un asterisco, en caso de que desees que, haya algo en tus alts.

Eso si, no le prestes atención a la w3c me explico, al script que revisa tu página ya que una página con errores también funciona ;). Nada es perfecto, y buscar la perfeccion es un error, a mi juicio.

[furoya]

Es cierto, la recomendación del W3C es dejar el alt en blanco

Atributo ALT

pero debe tener que ver más con algunas particularidades de navegadores que reemplazan la imagen por un texto común cuando no la encuentran; lo que es trágico para los 'bordes', 'esquinas' y/o 'bullets.
Pensándolo bien, en estos últimos sí se podría poner una marca (p.e. "·" ó "→") que señale que hay una especie de lista, como dijo ssthormess.

El tema es si la imagen es realmente decorativa o si está indicando "algo". En tu caso, Sanva, no lo es. Es un ícono que acompaña al texto, y sirve para identificar el contenido del párrafo. Imagínate que alguien busque información en tu página pero no entienda una pizca de español : esa imagen le salva la vida, porque va a entender que la lista que viene a continuación es de vinos.

Por otro lado, nos acostumbramos a usar el truco de meter imágenes que no son de fondo como si lo fueran, cuando en realidad son logos, o simulan viñetas o marcadores. Pero es un truco. Lo usamos por comodidad, ya que con una class nos ahorramos el escribir varias veces la etiqueta img.

Lo cierto es que el lenguaje no prevé todo lo que se les ocurre a los diseñadores, y cuando alguno de estos inventos aparece repetido infinidad de veces, nos creemos que es normal, que debe ser así. Y no. Si es una imagen, debe ser imagen; si es fondo, debe ser fondo.

Por supuesto que de última vamos a hacer los que nos cuadre mejor. Si los medios 'oficiales' no nos permiten crear una tabla que tenga esquinas con volutas, la vamos a simular con imágenes, y no le vamos a poner alt.

Para el caso en cuestión, yo también me inclino por usar un fondo no-repeat.

Al menos hasta que aparezca alguna propiedad o atributo para marcar las imágenes decorativas a ignorar fuera de la media screen o media print.

Ah!; y los navegadores de voz no necesariamente leen los alt; los pueden reemplazar por un beep para leer después "manualmente". Al menos la tecnología existe.

Y a ningún ciego le molesta que le recuerden su condición, a menos que no esté adaptado. En cuyo caso ... que se adapte y no joda!.

Un último concepto. La idea de poner las imágenes que dan formato al documento desde el CSS (como proponen frijolerou, Daniel Ulczyk, davidsink, metacortex, mispedidosonline y hasta webosiris en otro tema) es totalmente lógica; y es lo que se debería hacer. Salvo por el detalle de que aún no está implementada. Los lenguajes que usamos son muy viejos y no contemplan los imaginativos esfuerzos de los diseñadores por mejorar sus páginas. La imagen es imagen, y -como una gran concesión- se puede usar como fondo o como botón.

Sin embargo, Firefox ya permite hacerlo con un método que seguramente no será el ... ¿definitivo?; pero nos da una idea de lo que podría ser.

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html><head><title>PONER IMAGEN CON CSS.</title>
<style>

body {background: black; color: white; font-weight: bold; }

strong {font-weight:500; }

h1[class="foro"]:before {content: url(http://www.forosdelweb.com/fdwtheme/images/statusicon/forum_new.gif) "\a0"; }

</style>
</head><body>

<h1 class="foro">Foros del Web.</h1>
<h1 class="otro">Otro.</h1>

La imagen est&aacute; insertada con CSS. Sólo para <strong>Firefox</strong>.

</body></html>

saludos

furoya


Edición :
Ya funciona en Internet Explorer 8.x. Supongo que también en otros.

[metacortex]

Iniciado por webosiris

y hacer un sitio pensado para los buscadores pero no para los usuarios. Fabuloso

La primera directriz de calidad, por la misma gente de Google:

Directrices de calidad: principios básicos
Cree páginas para usuarios y no para motores de búsqueda.

Creo que al diseñar para el usuario, automáticamente se está diseñando para los buscadores.

[furoya]

Eso depende. Habría que ponernos de acuerdo sobre dónde está el punto en que empieza a contarse al usuario.

Me explico mejor : si tenemos un sitio como éste, que se actualiza cada día y al que sus visitantes llegan generalmente por recomendación o porque ya está en el historial, los favoritos o marcadores, o en el autocompletar; y sólo las primeras veces va a entrar por un buscador, si es que alguna vez lo hace ... entonces conviene hacer un documento ágil, navegable, compatible, accesible y hasta con buen gusto.

Pero si lo que nos importa de nuestro sitio es el hit para aumentar las visitas en el contador y justificar lo que pagan los anunciantes ... entonces hagamos páginas para los buscadores. Es más seguro y conveniente.

En el medio hay, por supuesto, centenares de posibilidades que deberíamos juzgar una por una.
Y cuando hablo de juzgar no me refiero a señalar cuál es la página 'correcta', cada uno tiene derecho a poner en su sitio lo que le venga en gana y a usar los trucos que quiera para "subir" su sitio en los buscadores.
Son éstos los que tienen que discriminar aciertos según nuestro criterio de búsqueda.

Y el algoritmo octogesidimensional de Google -al que todos quieren desafiar- es famoso por reconocer tramposos, por lo que en poco tiempo las páginas inútiles bajan en el ranking. Aunque no es infalible. Pensemos que suele aprender de los mismos usuarios, y a veces el criterio de los usuarios de la web es ... -cómo decirlo- ... sí,un asco.

Pero resulta que no es el único buscador (sí es el único que anuncia en este foro ), y los que usan diferentes criterios o los que son especializados en algún tópico no van a responder igual a nuestro diseño. ¿Cómo hacemos para engañar a todos?

Hay algunos métodos que pueden considerarse "lícitos".
En mis mensajes -p.e.- acostumbro redactar usando sinónimos, y escribo frases que quizá son solamente de relleno, pero me sirven para poner más palabras que un usuario pueda agregar a sus búsquedas. De esa forma me aseguro que con cualquiera de ellas termine cayendo, tarde o temprano, en ese tema. Y me lea.
Está de más decir que esas palabras tienen que ver con el asunto tratado. Porque de otra forma el visitante da dos vueltas a la ruedita del ratón, y se va.

Por último, estamos hablando de diseño; y resulta que los buscadores sólo miran contenido. Por eso la sugerencia de agregar texto al alt. Digo, porque todavía hay gente que sigue creyendo que ciertos buscadores ponen arriba las páginas que contemplan algún estándar o semántica.
No es cierto; y si lo hacen, está mal.

[edit]
Alguien que no se identificó me dice que hay en este mensaje información errónea. No le hago mucho caso porque todos sabemos que si supiese lo que dice debió hacerlo aquí y no en el karma; pero me sigue dejando una duda.

¿alguno sabe a qué se puede referir?
Gracias.
[/edit]

[Daniel Ulczyk]

Iniciado por metacortex

Creo que al diseñar para el usuario, automáticamente se está diseñando para los buscadores.

Si diseñás para el usuario o en la buena experiencia del mismo, estás en línea con la usabilidad web.
Si diseñás para el usuario y, en especial atención con aquel que no disponga del total de las capacidades (sean físicas, técnicas o cognitivas, por ejemplo) estás en línea con la accesibilidad web.
Y si estás diseñando con el foco puesto en los buscadores, estás en línea con las técnicas de SEO (Search Engine Optimization).

Nada está en exclusión: Usabilidad + Accesibilidad + SEO

Por último, estamos hablando de diseño; y resulta que los buscadores sólo miran contenido. Por eso la sugerencia de agregar texto al alt.

No lo comparto.
De hecho estamos discutiendo este tópico en el foro de Accesibilidad, no en el de Diseño.

[furoya]

No entiendo muy bien qué 'no compartes'.
Lo del diseño lo dije porque metacortex y después yo mismo, usamos la palabra en sentido "muy amplio", y no quiero que alguien la tome en sentido "estricto" y crea que se puede hacer un formato para mejorar la posición de un sitio en los aciertos de búsqueda.

En lo demás seguimos de acuerdo. Cada uno elige hacer su página como mejor le parezca (Usabilidad + Accesibilidad + SEO ...). Lo que quizá deberíamos hacer aquí es explicar un poco más qué es una línea de conducta respetable en la web; porque siempre puede haber alguien que interprete un "hago lo que mejor me parece" con un "hago lo que se me canten las ganas y no me importa nada". Si vamos a romper las reglas, primero debemos entenderlas.

Aunque webosiris no necesita que nadie lo defienda, me parece que podríamos volver a su mensaje y comprender el por qué de su tirón de orejas : una cosa es poner demasiados sinónimos de términos relacionados con el tema de la página, y otra muy distinta es aprovechar que un diseño tiene fondo blanco y agregar al final texto blanco que contenga palabras chanchas, nombres de juegos o de canciones y cantantes de temporada, actores, modelos y etcéteras; que sirvan solamente para que el buscador las indexe en categorías populares, cuando el sitio se refiere nada más que a las técnicas para la plantación del tomate.

Como ves, pablisho, no siempre estás ayudando a Google. A veces lo perjudicas, y por eso es que hacen la recomendación de crear páginas para usuarios y no para motores de búsqueda.

Ah! Y como nadie me objetó nada, me quedo más tranquilo con eso de la "información errónea". (Aquí postea cada uno ... )

[pablisho]

Iniciado por furoya

Como ves, pablisho, no siempre estás ayudando a Google. A veces lo perjudicas, y por eso es que hacen la recomendación de crear páginas para usuarios y no para motores de búsqueda.

A ver si lo explicas mejor porque no entiendo qué quieres decir.

[Daniel Ulczyk]

furoya:

No entiendo muy bien qué 'no compartes'.

La idea que no comparto es la siguiente:

Por eso la sugerencia de agregar texto al alt.

Estoy en línea con las directrices de Accesibilidad: las imágenes decorativas deben insertarse como fondo de un elemento mediante CSS
cita: Using CSS to include decorative images

Tu última edición fue casi, simultánea con mi anterior post; por lo que no la ví.
Independientemente que tu post (donde has recibido algo de karma: estúpido invento que permite anónimamente "opinar") contiene varios puntos de vista, con los cuales se puede reflexionar o discutir si se quiere; lo único que encuentro como erróneo es cuando usás el término: algoritmo octogesidimensional.
No sé... alguien se sintió incómodo por eso...
Saludos y buen fin de semana!

[furoya]

Ah. Pero lo del texto alternativo no fue mío, fue de pablisho . Y de última, como dice él : "tómalo o déjalo".

Y lo del algoritmo ... sí, ... fue tremendo. Mis disculpas a todos.