1.6 KiB
| id | title | challengeType | dashedName |
|---|---|---|---|
| 5dc24165f86c76b9248c6ebc | Step 9 | 0 | step-9 |
--description--
Tutti gli elementi img dovrebbero avere un attributo alt. Il testo dell'attributo alt viene utilizzato dai lettori di schermo per migliorare l'accessibilità e viene visualizzato se l'immagine non viene caricata. Ad esempio, <img src="cat.jpg" alt="A cat"> ha un attributo alt con il testo A cat.
Aggiungi un attributo alt all'elemento img con questo testo:
A cute orange cat lying on its back
--hints--
Il codice dovrebbe avere un elemento img. Hai rimosso l'elemento img che era presente.
assert(document.querySelector('img'));
L'elemento img non possiede un attributo alt. Verifica che ci sia uno spazio dopo il nome del tag di apertura e/o che ci siano spazi prima di tutti i nomi degli attributi.
assert(document.querySelector('img').hasAttribute('alt'));
Il valore dell'attributo alt dell'elemento img è diverso da 'A cute orange cat lying on its back'. Assicurati che il valore dell'attributo alt sia circondato da virgolette.
const altText = document
.querySelector('img')
.alt.toLowerCase()
.replace(/\s+/g, ' ');
assert(altText.match(/A cute orange cat lying on its back\.?$/i));
--seed--
--seed-contents--
<html>
<body>
<h1>CatPhotoApp</h1>
<main>
<h2>Cat Photos</h2>
<!-- TODO: Add link to cat photos -->
<p>Click here to view more cat photos.</p>
--fcc-editable-region--
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg">
--fcc-editable-region--
</main>
</body>
</html>