1.5 KiB
| id | title | challengeType | dashedName |
|---|---|---|---|
| 5dc24165f86c76b9248c6ebc | Part 9 | 0 | part-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. For example, <img src="cat.jpg" alt="A cat"> has an alt attribute with the text A cat.
Add an alt attribute to the img element with the 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>
<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://bit.ly/fcc-relaxing-cat">
--fcc-editable-region--
</main>
</body>
</html>