Atributo alt da imagem de fundo CSS

Este é um que eu não tive que enfrentar antes. Preciso usar alt tags em todas as imagens em um site, incluindo aquelas usadas pelo atributo CSS background-image.

Não existe nenhuma propriedade CSS como esta até onde eu sei, então qual é a melhor maneira de fazer isso?

As imagens de fundo podem apresentar dados! Na verdade, isso geralmente é recomendado quando a apresentação de ícones visuais é mais compacta e fácil de usar do que uma lista equivalente de anúncios de texto. Qualquer uso de sprites de imagem pode se beneficiar dessa abordagem.

É bastante comum que ícones de listas de hotéis exibam comodidades. Imagine uma página que listasse 50 hotéis e cada hotel tivesse 10 comodidades. Um CSS Sprite seria perfeito para esse tipo de coisa - melhor experiência do usuário porque é mais rápido. Mas como você implementa tags ALT para essas imagens? Site de exemplo .

A resposta é que eles não usam alttexto, em vez disso, usam o titleatributo no div que o contém.

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 acordo com o W3C (veja os links acima), o atributo title tem a mesma finalidade que o atributo alt

Título

Os valores do atributo title podem ser processados ​​por agentes do usuário de várias maneiras. Por exemplo, os navegadores visuais freqüentemente exibem o título como uma "dica de ferramenta" (uma mensagem curta que aparece quando o dispositivo apontador pára sobre um objeto). Os agentes de usuário de áudio podem falar as informações do título em um contexto semelhante. Por exemplo, definir o atributo em um link permite que os agentes do usuário (visuais e não visuais) informem os usuários sobre a natureza do recurso vinculado:

alt

O atributo alt é definido em um conjunto de tags (ou seja, img, area e opcionalmente para entrada e miniaplicativo) para permitir que você forneça um equivalente em texto para o objeto.

Um equivalente em texto traz os seguintes benefícios para seu site e seus visitantes nas seguintes situações comuns:

• hoje em dia, os navegadores da Web estão disponíveis em uma ampla variedade de plataformas com capacidades muito diferentes; alguns não podem exibir imagens ou apenas um conjunto restrito de tipos de imagens; alguns podem ser configurados para não carregar imagens. Se o seu código tiver o atributo alt definido em suas imagens, a maioria desses navegadores exibirá a descrição que você deu em vez das imagens
• alguns de seus visitantes não podem ver imagens, sejam eles cegos, daltônicos, míopes; o atributo alt é de grande ajuda para aquelas pessoas que podem confiar nele para ter uma boa ideia do que está em sua página
• os bots de mecanismo de pesquisa pertencem às duas categorias acima: se você deseja que seu site seja indexado da maneira que merece, use o atributo alt para garantir que eles não percam seções importantes de suas páginas.

Neste artigo do Yahoo Developer Network ( link arquivado ), sugere-se que, se você absolutamente deve usar uma imagem de fundo em vez do elemento img e do atributo alt, use os atributos ARIA da seguinte maneira:

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

O caso de uso no artigo descreve como o Flickr escolheu usar imagens de fundo porque o desempenho foi muito melhorado em dispositivos móveis.

Acho que você deveria ler este post de Christian Heilmann. Ele explica que as imagens de fundo são APENAS para fins estéticos e não devem ser usadas para apresentar dados, portanto, estão isentas da regra de que toda imagem deve ter texto alternativo.

Trecho (grifo meu):

Imagens de fundo CSS que, por definição, têm apenas valor estético - não o conteúdo visual do próprio documento . Se você precisar colocar uma imagem na página que tenha significado, use um elemento IMG e dê a ele um texto alternativo no atributo alt.

Eu concordo com ele.

Conforme mencionado em outras respostas, não há atributo alt (suportado) para uma tag div apenas para a tag img.

A verdadeira questão é por que você precisa adicionar o atributo alt a todas as imagens de fundo do site? Com base nessa resposta, ele o ajudará a determinar qual rota seguir em sua abordagem.

Visual / Textual: Se você está simplesmente tentando adicionar um fallback textual para o usuário se a imagem não carregar, simplesmente use o atributo title. A maioria dos navegadores fornece uma dica de ferramenta visual (caixa de mensagem) quando um usuário passa o mouse sobre a imagem e, se a imagem não for carregada por qualquer motivo, ela se comporta da mesma forma que um atributo alt apresentando texto quando a imagem falha. Essa técnica ainda permite que o site acelere o tempo de carregamento, mantendo as imagens definidas como planos de fundo.

Leitores de tela: a opção intermediária, isso varia porque tecnicamente manter suas imagens como planos de fundo e usar a abordagem de atributo de título deve funcionar como sugerido acima, "Os agentes de usuário de áudio podem falar as informações do título em um contexto semelhante." No entanto, isso não é garantido que funcione em todos os casos, inclusive alguns leitores podem ignorar tudo juntos. Se você acabar optando por essa abordagem, também pode tentar adicionar rótulos de ária para ajudar a garantir que os leitores de tela os identifiquem.

SEO / Search Engines: Aqui está o grande problema, se você fosse como eu, você adicionou suas imagens de fundo, tudo estava bom. Então, meses depois, o cliente (ou talvez você mesmo) percebeu que você está perdendo o melhor do SEO por não ter alt's para suas imagens. Lembre-se de que o atributo title não tem peso nos mecanismos de pesquisa , de acordo com minha pesquisa e conforme mencionado em um artigo aqui: https://www.searchenginejournal.com/how-to-use-link-title-attribute-correctly /. Portanto, se seu objetivo for SEO, você precisará ter uma tag img com o atributo alt. Uma abordagem possível é apenas carregar imagens reais muito pequenas no site com atributos alt, dessa forma você obtém todo o SEO e não precisa reajustar o CSS existente no lugar. No entanto, isso pode levar a um tempo de carregamento adicional dependendo do tamanho e o Google realmente olha o caminho das imagens ao indexar. Resumindo, se você está indo por esse caminho, apenas aceite o que precisa ser feito e inclua as imagens reais em vez de usar fundos.

A crença geral é que você não deve usar imagens de fundo para coisas com valor semântico significativo, então não há realmente uma maneira adequada de armazenar dados alternativos com essas imagens. A questão importante é o que você fará com esses dados alternativos. Você deseja que seja exibido se as imagens não carregarem? Você precisa dele para alguma função programática na página? Você pode armazenar os dados arbitrariamente usando propriedades css criadas sem significado (pode causar erros?) OU adicionando imagens ocultas que têm a imagem e a tag alt, e então quando você precisa de imagens de fundo alt, você pode comparar a imagem caminhos e, em seguida, manipular os dados como quiser, usando algum script personalizado para simular o que você precisa. Não conheço nenhuma maneira de fazer o navegador lidar automaticamente com algum tipo de atributo alt para imagens de fundo.

A maneira clássica de fazer isso é colocar o texto na div e usar uma técnica de substituição de imagem.

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

com background-image sendo a classe onde você atribui a imagem de fundo e ela poderia ser a classe de substituição de imagem de HTML5boilerplates, abaixo:

/* ==========================================================================
   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 artigo do W3C diz o que eles acham que você deve fazer https://www.w3.org/WAI/GL/wiki/ARIATechnique_usingImgRole_with_aria-label_forCSS-backgroundImage

e tem exemplos aqui http://mars.dequecloud.com/demo/ImgRole.htm

entre os quais

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

Ainda assim, se, como no exemplo acima, o elemento que contém a imagem de fundo for apenas um contêiner vazio, eu pessoalmente prefiro colocar o texto lá e ocultá-lo usando CSS; exatamente onde você mostra a imagem:

<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 */
}

Esta é minha solução para esse tipo de problema:

Crie uma nova classe em CSS e posicione fora da tela. Em seguida, coloque seu texto alternativo em HTML antes da propriedade que chama sua imagem de plano de fundo. Pode ser qualquer tag, 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>

Não está claro para mim o que você deseja.

Se você deseja que uma propriedade CSS renderize o valor do atributo alt, então talvez você esteja procurando a função de atributo CSS, por exemplo:

IMG:before { content: attr(alt) }

Se você quiser colocar o atributo alt em uma imagem de fundo, então ... isso é estranho porque o atributo alt é um atributo HTML enquanto a imagem de fundo é uma propriedade CSS. Se você quiser usar o atributo HTML alt, então acho que você precisa de um elemento HTML correspondente para colocá-lo.

Por que você "precisa usar alt tags em imagens de fundo": isso é por uma razão semântica ou por alguma razão de efeito visual (e se sim, qual efeito ou razão)?

Você pode fazer isso colocando a alttag em divonde sua imagem aparecerá.

Exemplo:

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