html - texto - Atributo alt de la imagen de fondo CSS

propiedad alt imagen

Question

Este es uno que no he tenido que enfrentar antes. Necesito usar etiquetas alt en todas las imágenes de un sitio, incluidas las utilizadas por el atributo CSS background-image.

Por lo que sé, no hay ninguna propiedad de CSS como esta, entonces, ¿cuál es la mejor manera de hacerlo, por favor?

Answer 1

¡Las imágenes de fondo pueden presentar datos! De hecho, esto se recomienda a menudo cuando la presentación de iconos visuales es más compacta y fácil de usar que una lista equivalente de borrones de texto. Cualquier uso de sprites de imagen puede beneficiarse de este enfoque.

Es bastante común que los iconos de las listas de hoteles muestren los servicios. Imagine una página que enumera 50 hoteles y cada hotel tiene 10 comodidades. Un CSS Sprite sería perfecto para este tipo de cosas: una mejor experiencia de usuario porque es más rápido. Pero, ¿cómo implementar etiquetas ALT para estas imágenes? Sitio de ejemplo .

La respuesta es que no usan ningún texto alt , sino que usan el atributo de title en el div que lo contiene.

HTML

<div class="hotwire-fitness" title="Fitness Centre"></div>

CSS

.hotwire-fitness {
    float: left;
    margin-right: 5px;
    background: url(/prostyle/images/new_amenities.png) -71px 0;
    width: 21px;
    height: 21px;
}

De acuerdo con el W3C (ver enlaces arriba), el atributo de título sirve en gran parte del mismo propósito que el atributo alt

Título

Los agentes de usuario pueden representar los valores del atributo de título de varias formas. Por ejemplo, los navegadores visuales muestran con frecuencia el título como una "información sobre herramientas" (un mensaje corto que aparece cuando el dispositivo señalador hace una pausa sobre un objeto). Los agentes de usuario de audio pueden hablar la información del título en un contexto similar. Por ejemplo, establecer el atributo en un enlace permite a los agentes de usuario (visuales y no visuales) decirles a los usuarios sobre la naturaleza del recurso vinculado:

alt

El atributo alt se define en un conjunto de etiquetas (a saber, img, área y opcionalmente para entrada y applet) que le permiten proporcionar un texto equivalente para el objeto.

Un texto equivalente 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 gran variedad de plataformas con capacidades muy diferentes; algunos no pueden mostrar imágenes o solo un conjunto restringido de tipo de imágenes; algunos se pueden configurar 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 usted brindó en lugar de las imágenes
• algunos de sus visitantes no pueden ver imágenes, ya sean ciegos, daltónicos o 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 hay en su página
• Los robots de los motores de búsqueda pertenecen a las dos categorías anteriores: si desea que su sitio web se indexe de la manera que se merece, use el atributo alt para asegurarse de que no se perderán secciones importantes de sus páginas.

Answer 2

Aquí está mi solución a este tipo de problema:

Crea una nueva clase en CSS y colócala fuera de la pantalla. Luego coloque su texto alternativo en HTML justo antes de la propiedad que llama a su imagen de fondo. Puede ser cualquier etiqueta, H1 , H2 , p , etc.

CSS

<style type="text/css">
  .offleft {
    margin-left: -9000px;
    position: absolute;
  }
</style>

HTML

<h1 class="offleft">put your alt text here</h1>
<div class or id that calls your bg image>  </div>

Answer 3

Como se mencionó anteriormente en las respuestas anteriores, no hay atributo alt (compatible) para una etiqueta div solo para la etiqueta img.

La verdadera pregunta es por qué necesita agregar el atributo alt a todas las imágenes de fondo del sitio. En función de esta respuesta, lo ayudará a determinar qué ruta tomar en su enfoque.

Visual / Textual: si simplemente está intentando agregar un retroceso de texto para el usuario del sitio, siga adelante y use el atributo de título. La mayoría de los navegadores proporcionan una sugerencia de herramienta visual (cuadro de mensaje) cuando un usuario se desplaza sobre la imagen, y si la imagen no se carga por el motivo que sea, se comporta igual que un atributo alternativo que presenta texto cuando falla la imagen. Esta técnica aún permite que el sitio acelere los tiempos de carga al mantener las imágenes configuradas en fondos.

Lectores de pantalla: la opción de mitad de camino, esto varía porque técnicamente mantener sus imágenes como fondos y usar el enfoque de atributo de título debería funcionar como se indicó anteriormente, "los agentes de usuario de audio pueden expresar la información del título en un contexto similar". Sin embargo, no se garantiza que funcione en todos los casos, incluso algunos lectores pueden ignorarlo todos juntos. Por lo tanto, puede terminar optando por este enfoque, tal vez incluso agregar aria-labels para ayudar a garantizar que se capturen, o incluso reemplazar los fondos con imágenes reales para estar seguros.

SEO / Motores de búsqueda: Aquí está el grande, si fueras como yo, agregarías tus imágenes de fondo, todo estaba bien. Luego, meses después, el cliente (o tal vez usted mismo) se dio cuenta de que se está perdiendo un poco de oro de SEO principal al no tener alt para sus imágenes. Tenga en cuenta que el atributo del título no tiene ningún peso en los motores de búsqueda , de mi investigación y como se menciona en un artículo aquí: https://www.searchenginejournal.com/how-to-use-link-title-attribute-correctly/ . Entonces, si apunta a SEO, necesitará una etiqueta img con el atributo alt. Un posible enfoque es simplemente cargar imágenes reales muy pequeñas en el sitio con atributos alt, de esta manera se obtiene todo el SEO y no es necesario reajustar el CSS existente en su lugar. Sin embargo, esto puede llevar a un tiempo de carga adicional según el tamaño y, de hecho, google observa la ruta de las imágenes al indexar. En resumen, si va por esta ruta, simplemente acepte lo que debe hacerse e incluya las imágenes reales en lugar de utilizar fondos.

Answer 4

Creo que deberías leer esta publicación de Christian Heilmann. Explica que las imágenes de fondo SOLO son estéticas y no deben utilizarse para presentar datos, por lo que están exentas de la regla de que cada imagen debe tener texto alternativo.

Extracto (el énfasis es mío):

Imágenes de fondo CSS que son, por definición, solo de valor estético, no contenido visual del documento en sí . Si necesita poner una imagen en la página que tenga significado, entonces use un elemento IMG y asígnele un texto alternativo en el atributo alt.

Estoy de acuerdo con él.

Answer 5

En este artículo de Yahoo Developer Network ( enlace archivado ) se sugiere que si debe utilizar un atributo background-image en lugar de img y alt, use los atributos ARIA de la siguiente manera:

<div role="img" aria-label="adorable puppy playing on the grass">
  ...
</div>

El caso de uso en el artículo describe cómo Flickr eligió utilizar imágenes de fondo porque el rendimiento se mejoró mucho en los dispositivos móviles.

Answer 6

La creencia general es que no se deben usar imágenes de fondo para objetos con un valor semántico significativo, por lo que no existe una forma adecuada de almacenar datos alt con esas imágenes. La pregunta importante es: ¿qué vas a hacer con esa información alternativa? ¿Desea que se muestre si las imágenes no se cargan? ¿Lo necesita para alguna función programática en la página? Podrías almacenar los datos arbitrariamente usando propiedades CSS compuestas que no tienen ningún significado (¿podrían causar errores?) O al agregar imágenes ocultas que tienen la imagen y la etiqueta alt, y luego cuando necesites una imagen de fondo alt puedes comparar la imagen rutas y luego maneje los datos de la forma que desee utilizando algún script personalizado para simular lo que necesita. Sin embargo, no tengo forma de que el navegador maneje automáticamente algún tipo de atributo alt para imágenes de fondo.

Answer 7

La forma clásica de lograr esto es colocar el texto en el div y usar una técnica de reemplazo de imagen.

<div class"ir background-image">Your alt text</div>

con la imagen de fondo seleccionada, la clase en la que asigna la imagen de fondo e ir podría ser la clase de sustitución de imágenes de HTML5boilerplates, a continuación:

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

Answer 8

No está claro para mí lo que quieres.

Si desea que una propiedad CSS represente el valor del atributo alt, entonces quizás esté buscando la función del atributo CSS, por ejemplo:

IMG:before { content: attr(alt) }

Si desea poner el atributo alt en una imagen de fondo, entonces ... eso es extraño porque el atributo alt es un atributo de HTML mientras que la imagen de fondo es una propiedad de CSS. Si desea usar el atributo HTML alt, entonces creo que necesitaría un elemento HTML correspondiente para ponerlo.

¿Por qué "necesitas usar etiquetas alt en imágenes de fondo": esto es por una razón semántica o por algún motivo de efectos visuales (y si es así, ¿qué efecto o qué motivo)?

Answer 9

Pero, cada imagen no se aplica como fondo sino como elemento de marcado ( <img... /> ) debe presentar el atributo alt (texto alternativo), incluido algún texto descriptivo o simplemente vacío (en el caso de imágenes decorativas). Para asuntos de accesibilidad es una de las reglas más importantes .

Answer 10

Puede lograr esto colocando la etiqueta alt en el div aparecería su imagen.

Ejemplo:

<div id="yourImage" alt="nameOfImage"></div>