Etiqueta img de HTML:atributo de título vsatributo alt?

StackOverflow https://stackoverflow.com/questions/872389

  •  22-08-2019
  •  | 
  •  

Pregunta

Estaba navegando Amazon y me di cuenta de que al buscar "1 TB"si se coloca el cursor del ratón sobre las estrellas de calificación de la imagen, solo se ve la puntuación si el uso de IE.Si usted está usando otro navegador, a continuación, la puntuación no se mostrará.

Una calificación de 3.8 y una calificación de 4.2 ambos se muestran como 4 estrellas.Por supuesto, un 3.8 estrellas vs 4.2 estrellas (76% vs 84% de la puntuación) podría hacer una diferencia!

Esto es debido a que la forma estándar de visualización de alt el texto es sólo cuando el usuario apaga gráficos o cuando el navegador se "leen" (e.g navegador para los usuarios con discapacidad visual).Es decir, sin embargo, muestra que en hover.

Por eso creo que si Amazon es mostrar que, independientemente de que el navegador del usuario, a continuación, title debe ser utilizado además para alt.¿Está de acuerdo?

¿Fue útil?

Solución

Me gustaría ir para ambos. Título mostrará una buena información sobre herramientas en todos los navegadores y alt dará una descripción cuando se navega en un navegador sin imágenes.

Una vez dicho esto, me gustaría ver algunas estadísticas de la cantidad de "surfistas" por ahí va a una "tienda" para buscar mercancía en realidad tienen las imágenes desactivadas o está utilizando un navegador que no admite imágenes. Creo que los días en que el 90% de la población está utilizando un módem de 28k para conectarse a la InterWeb es muuucho más.

Otros consejos

Se utilizan para diferentes cosas. El alt atributo se utiliza lugar de la imagen. Si la imagen no se puede demostrar, o (creo) en los lectores de pantalla.

El title atributo se muestra a lo largo con la imagen, típicamente como una información sobre herramientas vuelo estacionario.

Uno no debe usarse "en vez" de la otra. Cada uno debe usarse correctamente , para hacer las cosas que fueron diseñados para hacerlo.

Alt y título son para diferentes cosas, como ya se ha mencionado. Mientras que el título atributo proporcionará una información sobre herramientas, Alt es también un atributo importante, ya que especifica el texto que se mostrará si la imagen no se puede visualizar. (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 el Alt atributo es requerida para validar como un documento XHTML, mientras que el título atributo es sólo una "opción adicional", por así decirlo.

Esto se debe a que tienen objetivos diferentes y ambos deben ser utilizados no sólo uno sobre el otro.

El "alt" es para lo que ustedes ya se ha dicho, para que pueda ver lo que es la imagen es todo acerca de si la imagen no se puede visualizar (por cualquier razón), sino que también permite a las personas con discapacidad visual para comprender lo que es la imagen sobre.

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 si el texto alternativo siempre describir lo que es visible en la imagen, para el caso de que no se muestra la imagen.

  

alt = texto [CS]       Para los agentes de usuario que no pueden mostrar imágenes, formularios o applets, este atributo especifica texto alternativo. El idioma del texto alternativo está especificado por el atributo lang.

w3.org

Creo que se requiere de un estricto cumplimiento alt XHTML.

Como otros han señalado, el título es para información sobre herramientas (bueno tener), alt es para la accesibilidad. No hay nada malo con el uso de ambos, pero alt siempre debe estar allí.

No, creo que es mejor alt porque el propósito de ese atributo es proporcionar texto "alternativo" en el caso de que la imagen no puede ser vista (ya sea que la imagen no se encuentra o que el navegador mismo es incapaz de mostrarlo).

Los MVCFutures para ASP.NET MVC decidieron hacer ambas cosas. De hecho, si usted 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 rápida búsqueda en Google se presentó un caso de prueba para él! 

    [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 título para el elemento img. El razonamiento detrás de esto es bastante simple:

  

Es de suponer que la información de subtítulos es una información importante que debe estar disponible para todos los usuarios por defecto. Si es así presentar 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:

  

Basándose en el atributo de título se desanima actualmente como muchos agentes de usuario no exponen el atributo de una manera accesible como es requerido por la presente memoria descriptiva (por ejemplo, requiere un dispositivo de puntero tal como un ratón para causar una descripción para apear, que excluye teclado- sólo los usuarios y usuarios al tacto única, como cualquier persona con un moderno teléfono o tableta).

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

Cuando se trata de la accesibilidad y de pantalla diferentes lectores:

  • Tiburón 10-11: desactivado por defecto
  • Window-Eyes 7.02: activada de forma predeterminada
  • NVDA: no es compatible (no hay opciones de soporte)
  • VoiceOver: no es compatible (no hay opciones de soporte)

Por lo tanto, como Denis Boudreau adecuadamente ponerlo: claramente no es una práctica recomendada .

El atributo ALT es para el usuario con problemas de visión que utilizaría un lector de pantalla. Si la ALT no se encuentra en cualquier etiqueta de imagen, se puede leer toda la dirección URL de la imagen. Si las imágenes son para una parte del diseño del sitio, que deben poder decidir ALT pero se pueden dejar vacíos por lo que la URL no tiene que ser leído por cada parte del sitio.

Atributo ALT

El alt atributo se define en un conjunto de etiquetas (es decir, img, area y, opcionalmente, para input y applet) para permitir que usted proporcione un texto equivalente para el objeto.

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

  • en la actualidad, los navegadores de internet están disponibles en una amplia variedad de plataformas con capacidades muy distintas;algunos no se pueden mostrar imágenes en todos o sólo a un conjunto restringido de tipo de imágenes;algunos pueden ser configurados para no cargar las imágenes.Si el código tiene el atributo alt en las imágenes, la mayoría de estos navegadores mostrará la descripción que se dio en lugar de las imágenes
  • algunos de sus visitantes no pueden ver las imágenes, sean ciegos, ciegos al color, de baja 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 está en su página
  • robots de motores de búsqueda pertenecen a las dos categorías anteriores:si quieres que tu web sea indexada así como se merece, utilizar el atributo alt para asegurarse de que no van a faltar las secciones importantes de sus páginas.

Atributo Title

El objetivo de esta técnica es proporcionar ayuda contextual para los usuarios, ya que introduzca los datos en los formularios por la prestación de la ayuda de la información en un title atributo.La ayuda puede incluir el formato de la información 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 es inmediatamente adyacente al campo de texto se utiliza para introducir el término de búsqueda.La relación entre el campo de búsqueda y el menú desplegable que está claro para los usuarios que pueden ver el diseño visual, que no tiene espacio para una etiqueta visible.El title atributo se utiliza para identificar el select menú.El title atributo puede ser hablado por los lectores de pantalla o aparece como una punta de la herramienta para las personas que usan magnificadores 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 de 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 de código de área, de 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 introducir los términos de búsqueda y un botón con la etiqueta "Buscar" para realizar la búsqueda.El title atributo se utiliza para identificar la forma de control y el botón se coloca a la derecha después de que el campo de texto de modo que es claro para el usuario que el campo de texto es donde el término de búsqueda debe ser introducido.

<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 que se debe asociar a cada control con los encabezados de fila y columna de la celda.Sin título (o la pantalla de la ETIQUETA) es difícil para los no-visual de los usuarios para hacer una pausa e interrogar a las correspondientes de la fila/columna de encabezado de valores con el uso de su tecnología de asistencia, mientras que la tabulación a través de la forma.

Por ejemplo, un formulario de encuesta tiene cuatro encabezados de columna en la primera fila:La Pregunta, De Acuerdo, Indeciso, En Desacuerdo.Cada fila contiene una pregunta y un botón de radio en cada celda correspondiente a la opción de respuesta en las tres columnas.El atributo title para cada botón de radio es una concatenación de la opción de respuesta (encabezado de columna) y el texto de la pregunta (encabezado de la fila) con un guión o coma como separador.

Elemento Img

Permitido atributos mencionados en MDN.

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

Como se puede ver title atributo no está permitido dentro de img elemento.Me gustaría utilizar alt atributo y si requiere iba a usar CSS (Ejemplo:pseudo clase :hover) en lugar de title atributo.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top