2.6 KiB
2.6 KiB
id | title | challengeType | videoUrl | localeTitle |
---|---|---|---|---|
587d774c367417b2b2512a9d | Know When Alt Text Should be Left Blank | 0 | Saiba quando o texto alternativo deve ser deixado em branco |
Description
alt
em img tags é obrigatório. No entanto, às vezes, as imagens são agrupadas com uma legenda que já está 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 pode ser definida como uma string vazia. Aqui está um exemplo: <img src="visualDecoration.jpeg" alt="">
As imagens de fundo geralmente também se enquadram no rótulo 'decorativo'. No entanto, eles são normalmente aplicados com regras CSS e, portanto, não fazem parte do processo de leitores de tela de marcação. Nota Para imagens com uma legenda, você ainda pode querer incluir texto
alt
, pois ajuda os mecanismos de pesquisa a catalogar o conteúdo da imagem. Instructions
alt
à tag img
e configure-o para uma string vazia. (Observe que a imagem src
não está vinculada a um arquivo real - não se preocupe se não há espadas no visor). 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 para uma string vazia.
testString: 'assert($("img").attr("alt") == "", "The <code>alt</code> attribute should be set to an empty string.");'
Challenge Seed
<h1>Deep Thoughts with Master Camper Cat</h1>
<article>
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
<p>To Come...</p>
</article>
<img src="samuraiSwords.jpeg">
<article>
<h2>Is Chuck Norris a Cat Person?</h2>
<p>To Come...</p>
</article>
Solution
// solution required