Freecodecamp: Alt attribute in img not recognized

[thefifthisa]

Challenge Name

Add Images to your Website

Issue Description

Tests do not recognize the alt attribute in the img element (see code below). I think it has something to do with the hyphen? Seems to work fine with an alt that doesn't have it.

Browser Information

• Browser Name, Version: Chrome 61.0.3163.100
• Operating System: Windows 10
• Mobile, Desktop, or Tablet: Desktop

Your Code

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  .red-text {
    color: red;
  }

  h2 {
    font-family: Lobster, Monospace;
  }

  p {
    font-size: 16px;
    font-family: Monospace;
  }
</style>

<h2 class="red-text">CatPhotoApp</h2>

<img src="https://bit.ly/fcc-relaxing-cat" alt="Cute upside-down kitten. ">

<p class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p class="red-text">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>

Screenshot

[username1001]

I looked into it, and I found this: https://github.com/freeCodeCamp/freeCodeCamp/issues/13672

According to the first comment, the hyphen is indeed breaking the check. So switching out the hyphen for something like "upside down cat" should be appropriate.

[thefifthisa]

@username1001 Got it! Are alt attributes not supposed to have hyphens or is it just for this particular test?

[username1001]

@thefifthisa I did some more digging because I had the same questions as you after reading your issue.
It seems that alt attributes should not use hyphens, and the reason behind this is SEO i.e. someone isn't going to do a search for 'cat-image', rather they'll search 'cat image'.

I think it should still pass the test, so you're right, the issue may be with FCC; though, I'm not an expert and would love to hear someone else's explanation.

[meutley]

It isn't a rule that the alt attribute cannot contain a hyphen. However, as @username1001 mentioned, SEO is one concern. Another is accessibility - screen readers use the alt attribute, and characters such as hyphens can be an inconvenience for those users.

Though I don't know the exact reason, this FCC challenge is designed to only allow whitespace (space, tab, line breaks), underscores, alphanumeric characters, commas, exclamation marks and periods in the alt attribute.

[4mifix]

https://www.w3schools.com/tags/att_img_alt.asp We as developers have to learn to use the resources that are available to solve some of these issues for ourselves. The link above will give you all of the information that you need on this and Google always works.

[raisedadead]

@meutley Thanks for your comment, yup indeed what you point is correct.

Suggested clarification could be added to the challenge:

Alt attribute hence ideally should not contain special chars unless needed.

That said, challenge should accept any chars, as per the spec (refer MDN).

[raisedadead]

@angelfeliz

Thanks for your interest in fixing. I think we do not need italicizing here.

Lets keep it like so;

All img elements must have an alt attribute. The text inside an alt attribute is used for screen readers to improve accessibility and is displayed if the image fails to load.

Ideally the alt attribute should not contain special chars unless needed.

That said, you would also have to work on the tests that are failing for special chars.

Happy coding!