Merge pull request #9288 from Bouncey/Fix/Imporove-Accessibility
Fix/Improve Accessibilty Practices
This commit is contained in:
Mrugesh Mohapatra
GitHub
@ -48,7 +48,7 @@
|
||||
"",
|
||||
"<p>Click here for <a href=\"#\">cat photos</a>.</p>",
|
||||
"",
|
||||
"<a href=\"#\"><img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
|
||||
"<a href=\"#\"><img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back. \"></a>",
|
||||
"",
|
||||
"<p>Things cats love:</p>",
|
||||
"<ul>",
|
||||
@ -141,7 +141,7 @@
|
||||
"",
|
||||
" <p>Click here for <a href=\"#\">cat photos</a>.</p>",
|
||||
"",
|
||||
" <a href=\"#\"><img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
|
||||
" <a href=\"#\"><img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back. \"></a>",
|
||||
"",
|
||||
" <p>Things cats love:</p>",
|
||||
" <ul>",
|
||||
@ -231,9 +231,9 @@
|
||||
"",
|
||||
" <p>Click here for <a href=\"#\">cat photos</a>.</p>",
|
||||
"",
|
||||
" <a href=\"#\"><img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
|
||||
" <a href=\"#\"><img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back. \"></a>",
|
||||
"",
|
||||
" <img src=\"https://bit.ly/fcc-running-cats\" class=\"img-responsive\">",
|
||||
" <img src=\"https://bit.ly/fcc-running-cats\" class=\"img-responsive\" alt=\"Three kittens running towards the camera. \">",
|
||||
" <p>Things cats love:</p>",
|
||||
" <ul>",
|
||||
" <li>cat nip</li>",
|
||||
@ -316,9 +316,9 @@
|
||||
"",
|
||||
" <p>Click here for <a href=\"#\">cat photos</a>.</p>",
|
||||
"",
|
||||
" <a href=\"#\"><img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
|
||||
" <a href=\"#\"><img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back. \"></a>",
|
||||
"",
|
||||
" <img src=\"https://bit.ly/fcc-running-cats\" class=\"img-responsive\">",
|
||||
" <img src=\"https://bit.ly/fcc-running-cats\" class=\"img-responsive\" alt=\"Three kittens running towards the camera. \">",
|
||||
"",
|
||||
" <p>Things cats love:</p>",
|
||||
" <ul>",
|
||||
@ -409,9 +409,9 @@
|
||||
"",
|
||||
" <p>Click here for <a href=\"#\">cat photos</a>.</p>",
|
||||
"",
|
||||
" <a href=\"#\"><img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
|
||||
" <a href=\"#\"><img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back. \"></a>",
|
||||
"",
|
||||
" <img src=\"https://bit.ly/fcc-running-cats\" class=\"img-responsive\">",
|
||||
" <img src=\"https://bit.ly/fcc-running-cats\" class=\"img-responsive\" alt=\"Three kittens running towards the camera. \">",
|
||||
" <button class=\"btn\">Like</button>",
|
||||
" <p>Things cats love:</p>",
|
||||
" <ul>",
|
||||
@ -511,9 +511,9 @@
|
||||
"",
|
||||
" <p>Click here for <a href=\"#\">cat photos</a>.</p>",
|
||||
"",
|
||||
" <a href=\"#\"><img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
|
||||
" <a href=\"#\"><img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back. \"></a>",
|
||||
"",
|
||||
" <img src=\"https://bit.ly/fcc-running-cats\" class=\"img-responsive\">",
|
||||
" <img src=\"https://bit.ly/fcc-running-cats\" class=\"img-responsive\" alt=\"Three kittens running towards the camera. \">",
|
||||
" <button class=\"btn btn-block\">Like</button>",
|
||||
" <p>Things cats love:</p>",
|
||||
" <ul>",
|
||||
@ -599,9 +599,9 @@
|
||||
"",
|
||||
" <p>Click here for <a href=\"#\">cat photos</a>.</p>",
|
||||
"",
|
||||
" <a href=\"#\"><img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
|
||||
" <a href=\"#\"><img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back. \"></a>",
|
||||
"",
|
||||
" <img src=\"https://bit.ly/fcc-running-cats\" class=\"img-responsive\">",
|
||||
" <img src=\"https://bit.ly/fcc-running-cats\" class=\"img-responsive\" alt=\"Three kittens running towards the camera. \">",
|
||||
" <button class=\"btn btn-block btn-primary\">Like</button>",
|
||||
" <p>Things cats love:</p>",
|
||||
" <ul>",
|
||||
@ -688,9 +688,9 @@
|
||||
"",
|
||||
" <p>Click here for <a href=\"#\">cat photos</a>.</p>",
|
||||
"",
|
||||
" <a href=\"#\"><img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
|
||||
" <a href=\"#\"><img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back. \"></a>",
|
||||
"",
|
||||
" <img src=\"https://bit.ly/fcc-running-cats\" class=\"img-responsive\">",
|
||||
" <img src=\"https://bit.ly/fcc-running-cats\" class=\"img-responsive\" alt=\"Three kittens running towards the camera. \">",
|
||||
" <button class=\"btn btn-block btn-primary\">Like</button>",
|
||||
" <button class=\"btn btn-block btn-info\">Info</button>",
|
||||
" <p>Things cats love:</p>",
|
||||
@ -783,9 +783,9 @@
|
||||
"",
|
||||
" <p>Click here for <a href=\"#\">cat photos</a>.</p>",
|
||||
"",
|
||||
" <a href=\"#\"><img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
|
||||
" <a href=\"#\"><img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back. \"></a>",
|
||||
"",
|
||||
" <img src=\"https://bit.ly/fcc-running-cats\" class=\"img-responsive\">",
|
||||
" <img src=\"https://bit.ly/fcc-running-cats\" class=\"img-responsive\" alt=\"Three kittens running towards the camera. \">",
|
||||
" <button class=\"btn btn-block btn-primary\">Like</button>",
|
||||
" <button class=\"btn btn-block btn-info\">Info</button>",
|
||||
" <button class=\"btn btn-block btn-danger\">Delete</button>",
|
||||
@ -884,9 +884,9 @@
|
||||
"",
|
||||
" <p>Click here for <a href=\"#\">cat photos</a>.</p>",
|
||||
"",
|
||||
" <a href=\"#\"><img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
|
||||
" <a href=\"#\"><img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back. \"></a>",
|
||||
"",
|
||||
" <img src=\"https://bit.ly/fcc-running-cats\" class=\"img-responsive\">",
|
||||
" <img src=\"https://bit.ly/fcc-running-cats\" class=\"img-responsive\" alt=\"Three kittens running towards the camera. \">",
|
||||
" <div class=\"row\">",
|
||||
" <div class=\"col-xs-4\">",
|
||||
" <button class=\"btn btn-block btn-primary\">Like</button>",
|
||||
@ -979,9 +979,9 @@
|
||||
"<div class=\"container-fluid\">",
|
||||
" <h2 class=\"text-primary text-center\">CatPhotoApp</h2>",
|
||||
"",
|
||||
" <a href=\"#\"><img class=\"img-responsive thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
|
||||
" <a href=\"#\"><img class=\"img-responsive thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back. \"></a>",
|
||||
"",
|
||||
" <img src=\"https://bit.ly/fcc-running-cats\" class=\"img-responsive\">",
|
||||
" <img src=\"https://bit.ly/fcc-running-cats\" class=\"img-responsive\" alt=\"Three kittens running towards the camera. \">",
|
||||
" <div class=\"row\">",
|
||||
" <div class=\"col-xs-4\">",
|
||||
" <button class=\"btn btn-block btn-primary\">Like</button>",
|
||||
@ -1077,9 +1077,9 @@
|
||||
"<div class=\"container-fluid\">",
|
||||
" <h2 class=\"text-primary text-center\">CatPhotoApp</h2>",
|
||||
"",
|
||||
" <a href=\"#\"><img class=\"img-responsive thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
|
||||
" <a href=\"#\"><img class=\"img-responsive thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back. \"></a>",
|
||||
"",
|
||||
" <img src=\"https://bit.ly/fcc-running-cats\" class=\"img-responsive\">",
|
||||
" <img src=\"https://bit.ly/fcc-running-cats\" class=\"img-responsive\" alt=\"Three kittens running towards the camera. \">",
|
||||
" <div class=\"row\">",
|
||||
" <div class=\"col-xs-4\">",
|
||||
" <button class=\"btn btn-block btn-primary\">Like</button>",
|
||||
@ -1178,10 +1178,10 @@
|
||||
" <h2 class=\"text-primary text-center\">CatPhotoApp</h2>",
|
||||
" </div>",
|
||||
" <div class=\"col-xs-4\">",
|
||||
" <a href=\"#\"><img class=\"img-responsive thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
|
||||
" <a href=\"#\"><img class=\"img-responsive thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back. \"></a>",
|
||||
" </div>",
|
||||
" </div>",
|
||||
" <img src=\"https://bit.ly/fcc-running-cats\" class=\"img-responsive\">",
|
||||
" <img src=\"https://bit.ly/fcc-running-cats\" class=\"img-responsive\" alt=\"Three kittens running towards the camera. \">",
|
||||
" <div class=\"row\">",
|
||||
" <div class=\"col-xs-4\">",
|
||||
" <button class=\"btn btn-block btn-primary\">Like</button>",
|
||||
@ -1273,10 +1273,10 @@
|
||||
" <h2 class=\"text-primary text-center\">CatPhotoApp</h2>",
|
||||
" </div>",
|
||||
" <div class=\"col-xs-4\">",
|
||||
" <a href=\"#\"><img class=\"img-responsive thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
|
||||
" <a href=\"#\"><img class=\"img-responsive thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back. \"></a>",
|
||||
" </div>",
|
||||
" </div>",
|
||||
" <img src=\"https://bit.ly/fcc-running-cats\" class=\"img-responsive\">",
|
||||
" <img src=\"https://bit.ly/fcc-running-cats\" class=\"img-responsive\" alt=\"Three kittens running towards the camera. \">",
|
||||
" <div class=\"row\">",
|
||||
" <div class=\"col-xs-4\">",
|
||||
" <button class=\"btn btn-block btn-primary\"><i class=\"fa fa-thumbs-up\"></i> Like</button>",
|
||||
@ -1357,10 +1357,10 @@
|
||||
" <h2 class=\"text-primary text-center\">CatPhotoApp</h2>",
|
||||
" </div>",
|
||||
" <div class=\"col-xs-4\">",
|
||||
" <a href=\"#\"><img class=\"img-responsive thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
|
||||
" <a href=\"#\"><img class=\"img-responsive thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back. \"></a>",
|
||||
" </div>",
|
||||
" </div>",
|
||||
" <img src=\"https://bit.ly/fcc-running-cats\" class=\"img-responsive\">",
|
||||
" <img src=\"https://bit.ly/fcc-running-cats\" class=\"img-responsive\" alt=\"Three kittens running towards the camera. \">",
|
||||
" <div class=\"row\">",
|
||||
" <div class=\"col-xs-4\">",
|
||||
" <button class=\"btn btn-block btn-primary\"><i class=\"fa fa-thumbs-up\"></i> Like</button>",
|
||||
@ -1442,10 +1442,10 @@
|
||||
" <h2 class=\"text-primary text-center\">CatPhotoApp</h2>",
|
||||
" </div>",
|
||||
" <div class=\"col-xs-4\">",
|
||||
" <a href=\"#\"><img class=\"img-responsive thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
|
||||
" <a href=\"#\"><img class=\"img-responsive thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back. \"></a>",
|
||||
" </div>",
|
||||
" </div>",
|
||||
" <img src=\"https://bit.ly/fcc-running-cats\" class=\"img-responsive\">",
|
||||
" <img src=\"https://bit.ly/fcc-running-cats\" class=\"img-responsive\" alt=\"Three kittens running towards the camera. \">",
|
||||
" <div class=\"row\">",
|
||||
" <div class=\"col-xs-4\">",
|
||||
" <button class=\"btn btn-block btn-primary\"><i class=\"fa fa-thumbs-up\"></i> Like</button>",
|
||||
@ -1534,10 +1534,10 @@
|
||||
" <h2 class=\"text-primary text-center\">CatPhotoApp</h2>",
|
||||
" </div>",
|
||||
" <div class=\"col-xs-4\">",
|
||||
" <a href=\"#\"><img class=\"img-responsive thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
|
||||
" <a href=\"#\"><img class=\"img-responsive thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back. \"></a>",
|
||||
" </div>",
|
||||
" </div>",
|
||||
" <img src=\"https://bit.ly/fcc-running-cats\" class=\"img-responsive\">",
|
||||
" <img src=\"https://bit.ly/fcc-running-cats\" class=\"img-responsive\" alt=\"Three kittens running towards the camera. \">",
|
||||
" <div class=\"row\">",
|
||||
" <div class=\"col-xs-4\">",
|
||||
" <button class=\"btn btn-block btn-primary\"><i class=\"fa fa-thumbs-up\"></i> Like</button>",
|
||||
@ -1635,10 +1635,10 @@
|
||||
" <h2 class=\"text-primary text-center\">CatPhotoApp</h2>",
|
||||
" </div>",
|
||||
" <div class=\"col-xs-4\">",
|
||||
" <a href=\"#\"><img class=\"img-responsive thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
|
||||
" <a href=\"#\"><img class=\"img-responsive thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back. \"></a>",
|
||||
" </div>",
|
||||
" </div>",
|
||||
" <img src=\"https://bit.ly/fcc-running-cats\" class=\"img-responsive\">",
|
||||
" <img src=\"https://bit.ly/fcc-running-cats\" class=\"img-responsive\" alt=\"Three kittens running towards the camera. \">",
|
||||
" <div class=\"row\">",
|
||||
" <div class=\"col-xs-4\">",
|
||||
" <button class=\"btn btn-block btn-primary\"><i class=\"fa fa-thumbs-up\"></i> Like</button>",
|
||||
|
||||
@ -1066,6 +1066,9 @@
|
||||
"You can add images to your website by using the <code>img</code> element, and point to a specific image's URL using the <code>src</code> attribute.",
|
||||
"An example of this would be:",
|
||||
"<code><img src=\"https://www.your-image-source.com/your-image.jpg\"></code>",
|
||||
"All <code>img</code> elements <strong>must</strong> have an <code>alt</code> attribute. The text inside an <code>alt</code> attribute is used for screen readers to improve accessibility and is displayed if the image fails to load.",
|
||||
"Lets add an <code>alt</code> attribute to our <code>img</code> example above:",
|
||||
"<code><img src=\"https://www.your-image-source.com/your-image.jpg\" alt=\"Author standing on a beach with two thumbs up. \"></code>",
|
||||
"Note that in most cases, <code>img</code> elements are self-closing.",
|
||||
"Try it with this image:",
|
||||
"<code>https://bit.ly/fcc-relaxing-cat</code>"
|
||||
@ -1094,7 +1097,8 @@
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"img\").length > 0, 'message: Your page should have an image element.');",
|
||||
"assert(new RegExp(\"\\/\\/bit.ly\\/fcc-relaxing-cat\", \"gi\").test($(\"img\").attr(\"src\")), 'message: Your image should have a <code>src</code> attribute that points to the kitten image.');"
|
||||
"assert(new RegExp(\"\\/\\/bit.ly\\/fcc-relaxing-cat\", \"gi\").test($(\"img\").attr(\"src\")), 'message: Your image should have a <code>src</code> attribute that points to the kitten image.');",
|
||||
"assert(code.match(/alt\\s*?=\\s*?(\\\"|\\')[\\s\\w\\.\\,\\!]+?(\\\"|\\')/), 'message: Your image element <strong>must</strong> have an <code>alt</code> attribute.');"
|
||||
],
|
||||
"type": "waypoint",
|
||||
"titleEs": "Añade imágenes a tu sitio web",
|
||||
@ -1164,7 +1168,7 @@
|
||||
"",
|
||||
"<h2 class=\"red-text\">CatPhotoApp</h2>",
|
||||
"",
|
||||
"<img src=\"https://bit.ly/fcc-relaxing-cat\">",
|
||||
"<img src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back. \">",
|
||||
"",
|
||||
"<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>"
|
||||
@ -1251,7 +1255,7 @@
|
||||
"",
|
||||
"<h2 class=\"red-text\">CatPhotoApp</h2>",
|
||||
"",
|
||||
"<img class=\"smaller-image\" src=\"https://bit.ly/fcc-relaxing-cat\">",
|
||||
"<img class=\"smaller-image\" src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back. \">",
|
||||
"",
|
||||
"<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>"
|
||||
@ -1330,7 +1334,7 @@
|
||||
"",
|
||||
"<h2 class=\"red-text\">CatPhotoApp</h2>",
|
||||
"",
|
||||
"<img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\">",
|
||||
"<img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back. \">",
|
||||
"",
|
||||
"<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>"
|
||||
@ -1400,7 +1404,7 @@
|
||||
"",
|
||||
"<h2 class=\"red-text\">CatPhotoApp</h2>",
|
||||
"",
|
||||
"<img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\">",
|
||||
"<img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back. \">",
|
||||
"",
|
||||
"<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>"
|
||||
@ -1485,7 +1489,7 @@
|
||||
"",
|
||||
"<h2 class=\"red-text\">CatPhotoApp</h2>",
|
||||
"",
|
||||
"<img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\">",
|
||||
"<img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back. \">",
|
||||
"",
|
||||
"<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>"
|
||||
@ -1577,7 +1581,7 @@
|
||||
"",
|
||||
"<a href=\"http://www.freecatphotoapp.com\">cat photos</a>",
|
||||
"",
|
||||
"<img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\">",
|
||||
"<img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back. \">",
|
||||
"",
|
||||
"<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>"
|
||||
@ -1662,7 +1666,7 @@
|
||||
"",
|
||||
"<p>Click here for <a href=\"http://www.freecatphotoapp.com\">cat photos</a>.</p>",
|
||||
"",
|
||||
"<img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\">",
|
||||
"<img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back. \">",
|
||||
"",
|
||||
"<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>"
|
||||
@ -1708,7 +1712,7 @@
|
||||
"description": [
|
||||
"You can make elements into links by nesting them within an <code>a</code> element.",
|
||||
"Nest your image within an <code>a</code> element. Here's an example:",
|
||||
"<code><a href=\"#\"><img src=\"https://bit.ly/fcc-running-cats\"></a></code>",
|
||||
"<code><a href=\"#\"><img src=\"https://bit.ly/fcc-running-cats\" alt=\"Three kittens running towards the camera. \"></a></code>",
|
||||
"Remember to use <code>#</code> as your <code>a</code> element's <code>href</code> property in order to turn it into a dead link.",
|
||||
"Place the existing image element within an anchor element.",
|
||||
"Once you've done this, hover over your image with your cursor. Your cursor's normal pointer should become the link clicking pointer. The photo is now a link."
|
||||
@ -1745,7 +1749,7 @@
|
||||
"",
|
||||
"<p>Click here for <a href=\"#\">cat photos</a>.</p>",
|
||||
"",
|
||||
"<img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\">",
|
||||
"<img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back. \">",
|
||||
"",
|
||||
"<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>"
|
||||
@ -1767,91 +1771,6 @@
|
||||
"titleDe": "Verlinke ein Bild",
|
||||
"challengeType": 0
|
||||
},
|
||||
{
|
||||
"id": "bad87fee1348bd9aedf08818",
|
||||
"descriptionPtBR": [
|
||||
"Os atributos <code>alt</code>, também conhecidos como <code>texto alternativo</code>, serão apresentados caso se por qualquer motivo o navegador não possa mostrar a imagem. Os atributos <code>alt</code> também são importantes para que usuários cegos ou com alguma deficiência visual possam entender o que uma imagem retrata. Além disso, os motores de busca também examinam os atributos <code>alt</code>.",
|
||||
"Em resumo: Todas as imagem devem ter um atributo <code>alt</code>!",
|
||||
"Você pode adicionar um atributo <code>alt</code> já no elemento <code>img</code> assim:",
|
||||
"<code><img src=\"www.your-image-source.com/your-image.jpg\" alt=\"seu texto alternativo\"></code>",
|
||||
"Adicione um atributo <code>alt</code> com o texto <code>A cute orange cat lying on its back</code> para a nossa foto com o gato."
|
||||
],
|
||||
"namePtBR": "Dê Acessibilidade a uma Imagem com Texto Alternativo",
|
||||
"descriptionDe": [
|
||||
"<code>alt</code> Attribute – auch <code>alt text</code> genannt – werden von Browsern angezeigt, wenn sie ein Bild nicht laden können. Für blinde oder visuell eingeschränkte Menschen sind sie ebenfalls wichtig um zu verstehen, was ein Bild darstellt. Zudem werden diese Texte von Suchmaschinen genutzt.",
|
||||
"Kurz gesagt: Jedes Bild sollte ein <code>alt</code> Attribut beinhalten!",
|
||||
"Du kannst das <code>alt</code> Attribut direkt in das Img Element einfügen:",
|
||||
"<code><img src=\"www.deine-bild-quelle.com/dein-bild.jpg\" alt=\"dein alt Text\"></code>",
|
||||
"Füge zu unserem Katzen-Bild ein <code>alt</code> Attribut mit dem Text \"A cute orange cat lying on its back\" hinzu."
|
||||
],
|
||||
"titleRU": "Добавьте альтернативный текст к изображению для улучшения доступа",
|
||||
"descriptionRU": [
|
||||
"Атрибуты <code>alt</code>, также известные как <code>alt text</code>, являются тем, что браузеры отобразят, если изображение загрузить не получится. Атрибуты <code>alt</code> важны для незрячих или пользователей с ограниченными возможностями в области зрения для понимания того, что отображает изображение. Также поисковые системы используют атрибуты <code>alt</code>.",
|
||||
"Вкратце, каждое изображение должно иметь атрибут <code>alt</code>!",
|
||||
"Вы можете добавить атрибут <code>alt</code> прямо в элемент <conde>img</code> следующим образом:",
|
||||
"<code><img src=\"www.your-image-source.com/your-image.jpg\" alt=\"ваш альтернативный текст\"></code>",
|
||||
"Добавьте атрибут <code>alt</code> с текстом <code>A cute orange cat lying on its back</code> к нашему фото кота."
|
||||
],
|
||||
"title": "Add Alt Text to an Image for Accessibility",
|
||||
"description": [
|
||||
"<code>alt</code> attributes, also known as <code>alt text</code>, are what browsers will display if they fail to load the image. <code>alt</code> attributes are also important for blind or visually impaired users to understand what an image portrays. And search engines also look at <code>alt</code> attributes.",
|
||||
"In short, every image should have an <code>alt</code> attribute!",
|
||||
"You can add an <code>alt</code> attribute right in the img element like this:",
|
||||
"<code><img src=\"www.your-image-source.com/your-image.jpg\" alt=\"your alt text\"></code>",
|
||||
"Add an <code>alt</code> attribute with the text <code>A cute orange cat lying on its back</code> to our cat photo."
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<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;",
|
||||
" }",
|
||||
"",
|
||||
" .thick-green-border {",
|
||||
" border-color: green;",
|
||||
" border-width: 10px;",
|
||||
" border-style: solid;",
|
||||
" border-radius: 50%;",
|
||||
" }",
|
||||
"",
|
||||
" .smaller-image {",
|
||||
" width: 100px;",
|
||||
" }",
|
||||
"</style>",
|
||||
"",
|
||||
"<h2 class=\"red-text\">CatPhotoApp</h2>",
|
||||
"",
|
||||
"<p>Click here for <a href=\"#\">cat photos</a>.</p>",
|
||||
"",
|
||||
"<a href=\"#\"><img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
|
||||
"",
|
||||
"<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>"
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"img\").filter(function(){ return /cat/gi.test(this.alt) }).length > 0, 'message: Your image element should have an <code>alt</code> attribute set to <code>A cute orange cat lying on its back</code>');"
|
||||
],
|
||||
"type": "waypoint",
|
||||
"titleEs": "Agrega texto alternativo a una imagen para dar Accesibilidad",
|
||||
"descriptionEs": [
|
||||
"Los atributos <code>alt</code> también conocidos como <code>texto alternativo</code>, son lo que se presentarán en caso que el navegador no pueda mostrar la imagen. Los atributos <code>alt</code> también son importantes para los usuarios ciegos o con deficiencia visual para entender lo que una imagen retrata. Los motores de búsqueda también examinan los atributos <code>alt</code>. ",
|
||||
"En resumen, ¡cada imagen debe tener un atributo <code>alt</code>!",
|
||||
"Puedes agregar un atributo <code>alt</code> justo en el elemento <code>img</code> así:",
|
||||
"<code><img src=\"www.fuente-de-tu-imagen.com/tu-imagen.jpg\" alt=\"tu texto alternativo\"></code>",
|
||||
"Añade un atributo <code>alt</code> con el texto <code>A cute orange cat lying on its back</code> a nuestra foto del gato."
|
||||
],
|
||||
"titleDe": "Füge Alt Text für mehr Barrierefreiheit hinzu",
|
||||
"challengeType": 0
|
||||
},
|
||||
{
|
||||
"id": "bad87fee1348bd9aedf08827",
|
||||
"descriptionPtBR": [
|
||||
@ -1924,7 +1843,7 @@
|
||||
"",
|
||||
"<p>Click here for <a href=\"#\">cat photos</a>.</p>",
|
||||
"",
|
||||
"<a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
|
||||
"<a href=\"#\"><img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back. \"></a>",
|
||||
"",
|
||||
"<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>"
|
||||
@ -2020,7 +1939,7 @@
|
||||
"",
|
||||
"<p>Click here for <a href=\"#\">cat photos</a>.</p>",
|
||||
"",
|
||||
"<a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
|
||||
"<a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back. \" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
|
||||
"",
|
||||
"<p>Things cats love:</p>",
|
||||
"<ul>",
|
||||
@ -2121,7 +2040,7 @@
|
||||
"",
|
||||
"<p>Click here for <a href=\"#\">cat photos</a>.</p>",
|
||||
"",
|
||||
"<a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
|
||||
"<a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back. \" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
|
||||
"",
|
||||
"<p>Things cats love:</p>",
|
||||
"<ul>",
|
||||
@ -2213,7 +2132,7 @@
|
||||
"",
|
||||
"<p>Click here for <a href=\"#\">cat photos</a>.</p>",
|
||||
"",
|
||||
"<a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
|
||||
"<a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back. \" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
|
||||
"",
|
||||
"<p>Things cats love:</p>",
|
||||
"<ul>",
|
||||
@ -2306,7 +2225,7 @@
|
||||
"",
|
||||
"<p>Click here for <a href=\"#\">cat photos</a>.</p>",
|
||||
"",
|
||||
"<a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
|
||||
"<a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back. \" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
|
||||
"",
|
||||
"<p>Things cats love:</p>",
|
||||
"<ul>",
|
||||
@ -2399,7 +2318,7 @@
|
||||
"",
|
||||
"<p>Click here for <a href=\"#\">cat photos</a>.</p>",
|
||||
"",
|
||||
"<a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
|
||||
"<a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back. \" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
|
||||
"",
|
||||
"<p>Things cats love:</p>",
|
||||
"<ul>",
|
||||
@ -2498,7 +2417,7 @@
|
||||
"",
|
||||
"<p>Click here for <a href=\"#\">cat photos</a>.</p>",
|
||||
"",
|
||||
"<a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
|
||||
"<a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back. \" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
|
||||
"",
|
||||
"<p>Things cats love:</p>",
|
||||
"<ul>",
|
||||
@ -2605,7 +2524,7 @@
|
||||
"",
|
||||
"<p>Click here for <a href=\"#\">cat photos</a>.</p>",
|
||||
"",
|
||||
"<a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
|
||||
"<a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back. \" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
|
||||
"",
|
||||
"<p>Things cats love:</p>",
|
||||
"<ul>",
|
||||
@ -2719,7 +2638,7 @@
|
||||
"",
|
||||
"<p>Click here for <a href=\"#\">cat photos</a>.</p>",
|
||||
"",
|
||||
"<a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
|
||||
"<a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back. \" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
|
||||
"",
|
||||
"<p>Things cats love:</p>",
|
||||
"<ul>",
|
||||
@ -2821,7 +2740,7 @@
|
||||
"",
|
||||
"<p>Click here for <a href=\"#\">cat photos</a>.</p>",
|
||||
"",
|
||||
"<a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
|
||||
"<a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back. \" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
|
||||
"",
|
||||
"<p>Things cats love:</p>",
|
||||
"<ul>",
|
||||
@ -2925,7 +2844,7 @@
|
||||
"",
|
||||
"<p>Click here for <a href=\"#\">cat photos</a>.</p>",
|
||||
"",
|
||||
"<a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
|
||||
"<a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back. \" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
|
||||
"",
|
||||
"<p>Things cats love:</p>",
|
||||
"<ul>",
|
||||
@ -3016,7 +2935,7 @@
|
||||
"",
|
||||
"<p>Click here for <a href=\"#\">cat photos</a>.</p>",
|
||||
"",
|
||||
"<a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
|
||||
"<a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back. \" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
|
||||
"",
|
||||
"<div>",
|
||||
" <p>Things cats love:</p>",
|
||||
@ -3128,7 +3047,7 @@
|
||||
"",
|
||||
"<p>Click here for <a href=\"#\">cat photos</a>.</p>",
|
||||
"",
|
||||
"<a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
|
||||
"<a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back. \" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
|
||||
"",
|
||||
"<div class=\"silver-background\">",
|
||||
" <p>Things cats love:</p>",
|
||||
@ -3242,7 +3161,7 @@
|
||||
"",
|
||||
"<p>Click here for <a href=\"#\">cat photos</a>.</p>",
|
||||
"",
|
||||
"<a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
|
||||
"<a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back. \" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
|
||||
"",
|
||||
"<div class=\"silver-background\">",
|
||||
" <p>Things cats love:</p>",
|
||||
|
||||
@ -289,7 +289,7 @@
|
||||
"We've seen from the last two lessons that each object in our JSON array contains an <code>imageLink</code> key with a value that is the URL of a cat's image.",
|
||||
"When we're looping through these objects, let's use this <code>imageLink</code> property to display this image in an <code>img</code> element.",
|
||||
"Here's the code that does this:",
|
||||
"<code>html += \"<img src = '\" + val.imageLink + \"'>\";</code>"
|
||||
"<code>html += \"<img src = '\" + val.imageLink + \"' \" + \"alt='\" + val.altText + \"'>\";</code>"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"fccss",
|
||||
@ -349,14 +349,14 @@
|
||||
"Hemos visto en las dos últimas lecciones que cada objeto en nuestro vector JSON contiene una llave <code>imageLink</code> con un valor que corresponde a la URL de la imagen de un gato.",
|
||||
"Cuando estamos recorriendo estos objetos, usemos esta propiedad <code>imageLink</code> para visualizar la imagen en un elemento <code>img</code>.",
|
||||
"Aquí está el código que hace esto:",
|
||||
"<code>html += \"<img src = '\" + val.imageLink + \"'>\";</code>"
|
||||
"<code>html += \"<img src = '\" + val.imageLink + \"' \" + \"alt='\" + val.altText + \"'>\";</code>"
|
||||
],
|
||||
"titlePt": "Apresentar as imagens da fonte de dados",
|
||||
"descriptionPt": [
|
||||
"Como temos visto nas ultimas lições, cada objeto em nosso array JSON contém a chave <code>imageLink</code> com um valor que corresponde a URL da imagem de um gato.",
|
||||
"Quando estamos percorrendo por estes objetos, usamos a propriedade <code>imageLink</code> para visualizar a imagem em um elemento <code>img</code>.",
|
||||
"Aqui está o código para fazer isso:",
|
||||
"<code>html += \"<img src = '\" + val.imageLink + \"'>\";</code>"
|
||||
"<code>html += \"<img src = '\" + val.imageLink + \"' \" + \"alt='\" + val.altText + \"'>\";</code>"
|
||||
]
|
||||
},
|
||||
{
|
||||
@ -387,7 +387,7 @@
|
||||
"",
|
||||
" html += \"<div class = 'cat'>\"",
|
||||
"",
|
||||
" html += \"<img src = '\" + val.imageLink + \"'>\"",
|
||||
" html += \"<img src = '\" + val.imageLink + \"' \" + \"alt='\" + val.altText + \"'>\"",
|
||||
"",
|
||||
" html += \"</div>\"",
|
||||
"",
|
||||
|
||||
Reference in New Issue
Block a user