freeCodeCamp/give-links-meaning-by-using-descriptive-link-text.english.md at d69c0592ec762978bd33ba34cee45a4deae2f324

Files

Randell Dawson 9bf3fdbf38 fix(curriculum): changed challenge test text to use the word should for Responsive Web Design (#36860 )

* fix: changed challenge test text to use should

* fix: changed have to be used in

Co-Authored-By: Tom <20648924+moT01@users.noreply.github.com>

* fix: reworded test verbiage

Co-Authored-By: Tom <20648924+moT01@users.noreply.github.com>

* fix: improved test verbiage

Co-Authored-By: Tom <20648924+moT01@users.noreply.github.com>

* fix: improved test verbiage

Co-Authored-By: Tom <20648924+moT01@users.noreply.github.com>

* fix: corrected typo

Co-Authored-By: Tom <20648924+moT01@users.noreply.github.com>

* fix: corrected typo

Co-Authored-By: Tom <20648924+moT01@users.noreply.github.com>

* fix: changed have the to be used in

Co-Authored-By: Tom <20648924+moT01@users.noreply.github.com>

* fix: corrected verbiage

Co-Authored-By: Parth Parth <34807532+thecodingaviator@users.noreply.github.com>

2019-11-20 20:15:19 +05:30

2.7 KiB

Raw Blame History

id, title, challengeType, videoUrl, forumTopicId

id	title	challengeType	videoUrl	forumTopicId
587d778f367417b2b2512aae	Give Links Meaning by Using Descriptive Link Text	0	https://scrimba.com/c/c437DcV	301013

Description

Screen reader users have different options for what type of content their device reads. This includes skipping to (or over) landmark elements, jumping to the main content, or getting a page summary from the headings. Another option is to only hear the links available on a page. Screen readers do this by reading the link text, or what's between the anchor (a) tags. Having a list of "click here" or "read more" links isn't helpful. Instead, you should use brief but descriptive text within the a tags to provide more meaning for these users.

Instructions

The link text that Camper Cat is using is not very descriptive without the surrounding context. Move the anchor (a) tags so they wrap around the text "information about batteries" instead of "Click here".

Tests

tests:
  - text: Your code should move the anchor <code>a</code> tags from around the words "Click here" to wrap around the words "information about batteries".
    testString: assert($('a').text().match(/^(information about batteries)$/g));
  - text: The <code>a</code> element should have an <code>href</code> attribute with a value of an empty string <code>""</code>.
    testString: assert($('a').attr('href') === '');
  - text: The <code>a</code> element should have a closing tag.
    testString: assert(code.match(/<\/a>/g) && code.match(/<\/a>/g).length === code.match(/<a href=(''|"")>/g).length);

Challenge Seed

<body>
  <header>
    <h1>Deep Thoughts with Master Camper Cat</h1>
  </header>
  <article>
    <h2>Defeating your Foe: the Red Dot is Ours!</h2>
    <p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightening speed. But chin up, fellow fighters, our time for victory may soon be near. <a href="">Click here</a> for information about batteries</p>
  </article>
</body>

Solution

<body>
  <header>
    <h1>Deep Thoughts with Master Camper Cat</h1>
  </header>
  <article>
    <h2>Defeating your Foe: the Red Dot is Ours!</h2>
    <p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightening speed. But chin up, fellow fighters, our time for victory may soon be near. Click here for <a href="">information about batteries</a></p>
  </article>
</body>

2.7 KiB Raw Blame History