web-development-kb-pt.site

Está usando o atributo alt para texto como gráfico?

Existem várias maneiras de apresentar o texto em sua página da web exatamente na fonte que seu designer decidiu; como uma imagem, um hack de flash, alguns de javascript, fontes dinâmicas. Mas até hoje, a única coisa que aparentemente funciona em todas as plataformas é a antiga solução de texto como gráfico. Este é um argumento, é claro, mas para fins de acessibilidade, está usando uma imagem que contém o texto como um atributo alt considerado ok? Usuários com deficiência visual receberiam o texto, assim como os mecanismos de pesquisa. Ou eu estou esquecendo de alguma coisa?

9
Zano

Com algumas ressalvas.

  • Se você alterar a imagem no futuro, o alt atributo também deverá ser mantido.
  • Parece que os mecanismos de pesquisa atribuem um valor mais alto ao texto real do que uma imagem com um atributo alt.
  • Na IMO, se você estiver usando isso para navegação, seria melhor usar @ font-face ou JavaScript para aprimorar um menu de texto em vez de substituí-lo por imagens desde o início.
7
Virtuosi Media

É para isso que existe alt, para leitores de tela e robôs

9
Sruly

Se você incluir imagens (via img) em HTML, sempre use o alt attribute ( às vezes com valor vazio).

Se a imagem contiver texto e esse texto for (parte do) conteúdo relevante que você deseja transmitir, inclua esse texto no alt valor.

mas, para fins de acessibilidade, está usando uma imagem que contém o texto como um atributo alt considerado aceitável?

Não. Embora não seja uma barreira para um usuário cego ou de um navegador de texto, usuários disléxicos ou com deficiência visual (com imagens ativadas) podem ter problemas com as imagens de texto:

  • Os usuários não podem ajustar o tamanho da fonte, a altura da linha, o espaçamento das letras.
  • Os usuários não podem alterar a família de fontes.
  • Os usuários não podem alterar as cores/contraste.
  • Os usuários não podem selecionar o texto (por exemplo, para copiar e colar). (como anotado por Kit Grose)

Provavelmente não é um problema para texto breve (uma única palavra, título muito curto, botão de apelo à ação,…), mas pode ser uma barreira de acessibilidade se usada para texto mais longo.

5
unor

Uma das maiores desvantagens do texto como gráfico é a incapacidade de dimensionar com o tamanho do texto (nota: tamanho do texto, não zoom). O dimensionamento da imagem no ems pode ajudar a atenuar isso.

Além disso, lembre-se de que a manutenção sofre muito ao usar imagens, a menos que sejam geradas dinamicamente.

E é bastante ineficiente exibir uma imagem quando tudo o que você deseja é uma fonte personalizada - o tamanho do arquivo de uma imagem é MUITO maior que o texto equivalente.

4
Bobby Jack

Não vejo nenhum problema nisso. Eu nunca ouvi alguém dizer que é uma má ideia. Mas tente evitar ou faça o seguinte:

  • tornar todo o conteúdo de uma página uma imagem (erro comum cometido por pessoas que não sabem o que estão fazendo) - isso dificulta a análise de praticamente qualquer coisa, incluindo mecanismos de pesquisa
  • tente evitá-lo o máximo possível - é sempre melhor ter texto para itens que imagens; apenas facilita tudo (copiar um pedaço de texto, SEO, etc, etc)
  • adicione as propriedades a alt e title - isso garante que, quando as pessoas rolarem sobre a imagem, verão a dica de ferramenta (porque diferentes navegadores mostram diferentes); Eu mais faço isso em imagens que são links
1
Darryl Hein

Como outros já disseram, se você usar essa abordagem, deverá fornecer o texto alternativo; no entanto, eu recomendo que não.

  • O zoom será interrompido - as imagens rasterizadas não podem ser dimensionadas para tamanhos maiores.

  • As imagens ocupam mais espaço que o texto, o que aumenta drasticamente o tempo de carregamento da página.

  • Visualizadores que alteram as cores do navegador, por exemplo para facilitar a leitura, mude para luz de alto contraste no escuro, não verá as imagens corretamente e não verá a alt.

  • A funcionalidade de copiar e colar será interrompida (os usuários não poderão copiar nenhum texto e colá-lo em um documento como texto).

  • Layout e capacidade de resposta - A legibilidade no dispositivo móvel pode ser quebrada - Se o texto não for texto, os navegadores poderão não conseguir dividi-lo de maneira diferente em linhas para ajustá-lo a telas menores.

  • Se você colocar cada palavra ou frase em sua própria imagem, poderá melhorar o layout; no entanto, poderá interromper a análise de texto (SEO).

  • Existem maneiras comumente suportadas de impor fontes de exibição usando CSS e arquivos de fonte. Se algum navegador antigo não suportar isso, você não deve sofrer todos os usuários de navegadores modernos.

0
Danny Varod

O valor do texto alternativo está diminuindo do ponto de vista do SEO, pelo que parece que todos podemos nos concentrar na acessibilidade e otimizar os textos alternativos para os leitores de tela.

Até onde eu sei, ele tem apenas uma porcentagem de influência no seu ranking SERP

0
Roland Pokornyik