mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2025-12-19 18:18:27 -05:00
f8287ce2ca
Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> Co-authored-by: Dario-DC <105294544+Dario-DC@users.noreply.github.com> Co-authored-by: Mrugesh Mohapatra <1884376+raisedadead@users.noreply.github.com>
1.6 KiB
1.6 KiB
id, title, challengeType, dashedName
| id | title | challengeType | dashedName |
|---|---|---|---|
| 5dc24165f86c76b9248c6ebc | Step 9 | 0 | step-9 |
--description--
All img elements should have an alt attribute. The alt attribute's text is used for screen readers to improve accessibility and is displayed if the image fails to load.
Here is an example of an img element with an alt attribute:
<img src="cat.jpg" alt="A cat">
Inside the img element, add an alt attribute with this text:
A cute orange cat lying on its back
--hints--
Your code should have an img element. You removed the img element from an earlier step.
assert(document.querySelector('img'));
Your img element does not have an alt attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names.
assert(document.querySelector('img').hasAttribute('alt'));
Your img element's alt attribute value is set to something other than 'A cute orange cat lying on its back'. Make sure the alt attribute's value is surrounded with quotation marks.
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>
<main>
<h1>CatPhotoApp</h1>
<h2>Cat Photos</h2>
<!-- TODO: Add link to cat photos -->
<p>Everyone loves cute cats online!</p>
--fcc-editable-region--
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg">
--fcc-editable-region--
</main>
</body>
</html>