freeCodeCamp

2.7 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d774c367417b2b2512a9d	Know When Alt Text Should be Left Blank	0		Saiba quando o texto alt deve ser deixado em branco

Description

No último desafio, você aprendeu que incluir um atributo alt em tags img é obrigatório. No entanto, às vezes, imagens são agrupadas com uma legenda que já está as descrevendo ou são usadas apenas para decoração. Nestes casos, o texto alt pode parecer redundante ou desnecessário. Em situações em que uma imagem já é explicada com conteúdo de texto ou não adiciona significado a uma página, a img ainda precisa de um atributo alt , mas ele pode ser definido como uma string vazia. Aqui está um exemplo: <img src="visualDecoration.jpeg" alt=""> Imagens de fundo geralmente também se enquadram no rótulo 'decorativo'. No entanto, elas são normalmente aplicadas com regras CSS e, portanto, não fazem parte da marcação que os leitores de tela processam. Nota
Para imagens com legenda, você ainda pode querer incluir um texto alt , pois isso ajuda os mecanismos de pesquisa a catalogar o conteúdo da imagem.

Instructions

Camper Cat codificou uma página esqueleto para a parte do blog do seu site. Ele está planejando adicionar uma quebra visual entre seus dois artigos com uma imagem decorativa de uma espada samurai. Adicione um atributo alt à tag img e defina-o como uma string vazia. (Observe que o src da imagem não é um link para um arquivo de verdade - não se preocupe que não há espadas na tela).

Tests

tests:
  - text: Sua tag <code>img</code> deve ter um atributo <code>alt</code> .
    testString: 'assert(!($("img").attr("alt") == undefined), "Your <code>img</code> tag should have an <code>alt</code> attribute.");'
  - text: O atributo <code>alt</code> deve ser definido como uma string vazia.
    testString: 'assert($("img").attr("alt") == "", "The <code>alt</code> attribute should be set to an empty string.");'

Challenge Seed

<h1>Reflexões Profundas com o Mestre Camper Cat</h1>
<article>
  <h2>Derrotando seu Adversário: o Ponto Vermelho é Nosso!</h2>
  <p>Em breve...</p>
</article>

<img src="samuraiSwords.jpeg">

<article>
  <h2>Chuck Norris é gateiro?</h2>
  <p>Em breve...</p>
</article>

Solution

// solution required

2.7 KiB Raw Blame History