Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. HTML
Webdesign

Dica rápida: lembre de estilizar o Text ALT

by
Length:ShortLanguages:
This post is part of a series called Strange and Unusual HTML.
Quick Tip: Consider Wrapping Your Code With a “figure” Element
Quick Tip: Set Relative URLs With the “base” Tag

Portuguese (Português) translation by thierry rene matos (you can also view the original English article)

O atributo alt junto com a tag <img> disponibiliza um conteúdo alternativo para usuários que não possam baixar a imagem. Utilizamos esse atributo para fazer com que nosso conteúdo fique mais acessível, mas você já parou para pensar no que realmente ele representa?

Vamos utilizar o template para email que criamos em outro tutorial como exemplo, mas os princípios são aplicáveis a qualquer projeto web.

Se você der uma olhada no nosso arquivo sem as imagens, ele vai se parecer com o exemplo abaixo:

altTagsBefore

Fica claro que o ALT Text não tem destaque - especialmente os links. Podemos fazer alguns procedimentos para melhorar a apresentação dessa informação.

Para o texto principal, vamos deixar o texto mais largo e vamos mudar sua cor para dark blue (azul escuro) ao invés de preto. Podemos fazer isso adicionando estilos ao elemento pai (neste caso, a célula da tabela). Os estilos declarados então serão aplicados ao texto disponibilizado pelo atributo ALT, na célula.

Essa é a célula:

Vamos adicionar alguns estilos de texto, conforme o exemplo abaixo:

E vamos aplicar estilos nos links social media, para que eles fiquem brancos:

altTagsAfter

Simples assim! Agora podemos ter certeza de que a mensagem do email está explicita mesmo que as imagens não sejam carregadas.

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.