Atributo alt de imagen de fondo CSS

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

Hasta donde yo sé, no existe una propiedad CSS como esta, entonces, ¿cuál es la mejor manera de hacer esto, por favor?

¡Seguro que 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 imágenes puede beneficiarse de este enfoque.

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

La respuesta es que no usan alttexto en absoluto, sino que usan el titleatributo en el div contenedor.

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 tiene el mismo propósito que el atributo alt.

Título

Los agentes de usuario pueden representar los valores del atributo de título de diversas formas. Por ejemplo, los navegadores visuales suelen mostrar el título como una "información sobre herramientas" (un mensaje corto que aparece cuando el dispositivo señalador se detiene sobre un objeto). Los agentes de usuario de audio pueden pronunciar 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) informar a los usuarios sobre la naturaleza del recurso enlazado:

alt

El atributo alt se define en un conjunto de etiquetas (es decir, img, área y, opcionalmente, para entrada y applet) para permitirle proporcionar 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.

En este artículo de Yahoo Developer Network ( enlace archivado ) se sugiere que si es absolutamente necesario utilizar una imagen de fondo en lugar del elemento img y el atributo alt, utilice 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ó usar imágenes de fondo porque el rendimiento mejoró enormemente en los dispositivos móviles.

Creo que deberías leer esta publicación de Christian Heilmann. Explica que las imágenes de fondo son SÓLO por motivos estéticos y no deben usarse para presentar datos y, por lo tanto, están exentas de la regla de que todas las imágenes deben tener texto alternativo.

Extracto (el énfasis es mío):

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

Estoy de acuerdo con él.

Como se mencionó en otras respuestas, no hay un atributo alt (admitido) 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? Según esta respuesta, le ayudará a determinar qué ruta tomar en su aproximación.

Visual / Textual: si simplemente está intentando agregar un respaldo textual para el usuario si la imagen no se carga, simplemente use el atributo title. La mayoría de los navegadores proporcionarán una sugerencia visual sobre herramientas (cuadro de mensaje) cuando un usuario se desplaza sobre la imagen, y si la imagen no se carga por cualquier motivo, se comporta de la misma manera que un atributo alt que presenta texto cuando la imagen falla. Esta técnica aún permite que el sitio acelere los tiempos de carga manteniendo las imágenes configuradas como fondos.

Lectores de pantalla: la opción intermedia, 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 decir la información del título en un contexto similar". Sin embargo, esto no está garantizado para funcionar en todos los casos, incluso algunos lectores pueden ignorarlo por completo. Si termina optando por este enfoque, también puede intentar agregar etiquetas aria para ayudar a garantizar que los lectores de pantalla las capten.

SEO / Motores de búsqueda: Aquí está el más grande, si eras como yo, agregaste tus imágenes de fondo, todo estuvo bien. Luego, meses después, el cliente (o tal vez usted mismo) se dio cuenta de que se está perdiendo algo de oro de SEO de primera al no tener alt para sus imágenes. Tenga en cuenta que el atributo de título no tiene ningún peso en los motores de búsqueda. , según 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 su objetivo es SEO, deberá tener una etiqueta img con el atributo alt. Un enfoque posible es simplemente cargar imágenes reales muy pequeñas en el sitio con atributos alt, de esta manera obtendrá todo el SEO y no tendrá que reajustar el CSS existente en su lugar. Sin embargo, esto puede llevar a un tiempo de carga adicional dependiendo del tamaño y Google sí mira 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 usar fondos.

La creencia general es que no debería usar imágenes de fondo para cosas con un valor semántico significativo, por lo que realmente no existe una forma adecuada de almacenar datos alternativos con esas imágenes. La pregunta importante es ¿qué vas a hacer con esos datos alternativos? ¿Quieres que se muestre si las imágenes no se cargan? ¿Lo necesita para alguna función programática en la página? Puede almacenar los datos arbitrariamente utilizando propiedades CSS inventadas que no tienen significado (¿podrían causar errores?) O agregando imágenes ocultas que tienen la imagen y la etiqueta alt, y luego, cuando necesite una imagen de fondo alt, puede comparar la imagen rutas y luego maneje los datos como quiera usando algún script personalizado para simular lo que necesita.Sin embargo, no conozco ninguna forma de hacer que el navegador maneje automáticamente algún tipo de atributo alt para las imágenes de fondo.

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

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

con background-image siendo la clase donde asigna la imagen de fondo y podría ser la clase de reemplazo de imagen 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%;
}

Este artículo de W3C le dice lo que creen que debe hacer https://www.w3.org/WAI/GL/wiki/ARIATechnique_usingImgRole_with_aria-label_forCSS-backgroundImage

y tiene ejemplos aquí http://mars.dequecloud.com/demo/ImgRole.htm

dentro de los cuales

<a href="http://www.facebook.com">
 <span class="fb_logo" role="img" aria-label="Connect via Facebook">
 </span>
</a>

Aún así, si, como en el ejemplo anterior, el elemento que contiene la imagen de fondo es solo un contenedor vacío, personalmente prefiero poner el texto allí y ocultarlo usando CSS; justo donde muestra la imagen en su lugar:

<a href="http://www.facebook.com"><span class="fb_logo">
  Connect via Facebook
</span></a>

.fb_logo {
  height: 37px; width: 37px;
  background-image: url('../gfx/logo-facebook.svg');
  color:transparent; overflow:hidden; /* hide the text */
}

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

Cree una nueva clase en CSS y colóquela 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>

No tengo claro lo que quieres.

Si desea que una propiedad de CSS represente el valor del atributo alt, entonces quizás esté buscando la función de atributo de 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 HTML mientras que la imagen de fondo es una propiedad CSS. Si desea utilizar el atributo alt de HTML, creo que necesitará un elemento HTML correspondiente para colocarlo.

¿Por qué "necesita usar etiquetas alt en las imágenes de fondo": es esto por una razón semántica o por alguna razón de efecto visual (y si es así, entonces qué efecto o qué razón)?

Puede lograr esto colocando la altetiqueta en el lugar donde divaparecerá su imagen.

Ejemplo:

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