gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Remove unwanted comma (#26050)

Browse Source
This commit is contained in:
Naveen
2019-02-10 21:03:56 +05:30
committed by Randell Dawson
parent c47a7f0bf1
commit f6f58d3228
1 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
curriculum/challenges/english/01-responsive-web-design/applied-accessibility/add-a-text-alternative-to-images-for-visually-impaired-accessibility.english.md
View File

@ -11,12 +11,12 @@ guideUrl: 'https://www.freecodecamp.org/guide/certificates/add-alt-text-to-an-im
It's likely you've seen an <code>alt</code> attribute on an <code>img</code> tag in other challenges. <code>Alt</code> text describes the content of the image and provides a text-alternative. This helps in case the image fails to load or can't be seen by a user. It's also used by search engines to understand what an image contains to include it in search results. Here's an example: It's likely you've seen an <code>alt</code> attribute on an <code>img</code> tag in other challenges. <code>Alt</code> text describes the content of the image and provides a text-alternative. This helps in case the image fails to load or can't be seen by a user. It's also used by search engines to understand what an image contains to include it in search results. Here's an example:
<code>&lt;img src=&quot;importantLogo.jpeg&quot; alt=&quot;Company logo&quot;&gt;</code> <code>&lt;img src=&quot;importantLogo.jpeg&quot; alt=&quot;Company logo&quot;&gt;</code>
People with visual impairments rely on screen readers to convert web content to an audio interface. They won't get information if it's only presented visually. For images, screen readers can access the <code>alt</code> attribute and read its contents to deliver key information. People with visual impairments rely on screen readers to convert web content to an audio interface. They won't get information if it's only presented visually. For images, screen readers can access the <code>alt</code> attribute and read its contents to deliver key information.
Good <code>alt</code> text is short but descriptive, and meant to briefly convey the meaning of the image. You should always include an <code>alt</code> attribute on your image. Per HTML5 specification, this is now considered mandatory. Good <code>alt</code> text is short but descriptive and meant to briefly convey the meaning of the image. You should always include an <code>alt</code> attribute on your image. Per HTML5 specification, this is now considered mandatory.
</section> </section>
## Instructions ## Instructions
<section id='instructions'> <section id='instructions'>
Camper Cat happens to be both a coding ninja and an actual ninja, and is building a website to share his knowledge. The profile picture he wants to use shows his skills, and should be appreciated by all site visitors. Add an <code>alt</code> attribute in the <code>img</code> tag, that explains Camper Cat is doing karate. (The image <code>src</code> doesn't link to an actual file, so you should see the <code>alt</code> text in the display.) Camper Cat happens to be both a coding ninja and an actual ninja and is building a website to share his knowledge. The profile picture he wants to use shows his skills and should be appreciated by all site visitors. Add an <code>alt</code> attribute in the <code>img</code> tag, that explains Camper Cat is doing karate. (The image <code>src</code> doesn't link to an actual file, so you should see the <code>alt</code> text in the display.)
</section> </section>
## Tests ## Tests
@ -24,8 +24,8 @@ Camper Cat happens to be both a coding ninja and an actual ninja, and is buildin
```yml ```yml
tests: tests:
- text: Your <code>img</code> tag should have an <code>alt</code> attribute, and it should not be empty. - text: Your <code>img</code> tag should have an <code>alt</code> attribute and it should not be empty.
testString: assert($('img').attr('alt'), 'Your <code>img</code> tag should have an <code>alt</code> attribute, and it should not be empty.'); testString: assert($('img').attr('alt'), 'Your <code>img</code> tag should have an <code>alt</code> attribute and it should not be empty.');
``` ```