2.4 KiB
id | title | challengeType | videoUrl | forumTopicId | dashedName |
---|---|---|---|---|---|
587d774c367417b2b2512a9d | Sapere quando il testo alternativo dovrebbe essere lasciato vuoto | 0 | https://scrimba.com/c/cM9P4t2 | 301019 | know-when-alt-text-should-be-left-blank |
--description--
Nell'ultima sfida, hai imparato che usando i tag img
, è obbligatorio includere un attributo alt
. Tuttavia, a volte le immagini sono già raggruppate con una didascalia che le descrive, o sono utilizzate solo a scopo decorativo. In questi casi, il testo alt
può sembrare ridondante o inutile.
Quando un'immagine è già spiegata con del contenuto testuale o non aggiunge altro significato alla pagina, il tag img
ha ancora bisogno di un attributo alt
, ma esso può essere impostato su una stringa vuota. Un esempio:
<img src="visualDecoration.jpeg" alt="">
Le immagini di sfondo solitamente cadono nella categoria 'decorativo'. Tuttavia, sono tipicamente applicate con regole CSS e quindi sono escluse dal processo di lettura dello schermo.
Nota: Per le immagini con didascalia, potresti voler includere comunque il testo alt
poiché aiuta i motori di ricerca a catalogare il contenuto dell'immagine.
--instructions--
Camper Cat ha scritto lo scheletro della pagina per la sezione blog del suo sito. Vuole aggiungere una separazione visiva tra i suoi due articoli usando l'immagine decorativa di una spada samurai. Aggiungi un attributo alt
al tag img
e impostalo su una stringa vuota. (Nota che il link all'immagine sorgente src
non punta ad un file reale - non preoccuparti che non ci siano spade mostrate nella pagina.)
--hints--
Il tuo tag img
dovrebbe avere un attributo alt
.
assert(!($('img').attr('alt') == undefined));
L'attributo alt
dovrebbe essere impostato su una stringa vuota.
assert($('img').attr('alt') == '');
--seed--
--seed-contents--
<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>
--solutions--
<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" alt="">
<article>
<h2>Is Chuck Norris a Cat Person?</h2>
<p>To Come...</p>
</article>