2.5 KiB
2.5 KiB
id | title | challengeType | videoUrl |
---|---|---|---|
587d774c367417b2b2512a9d | Know When Alt Text Should be Left Blank | 0 | https://scrimba.com/c/cM9P4t2 |
Description
alt
attribute on img tags is mandatory. However, sometimes images are grouped with a caption already describing them, or are used for decoration only. In these cases alt
text may seem redundant or unnecessary.
In situations when an image is already explained with text content, or does not add meaning to a page, the img
still needs an alt
attribute, but it can be set to an empty string. Here's an example:
<img src="visualDecoration.jpeg" alt="">
Background images usually fall under the 'decorative' label as well. However, they are typically applied with CSS rules, and therefore not part of the markup screen readers process.
NoteFor images with a caption, you may still want to include
alt
text, since it helps search engines catalog the content of the image.
Instructions
alt
attribute to the img
tag and set it to an empty string. (Note that the image src
doesn't link to an actual file - don't worry that there are no swords showing in the display.)
Tests
tests:
- text: Your <code>img</code> tag should have an <code>alt</code> attribute.
testString: assert(!($('img').attr('alt') == undefined), 'Your <code>img</code> tag should have an <code>alt</code> attribute.');
- text: The <code>alt</code> attribute should be set to an empty string.
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