Etiqueta HTML img: ¿atributo de título frente a atributo alt?

Estaba navegando por Amazon y me di cuenta de que al buscar " 1TB ", si coloca el cursor del mouse sobre la imagen de calificación de estrellas, solo verá la puntuación si usa IE. Si está utilizando otro navegador, la puntuación no se mostrará.

Una calificación de 3.8 y una calificación de 4.2 aparecen como 4 estrellas. Por supuesto, ¡3.8 estrellas frente a 4.2 estrellas (76% frente a 84% de puntuación) podrían marcar la diferencia!

Esto se debe a que la forma estándar de mostrar alttexto es solo cuando el usuario apaga los gráficos o cuando el navegador está "leído" (por ejemplo, navegador para usuarios con deficiencias visuales). IE, sin embargo, lo muestra al pasar el mouse.

Entonces, creo que si Amazon lo mostrará independientemente del navegador del usuario, entonces titledebería usarse además de alt. ¿Estarías de acuerdo?

Yo iría por ambos. El título mostrará una bonita información sobre herramientas en todos los navegadores y alt dará una descripción cuando se navega en un navegador sin imágenes.

Dicho esto, me encantaría ver algunas estadísticas de cuántos "navegantes" que van a una "tienda" para buscar productos en realidad tienen imágenes desactivadas o están usando un navegador que no admite imágenes. Creo que los días en los que el 90% de la población usa un módem de 28k para conectarse a InterWeb han pasado muuucho tiempo.

Se usan para diferentes cosas. Se altutiliza el atributo en lugar de la imagen. Si la imagen no se puede mostrar y en lectores de pantalla.

El titleatributo se muestra junto con la imagen, normalmente como una información sobre herramientas flotante.

Uno no debe usarse "en lugar" del otro. Cada uno debe usarse correctamente , para hacer las cosas para las que fueron diseñados.

alt y title son para cosas diferentes, como ya se mencionó. Si bien el atributo title proporcionará información sobre herramientas, alt también es un atributo importante, ya que especifica el texto que se mostrará si la imagen no se puede mostrar. (Y en algunos navegadores, como Firefox, también verá este texto mientras se carga la imagen)

Otro punto que creo que debería hacerse es que se requiere el atributo alt para validar como un documento XHTML, mientras que el atributo de título es solo una "opción adicional", por así decirlo.

Eso es porque sirven para diferentes propósitos y ambos deben usarse no solo uno sobre el otro.

El "alt" es por lo que ustedes ya dijeron, para que puedan ver de qué se trata la imagen si la imagen no se puede mostrar (por cualquier motivo), también permite que las personas con discapacidad visual entiendan de qué se trata la imagen.

El atributo "título" es el correcto para mostrar la información sobre herramientas con un título para la imagen.

En mi opinión, el texto alternativo siempre debe describir lo que está visible en la imagen, para el caso de que la imagen no se muestre.

alt = texto [CS] Para agentes de usuario que no pueden mostrar imágenes, formularios o subprogramas, este atributo especifica texto alternativo. El idioma del texto alternativo se especifica mediante el atributo lang.

w3.org

Creo que se requiere alt para el estricto cumplimiento de XHTML.

Como han dicho otros, el título es para información sobre herramientas (es bueno tenerlo), alt es para accesibilidad. No hay nada de malo en usar ambos, pero alt siempre debería estar ahí.

El atributo ALT es para el usuario con discapacidad visual que usaría un lector de pantalla. Si falta ALT en CUALQUIER etiqueta de imagen, se leerá la URL completa de la imagen. Si las imágenes forman parte del diseño del sitio, deberían tener la ALT, pero pueden dejarse vacías para que la URL no tenga que leerse en todas las partes del sitio.

Atributo ALT

El altatributo se define en un conjunto de etiquetas (es decir, img, areay, opcionalmente, para inputy applet) para permitir que proporcione un texto equivalente para el objeto.

Un equivalente de texto brinda los siguientes beneficios a su sitio web y a sus visitantes en las siguientes situaciones comunes:

• hoy en día, los navegadores web están disponibles en una amplia variedad de plataformas con capacidades muy diferentes; algunos no pueden mostrar imágenes en absoluto o solo un conjunto restringido de tipos de imágenes; algunos pueden configurarse para no cargar imágenes. Si su código tiene el atributo alt establecido en sus imágenes, la mayoría de estos navegadores mostrarán la descripción que proporcionó en lugar de las imágenes.
• algunos de sus visitantes no pueden ver imágenes, ya sean ciegos, daltónicos o con poca visión; El atributo alt es de gran ayuda para aquellas personas que pueden confiar en él para tener una buena idea de lo que hay en tu página.
• Los bots de los motores de búsqueda pertenecen a las dos categorías anteriores: si desea que su sitio web sea indexado tan bien como se merece, use el atributo alt para asegurarse de que no se pierdan secciones importantes de sus páginas.

Título Atributo

El objetivo de esta técnica es proporcionar ayuda sensible al contexto para los usuarios a medida que ingresan datos en formularios proporcionando la información de ayuda en un titleatributo. La ayuda puede incluir información de formato o ejemplos de entrada.

Ejemplo 1: Un menú desplegable que limita el alcance de una búsqueda
Un formulario de búsqueda utiliza un menú desplegable para limitar el alcance de la búsqueda. El menú desplegable está inmediatamente adyacente al campo de texto utilizado para ingresar el término de búsqueda. La relación entre el campo de búsqueda y el menú desplegable es clara para los usuarios que pueden ver el diseño visual, que no tiene espacio para una etiqueta visible. El titleatributo se utiliza para identificar el selectmenú. Los titlelectores de pantalla pueden pronunciar el atributo o mostrarlo como información sobre herramientas para las personas que utilizan lupas de pantalla.

<label for="searchTerm">Search for:</label>
<input id="searchTerm" type="text" size="30" value="" name="searchTerm">
<select title="Search in" id="scope">
    ...
</select> 

Ejemplo 2: campos de entrada para un número de teléfono
Una página web contiene controles para introducir un número de teléfono en los Estados Unidos, con tres campos para el código de área, el intercambio y los últimos cuatro dígitos.

<fieldset>
    <legend>Phone number</legend>
    <input id="areaCode" name="areaCode" title="Area Code" type="text" size="3" value="" >
    <input id="exchange" name="exchange" title="First three digits of phone number" type="text" size="3" value="" >
    <input id="lastDigits" name="lastDigits" title="Last four digits of phone number" type="text" size="4" value="" >
</fieldset> 

Ejemplo 3: una función de búsqueda Una página web contiene un campo de texto donde el usuario puede ingresar términos de búsqueda y un botón con la etiqueta "Buscar" para realizar la búsqueda. El titleatributo se usa para identificar el control de formulario y el botón se coloca justo después del campo de texto para que el usuario tenga claro que el campo de texto es donde se debe ingresar el término de búsqueda.

<input type="text" title="Type search term here"/> <input type="submit" value="Search"/>

Ejemplo 4: una tabla de datos de controles de formulario
Una tabla de datos de controles de formulario debe asociar cada control con los encabezados de columna y fila de esa celda. Sin un título (o ETIQUETA fuera de la pantalla), es difícil para los usuarios no visuales hacer una pausa e interrogar por los valores de encabezado de fila / columna correspondientes utilizando su tecnología de asistencia mientras se desplaza por el formulario.

Por ejemplo, un formulario de encuesta tiene cuatro encabezados de columna en la primera fila: Pregunta, De acuerdo, Indeciso, En desacuerdo. Cada fila siguiente contiene una pregunta y un botón de opción en cada celda correspondiente a la opción de respuesta en las tres columnas. El atributo de título para cada botón de opción es una concatenación de la opción de respuesta (encabezado de columna) y el texto de la pregunta (encabezado de fila) con un guión o dos puntos como separador.

Elemento Img

Atributos permitidos mencionados en MDN .

• alt
• crossorigin
• decoding
• height
• importance (api experimental)
• intrinsicsize (api experimental)
• ismap
• referrerpolicy (api experimental)
• src
• srcset
• width
• usemap

Como puede ver, el titleatributo no está permitido dentro del imgelemento. Usaría altatributo y, si es necesario, usaría CSS (Ejemplo: pseudoclase :hover) en lugar de titleatributo.

No, creo que altes mejor porque el propósito de ese atributo es proporcionar texto "alternativo" en caso de que la imagen no se pueda ver (ya sea que falta la imagen o que el navegador no puede mostrarla).

MVCFutures para ASP.NET MVC decidió hacer ambas cosas. De hecho, si proporciona 'alt', se creará automáticamente un 'título' con el mismo valor para usted.

No tengo el código fuente a mano, ¡pero una búsqueda rápida en Google resultó en un caso de prueba!

    [TestMethod]
    public void ImageWithAltValueInObjectDictionaryRendersImageWithAltAndTitleTag() {
        HtmlHelper html = TestHelper.GetHtmlHelper(new ViewDataDictionary());
        string imageResult = html.Image("/system/web/mvc.jpg", new { alt = "this is an alt value" });
        Assert.AreEqual("<img alt=\"this is an alt value\" src=\"/system/web/mvc.jpg\" title=\"this is an alt value\" />", imageResult);
    }

No debe utilizar el atributo title para el elemento img. El razonamiento detrás de esto es bastante simple:

Presumiblemente, la información de los subtítulos es información importante que debería estar disponible para todos los usuarios de forma predeterminada. Si es así, presente este contenido como texto junto a la imagen.

Fuente: http://blog.paciellogroup.com/2010/11/using-the-html-title-attribute/

HTML 5.1 incluye consejos generales sobre el uso del atributo title:

En la actualidad, se desaconseja confiar en el atributo de título, ya que muchos agentes de usuario no exponen el atributo de una manera accesible como lo requiere esta especificación (por ejemplo, requiriendo un dispositivo señalador como un mouse para hacer que aparezca una información sobre herramientas, lo que excluye a los usuarios que solo usan el teclado y usuarios solo táctiles, como cualquier persona con un teléfono o tableta modernos).

Fuente: http://www.w3.org/html/wg/drafts/html/master/dom.html#the-title-attribute

Cuando se trata de accesibilidad y diferentes lectores de pantalla:

• Tiburón 10-11: desactivado de forma predeterminada
• Window-Eyes 7.02: activado de forma predeterminada
• NVDA: no compatible (sin opciones de soporte)
• VoiceOver: no compatible (sin opciones de soporte)

Por lo tanto, como bien lo expresó Denis Boudreau : claramente no es una práctica recomendada .