![](\"doingKarateWow.jpeg\")
"
],
"tests": [
"assert($('img').attr('alt'), 'message: Your Defeating your Foe: the Red Dot is Ours!
", "To Come...
", "main tags should be between the closing header tag and the opening footer tag.');"
],
"solutions": [],
"hints": [],
"type": "waypoint",
"challengeType": 0,
"translations": {}
},
{
"id": "587d774e367417b2b2512aa0",
"title": "Wrap Content in the Article Element",
"description": [
"Article is another one of the new HTML5 elements that adds semantic meaning to your markup. Article is a sectioning element, and is used to wrap independent, self-contained content. The tag works well with blog entries, forum posts, or news articles.",
"Determining whether content can stand alone is usually a judgement call, but there are a couple simple tests you can use. Ask yourself if you removed all surrounding context, would that content still make sense? Similarly for text, would the content hold up if it were in an RSS feed?",
"Remember that folks using assistive technologies rely on organized, semantically meaningful markup to better understand your work.",
"Note about section and divThe
section element is also new with HTML5, and has a slightly different semantic meaning than article. An article is for standalone content, and a section is for grouping thematically related content. They can be used within each other, as needed. For example, if a book is the article, then each chapter is a section. When there's no relationship between groups of content, then use a div.",
"<div> - blocks content", "
<section> - blocks related content
<article> - blocks independent, self-contained content
", "Camper Cat used
article tags to wrap the posts on his blog page, but he forgot to use them around the top one. Change the div tag to use an article tag instead."
],
"challengeSeed": [
"Deep Thoughts with Master Camper Cat
", "",
"
",
"",
" The Garfield Files: Lasagna as Training Fuel?
", "The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...
", "![\"\"](\"samuraiSwords.jpeg\")
",
"",
" Defeating your Foe: the Red Dot is Ours!
", "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...
", "",
"",
" Is Chuck Norris a Cat Person?
", "Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...
", "article tags.');",
"assert($('div').length == 0, 'message: Your code should not have any div tags.');"
],
"solutions": [],
"hints": [],
"type": "waypoint",
"challengeType": 0,
"translations": {}
},
{
"id": "587d7787367417b2b2512aa1",
"title": "Make Screen Reader Navigation Easier with the Header Landmark",
"description": [
"The next HTML5 element that adds semantic meaning and improves accessibility is the header tag. It's used to wrap introductory information or navigation links for its parent tag, and works well around content that's repeated at the top on multiple pages.",
"Header shares the embedded landmark feature you saw with main, allowing assistive technologies to quickly navigate to that content.",
"NoteHeader is meant for use in the body tag of your HTML document. This is different than the head element, which contains the page's title, meta information, etc.",
"", "Camper Cat is writing some great articles about ninja training, and wants to add a page for them to his site. Change the top
div that currently contains the h1 to a header tag instead."
],
"challengeSeed": [
"",
"",
" ",
"
",
"",
"",
" Training with Camper Cat
", "Stealth & Agility Training
", "Climb foliage quickly using a minimum spanning tree approach
No training is NP-complete without parkour
Combat Training
", "Dispatch multiple enemies with multithreaded tactics
Goodbye world: 5 proven ways to knock out an opponent
Weapons Training
", "Swords: the best tool to literally divide and conquer
Breadth-first or depth-first in multi-weapon training?
header tag.');",
"assert($('header').children('h1').length == 1, 'message: Your header tags should wrap around the h1.');",
"assert($('div').length == 0, 'message: Your code should not have any div tags.');"
],
"solutions": [],
"hints": [],
"type": "waypoint",
"challengeType": 0,
"translations": {}
},
{
"id": "587d7788367417b2b2512aa2",
"title": "Make Screen Reader Navigation Easier with the Nav Landmark",
"description": [
"The nav element is another HTML5 item with the embedded landmark feature for easy screen reader navigation. This tag is meant to wrap around the main navigation links in your page.",
"If there are repeated site links at the bottom of the page, it isn't necessary to markup those with a nav tag as well. Using a footer (covered in the next challenge) is sufficient.",
"", "Camper Cat included navigation links at the top of his training page, but wrapped them in a
div. Change the div to a nav tag to improve the accessibility on his page."
],
"challengeSeed": [
"",
" Training with Camper Cat
", "", "",
"
",
"",
" - ",
"
- Stealth & Agility ", "
- Combat ", "
- Weapons ", "
Stealth & Agility Training
", "Climb foliage quickly using a minimum spanning tree approach
No training is NP-complete without parkour
Combat Training
", "Dispatch multiple enemies with multithreaded tactics
Goodbye world: 5 proven ways to knock out an opponent
Weapons Training
", "Swords: the best tool to literally divide and conquer
Breadth-first or depth-first in multi-weapon training?
nav tag.');",
"assert($('nav').children('ul').length == 1, 'message: Your nav tags should wrap around the ul and its list items.');",
"assert($('div').length == 0, 'message: Your code should not have any div tags.');"
],
"solutions": [],
"hints": [],
"type": "waypoint",
"challengeType": 0,
"translations": {}
},
{
"id": "587d7788367417b2b2512aa3",
"title": "Make Screen Reader Navigation Easier with the Footer Landmark",
"description": [
"Similar to header and nav, the footer element has a built-in landmark feature that allows assistive devices to quickly navigate to it. It's primarily used to contain copyright information or links to related documents that usually sit at the bottom of a page.",
"", "Camper Cat's training page is making good progress. Change the
div he used to wrap his copyright information at the bottom of the page to a footer element."
],
"challengeSeed": [
"",
" Training
", " ", "Stealth & Agility Training
", "Climb foliage quickly using a minimum spanning tree approach
No training is NP-complete without parkour
Combat Training
", "Dispatch multiple enemies with multithreaded tactics
Goodbye world: 5 proven ways to knock out an opponent
Weapons Training
", "Swords: the best tool to literally divide and conquer
Breadth-first or depth-first in multi-weapon training?
© 2016 Camper Cat
",
"",
"",
""
],
"tests": [
"assert($('footer').length == 1, 'message: Your code should have one footer tag.');",
"assert($('div').length == 0, 'message: Your code should not have any div tags.');"
],
"solutions": [],
"hints": [],
"type": "waypoint",
"challengeType": 0,
"translations": {}
},
{
"id": "587d7789367417b2b2512aa4",
"title": "Improve Accessibility of Audio Content with the Audio Element",
"description": [
"HTML5's audio element gives semantic meaning when it wraps sound or audio stream content in your markup. Audio content also needs a text alternative to be accessible to the deaf or hard of hearing. This can be done with nearby text on the page or a link to a transcript.",
"The audio tag supports the controls attribute. This shows the browser default play, pause, and other controls, and supports keyboard functionality. This is a boolean attribute, meaning it doesn't need a value, it's presence on the tag turns the setting on.",
"Here's an example:",
"<audio id="meowClip" controls>", "Note
<source src="audio/meow.mp3" type="audio/mpeg" />
<source src="audio/meow.ogg" type="audio/ogg" />
</audio>
Multimedia content usually has both visual and auditory components. It needs synchronized captions and a transcript so users with visual and/or auditory impairments can access it. Generally, a web developer is not responsible for creating the captions or transcript, but needs to know to include them.", "
", "Time to take a break from Camper Cat and meet fellow camper Zersiax (@zersiax), a champion of accessibility and a screen reader user. To hear a clip of his screen reader in action, add an
audio element after the p. Include the controls attribute. Then place a source tag inside the audio tags with the src attribute set to \"https://s3.amazonaws.com/freecodecamp/screen-reader.mp3\" and type attribute set to \"audio/mpeg\"."
],
"challengeSeed": [
"",
" Real Coding Ninjas
", "A sound clip of Zersiax's screen reader in action.
", " ", " ", " ", "audio tag.');",
"assert($('audio').attr('controls'), 'message: The audio tag should have the controls attribute.');",
"assert($('source').length === 1, 'message: Your code should have one source tag.');",
"assert($('audio').children('source').length === 1, 'message: Your source tag should be inside the audio tags.');",
"assert($('source').attr('src') === 'https://s3.amazonaws.com/freecodecamp/screen-reader.mp3', 'message: The value for the src attribute on the source tag should match the link in the instructions exactly.');",
"assert($('source').attr('type') === 'audio/mpeg', 'message: Your code should include a type attribute on the source tag with a value of audio/mpeg.');"
],
"solutions": [],
"hints": [],
"type": "waypoint",
"challengeType": 0,
"translations": {}
},
{
"id": "587d778a367417b2b2512aa5",
"title": "Improve Chart Accessibility with the Figure Element",
"description": [
"HTML5 introduced the figure element, along with the related figcaption. Used together, these items wrap a visual representation (like an image, diagram, or chart) along with its caption. This gives a two-fold accessibility boost by both semantically grouping related content, and providing a text alternative that explains the figure.",
"For data visualizations like charts, the caption can be used to briefly note the trends or conclusions for users with visual impairments. Another challenge covers how to move a table version of the chart's data off-screen (using CSS) for screen reader users.",
"Here's an example - note that the figcaption goes inside the figure tags and can be combined with other elements:",
"<figure>", "
<img src="roundhouseDestruction.jpeg" alt="Photo of Camper Cat executing a roundhouse kick">
<br>
<figcaption>
Master Camper Cat demonstrates proper form of a roundhouse kick.
</figcaption>
</figure>
", "Camper Cat is hard at work creating a stacked bar chart showing the amount of time per week to spend training in stealth, combat, and weapons. Help him structure his page better by changing the
div tag he used to a figure tag, and the p tag that surrounds the caption to a figcaption tag."
],
"challengeSeed": [
"",
" Training
", " ", "",
" ",
"
", "
",
" ",
" ",
" ", "
Breakdown per week of time to spend training in stealth, combat, and weapons.
", "Stealth & Agility Training
", "Climb foliage quickly using a minimum spanning tree approach
No training is NP-complete without parkour
Combat Training
", "Dispatch multiple enemies with multithreaded tactics
Goodbye world: 5 proven ways to knock out an opponent
Weapons Training
", "Swords: the best tool to literally divide and conquer
Breadth-first or depth-first in multi-weapon training?
figure tag.');",
"assert($('figcaption').length == 1, 'message: Your code should have one figcaption tag.');",
"assert($('div').length == 0, 'message: Your code should not have any div tags.');",
"assert($('p').length == 0, 'message: Your code should not have any p tags.');",
"assert($('figure').children('figcaption').length == 1, 'message: The figcaption should be a child of the figure tag.');"
],
"solutions": [],
"hints": [],
"type": "waypoint",
"challengeType": 0,
"translations": {}
},
{
"id": "587d778a367417b2b2512aa6",
"title": "Improve Form Field Accessibility with the Label Element",
"description": [
"Improving accessibility with semantic HTML markup applies to using both appropriate tag names as well as attributes. The next several challenges cover some important scenarios using attributes in forms.",
"The label tag wraps the text for a specific form control item, usually the name or label for a choice. This ties meaning to the item and makes the form more readable. The for attribute on a label tag explicitly associates that label with the form control and is used by screen readers.",
"The value of the for attribute must be the same as the value of the id attribute of the form control. Here's an example:",
"<form>", "
<label for="name">Name:</label>
<input type="text" id="name" name="name">
</form>
", "Camper Cat expects a lot of interest in his thoughtful blog posts, and wants to include an email sign up form. Add a
for attribute on the email label that matches the id on its input field."
],
"challengeSeed": [
"",
" Deep Thoughts with Master Camper Cat
", "The Garfield Files: Lasagna as Training Fuel?
", "The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...
", "",
" Defeating your Foe: the Red Dot is Ours!
", "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...
", "",
" Is Chuck Norris a Cat Person?
", "Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...
", "for attribute on the label tag that is not empty.');",
"assert($('label').attr('for') == 'email', 'message: Your for attribute value should match the id value on the email input.');"
],
"solutions": [],
"hints": [],
"type": "waypoint",
"challengeType": 0,
"translations": {}
},
{
"id": "587d778b367417b2b2512aa7",
"title": "Wrap Radio Buttons in a Fieldset Element for Better Accessibility",
"description": [
"The next form topic covers accessibility of radio buttons. Each choice is given a label with a for attribute tying to the id of the corresponding item as covered in the last challenge. Since radio buttons often come in a group where the user must choose one, there's a way to semantically show the choices are part of a set.",
"The fieldset tag surrounds the entire grouping of radio buttons to achieve this. It often uses a legend tag to provide a description for the grouping, which is read by screen readers for each choice in the fieldset element.",
"The fieldset wrapper and legend tag are not necessary when the choices are self-explanatory, like a gender selection. Using a label with the for attribute for each radio button is sufficient.",
"Here's an example:",
"<form>", "
<fieldset>
<legend>Choose one of these three items:</legend>
<input id="one" type="radio" name="items" value="one">
<label for="one">Choice One</label><br>
<input id="two" type="radio" name="items" value="two">
<label for="two">Choice Two</label><br>
<input id="three" type="radio" name="items" value="three">
<label for="three">Choice Three</label>
</fieldset>
</form>
", "Camper Cat wants information about the ninja level of his users when they sign up for his email list. He's added a set of radio buttons, and learned from our last lesson to use label tags with
for attributes for each choice. Go Camper Cat! However, his code still needs some help. Change the div tag surrounding the radio buttons to a fieldset tag, and change the p tag inside it to a legend."
],
"challengeSeed": [
"",
" Deep Thoughts with Master Camper Cat
", "The Garfield Files: Lasagna as Training Fuel?
", "The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...
", "",
" Defeating your Foe: the Red Dot is Ours!
", "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...
", "",
" Is Chuck Norris a Cat Person?
", "Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...
", "fieldset tag around the radio button set.');",
"assert($('legend').length == 1, 'message: Your code should have a legend tag around the text asking what level ninja a user is.');",
"assert($('div').length == 0, 'message: Your code should not have any div tags.');",
"assert($('p').length == 4, 'message: Your code should no longer have a p tag around the text asking what level ninja a user is.');"
],
"solutions": [],
"hints": [],
"type": "waypoint",
"challengeType": 0,
"translations": {}
},
{
"id": "587d778b367417b2b2512aa8",
"title": "Add an Accessible Date Picker",
"description": [
"Forms often include the input field, which can be used to create several different form controls. The type attribute on this element indicates what kind of input will be created.",
"You may have noticed the text and submit input types in prior challenges, and HTML5 introduced an option to specify a date field. Depending on browser support, a date picker shows up in the input field when it's in focus, which makes filling in a form easier for all users.",
"For older browsers, the type will default to text, so it helps to show users the expected date format in the label or as placeholder text just in case.",
"Here's an example:",
"<label for="input1">Enter a date:</label>", "
<input type="date" id="input1" name="input1">
", "Camper Cat is setting up a mortal combat tournament and wants to ask his competitors to see what date works best. Add an
input tag with a type attribute of \"date\", an id attribute of \"pickdate\", and a name attribute of \"date\"."
],
"challengeSeed": [
"",
" Tournaments
", "Mortal Combat Tournament Survey
", " ", "input tag for the date selector field.');",
"assert($('input').attr('type') == 'date', 'message: Your input tag should have a type attribute with a value of date.');",
"assert($('input').attr('id') == 'pickdate', 'message: Your input tag should have an id attribute with a value of pickdate.');",
"assert($('input').attr('name') == 'date', 'message: Your input tag should have a name attribute with a value of date.');"
],
"solutions": [],
"hints": [],
"type": "waypoint",
"challengeType": 0,
"translations": {}
},
{
"id": "587d778c367417b2b2512aa9",
"title": "Standardize Times with the HTML5 Datetime Attribute",
"description": [
"Continuing with the date theme, HTML5 also introduced the time element along with a datetime attribute to standardize times. This is an inline element that can wrap a date or time on a page. A valid format of that date is held by the datetime attribute. This is the value accessed by assistive devices. It helps avoid confusion by stating a standardized version of a time, even if it's written in an informal or colloquial manner in the text.",
"Here's an example:",
"<p>Master Camper Cat officiated the cage match between Goro and Scorpion <time datetime="2013-02-13">last Wednesday</time>, which ended in a draw.</p>",
"", "Camper Cat's mortal combat survey results are in! Wrap a
time tag around the text \"Thursday, September 15<sup>th</sup>\" and add a datetime attribute to it set to \"2016-09-15\"."
],
"challengeSeed": [
"",
" Tournaments
", "Mortal Combat Tournament Survey Results
", " ", " ", " ", "Thank you to everyone for responding to Master Camper Cat's survey. The best day to host the vaunted Mortal Combat tournament is Thursday, September 15th. May the best ninja win!
", " ", " ", " ", "Comments:
", "Posted by: Sub-Zero on
", "Johnny Cage better be there, I'll finish him!
", "Posted by: Doge on
", "Wow, much combat, so mortal.
", "Posted by: The Grim Reaper on
", "Looks like I'll be busy that day.
", "time tags should wrap around the text \"Thursday, September 15<sup>th</sup>\".');",
"assert($('time').attr('datetime'), 'message: Your time tag should have a datetime attribute that is not empty.');",
"assert($('time').attr('datetime') === \"2016-09-15\", 'message: Your datetime attribute should be set to a value of 2016-09-15.');"
],
"solutions": [],
"hints": [],
"type": "waypoint",
"challengeType": 0,
"translations": {}
},
{
"id": "587d778d367417b2b2512aaa",
"title": "Make Elements Only Visible to a Screen Reader by Using Custom CSS",
"description": [
"Have you noticed that all of the applied accessibility challenges so far haven't used any CSS? This is to show the importance of a logical document outline, and using semantically meaningful tags around your content before introducing the visual design aspect.",
"However, CSS's magic can also improve accessibility on your page when you want to visually hide content meant only for screen readers. This happens when information is in a visual format (like a chart), but screen reader users need an alternative presentation (like a table) to access the data. CSS is used to position the screen reader-only elements off the visual area of the browser window.",
"Here's an example of the CSS rules that accomplish this:",
".sr-only {", "Note
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
top: auto;
overflow: hidden;
}
The following CSS approaches will NOT do the same thing:", "
- ",
"
display: none;orvisibility: hidden;hides content for everyone, including screen reader users ",
"- Zero values for pixel sizes, such as
width: 0px; height: 0px;removes that element from the flow of your document, meaning screen readers will ignore it ",
"
", "Camper Cat created a really cool stacked bar chart for his training page, and put the data into a table for his visually impaired users. The table already has an
sr-only class, but the CSS rules aren't filled in yet. Give the position an absolute value, the left a -10000px value, and the width and height both 1px values."
],
"challengeSeed": [
"",
" ",
"",
"",
" Training
", " ", "Master Camper Cat's Beginner Three Week Training Program
", "[Stacked bar chart]
", "", "
| ", " | Stealth & Agility | ", "Combat | ", "Weapons | ", "Total | ", "
|---|---|---|---|---|
| Week One | ", "3 | ", "5 | ", "2 | ", "10 | ", "
| Week Two | ", "4 | ", "5 | ", "3 | ", "12 | ", "
| Week Three | ", "4 | ", "6 | ", "3 | ", "13 | ", "
Stealth & Agility Training
", "Climb foliage quickly using a minimum spanning tree approach
No training is NP-complete without parkour
Combat Training
", "Dispatch multiple enemies with multithreaded tactics
Goodbye, world: 5 proven ways to knock out an opponent
Weapons Training
", "Swords: the best tool to literally divide and conquer
Breadth-first or depth-first in multi-weapon training?
position property of the sr-only class to a value of absolute.');",
"assert($('.sr-only').css('left') == '-10000px', 'message: Your code should set the left property of the sr-only class to a value of -10000px.');",
"assert(code.match(/width:\\s*?1px/gi), 'message: Your code should set the width property of the sr-only class to a value of 1 pixel.');",
"assert(code.match(/height:\\s*?1px/gi), 'message: Your code should set the height property of the sr-only class to a value of 1 pixel.');"
],
"solutions": [],
"hints": [],
"type": "waypoint",
"challengeType": 0,
"translations": {}
},
{
"id": "587d778e367417b2b2512aab",
"title": "Improve Readability with High Contrast Text",
"description": [
"Low contrast between the foreground and background colors can make text difficult to read. Sufficient contrast improves the readability of your content, but what exactly does \"sufficient\" mean?",
"The Web Content Accessibility Guidelines (WCAG) recommend at least a 4.5 to 1 contrast ratio for normal text. The ratio is calculated by comparing the relative luminance values of two colors. This ranges from 1:1 for the same color, or no contrast, to 21:1 for white against black, the strongest contrast. There are many contrast checking tools available online that calculate this ratio for you.",
"", "Camper Cat's choice of light gray text on a white background for his recent blog post has a 1.5:1 contrast ratio, making it hard to read. Change the
color of the text from the current gray (#D3D3D3) to a darker gray (#636363) to improve the contrast ratio to 6:1."
],
"challengeSeed": [
"",
" ",
"",
"",
" Deep Thoughts with Master Camper Cat
", "A Word on the Recent Catnip Doping Scandal
", "The influence that catnip has on feline behavior is well-documented, and its use as an herbal supplement in competitive ninja circles remains controversial. Once again, the debate to ban the substance is brought to the public's attention after the high-profile win of Kittytron, a long-time proponent and user of the green stuff, at the Claw of Fury tournament.
", "As I've stated in the past, I firmly believe a true ninja's skills must come from within, with no external influences. My own catnip use shall continue as purely recreational.
", "color for the body to the darker gray.');",
"assert($('body').css('background-color') == 'rgb(255, 255, 255)', 'message: Your code should not change the background-color for the body.');"
],
"solutions": [],
"hints": [],
"type": "waypoint",
"challengeType": 0,
"translations": {}
},
{
"id": "587d778f367417b2b2512aac",
"title": "Avoid Colorblindness Issues by Using Sufficient Contrast",
"description": [
"Color is a large part of visual design, but its use introduces two accessibility issues. First, color alone should not be used as the only way to convey important information because screen reader users won't see it. Second, foreground and background colors need sufficient contrast so colorblind users can distinguish them.",
"Previous challenges covered having text alternatives to address the first issue. The last challenge introduced contrast checking tools to help with the second. The WCAG-recommended contrast ratio of 4.5:1 applies for color use as well as gray-scale combinations.",
"Colorblind users have trouble distinguishing some colors from others - usually in hue but sometimes lightness as well. You may recall the contrast ratio is calculated using the relative luminance (or lightness) values of the foreground and background colors.",
"In practice, the 4.5:1 ratio can be reached by darkening the darker color and lightening the lighter one with the aid of a color contrast checker. Darker colors on the color wheel are considered to be blues, violets, magentas, and reds, whereas lighter colors are oranges, yellows, greens, and blue-greens.",
"", "Camper Cat is experimenting with using color for his blog text and background, but his current combination of a greenish
background-color with maroon text color has a 2.5:1 contrast ratio. You can easily adjust the lightness of the colors since he declared them using the CSS hsl() property (which stands for hue, saturation, lightness) by changing the third argument. Increase the background-color lightness value from 35% to 55%, and decrease the color lightness value from 20% to 15%. This improves the contrast to 5.9:1."
],
"challengeSeed": [
"",
" ",
"",
"",
" Deep Thoughts with Master Camper Cat
", "A Word on the Recent Catnip Doping Scandal
", "The influence that catnip has on feline behavior is well-documented, and its use as an herbal supplement in competitive ninja circles remains controversial. Once again, the debate to ban the substance is brought to the public's attention after the high-profile win of Kittytron, a long-time proponent and user of the green stuff, at the Claw of Fury tournament.
", "As I've stated in the past, I firmly believe a true ninja's skills must come from within, with no external influences. My own catnip use shall continue as purely recreational.
", "color property to a value of 15%.');",
"assert(code.match(/background-color:\\s*?hsl\\(120,\\s*?25%,\\s*?55%\\)/gi), 'message: Your code should only change the lightness value for the background-color property to a value of 55%.');"
],
"solutions": [],
"hints": [],
"type": "waypoint",
"challengeType": 0,
"translations": {}
},
{
"id": "587d778f367417b2b2512aad",
"title": "Avoid Colorblindness Issues by Carefully Choosing Colors that Convey Information",
"description": [
"There are various forms of colorblindness. These can range from a reduced sensitivity to a certain wavelength of light to the inability to see color at all. The most common form is a reduced sensitivity to detect greens.",
"For example, if two similar green colors are the foreground and background color of your content, a colorblind user may not be able to distinguish them. Close colors can be thought of as neighbors on the color wheel, and those combinations should be avoided when conveying important information.",
"NoteSome online color picking tools include visual simulations of how colors appear for different types of colorblindness. These are great resources in addition to online contrast checking calculators.", "
", "Camper Cat is testing different styles for an important button, but the yellow (
#FFFF33) background-color and the green (#33FF33) text color are neighboring hues on the color wheel and virtually indistinguishable for some colorblind users. (Their similar lightness also fails the contrast ratio check). Change the text color to a dark blue (#003366) to solve both problems."
],
"challengeSeed": [
"",
" ",
"",
"",
" Danger!
", "color for the button to the dark blue.');"
],
"solutions": [],
"hints": [],
"type": "waypoint",
"challengeType": 0,
"translations": {}
},
{
"id": "587d778f367417b2b2512aae",
"title": "Give Links Meaning by Using Descriptive Link Text",
"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.",
"", "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\"."
],
"challengeSeed": [
"",
" Deep Thoughts with Master Camper Cat
", "Defeating your Foe: the Red Dot is Ours!
", "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 information about batteries
", "a tags from around the words \"Click here\" to wrap around the words \"information about batteries\".');"
],
"solutions": [],
"hints": [],
"type": "waypoint",
"challengeType": 0,
"translations": {}
},
{
"id": "587d7790367417b2b2512aaf",
"title": "Make Links Navigatable with HTML Access Keys",
"description": [
"HTML offers the accesskey attribute to specify a shortcut key to activate or bring focus to an element. This can make navigation more efficient for keyboard-only users.",
"HTML5 allows this attribute to be used on any element, but it's particularly useful when it's used with interactive ones. This includes links, buttons, and form controls.",
"Here's an example:",
"<button accesskey="b">Important Button</button>",
"", "Camper Cat wants the links around the two blog article titles to have keyboard shortcuts so his site's users can quickly navigate to the full story. Add an
accesskey attribute to both links and set the first one to \"g\" (for Garfield) and the second one to \"c\" (for Chuck Norris)."
],
"challengeSeed": [
"",
" Deep Thoughts with Master Camper Cat
", "The Garfield Files: Lasagna as Training Fuel?
", " ", " ", "The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...
", "Is Chuck Norris a Cat Person?
", " ", " ", "Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...
", "accesskey attribute to the a tag with the id of \"first\".');",
"assert($('#second').attr('accesskey'), 'message: Your code should add an accesskey attribute to the a tag with the id of \"second\".');",
"assert($('#first').attr('accesskey') == 'g', 'message: Your code should set the accesskey attribute on the a tag with the id of \"first\" to \"g\". Note that case matters.');",
"assert($('#second').attr('accesskey') == 'c', 'message: Your code should set the accesskey attribute on the a tag with the id of \"second\" to \"c\". Note that case matters.');"
],
"solutions": [],
"hints": [],
"type": "waypoint",
"challengeType": 0,
"translations": {}
},
{
"id": "587d7790367417b2b2512ab0",
"title": "Use Tabindex to Add keyboard Focus to an Element",
"description": [
"The HTML tabindex attribute has three distinct functions relating to an element's keyboard focus. When it's on a tag, it indicates that element can be focused on. The value (an integer that's positive, negative, or zero) determines the behavior.",
"Certain elements, such as links and form controls, automatically receive keyboard focus when a user tabs through a page. It's in the same order as the elements come in the HTML source markup. This same functionality can be given to other elements, such as div, span, and p, by placing a tabindex=\"0\" attribute on them. Here's an example:",
"<div tabindex="0">I need keyboard focus!</div>",
"NoteA negative
tabindex value (typically -1) indicates that an element is focusable, but is not reachable by the keyboard. This method is generally used to bring focus to content programmatically (like when a div used for a pop-up window is activated), and is beyond the scope of these challenges.",
"", "Camper Cat created a new survey to collect information about his users. He knows input fields automatically get keyboard focus, but he wants to make sure his keyboard users pause at the instructions while tabbing through the items. Add a
tabindex attribute to the p tag and set its value to \"0\". Bonus - using tabindex also enables the CSS pseudo-class :focus to work on the p tag."
],
"challengeSeed": [
"",
" ",
"",
"",
" Ninja Survey
", "", "
tabindex attribute to the p tag that holds the form instructions.');",
"assert($('p').attr('tabindex') == '0', 'message: Your code should set the tabindex attribute on the p tag to a value of 0.');"
],
"solutions": [],
"hints": [],
"type": "waypoint",
"challengeType": 0,
"translations": {}
},
{
"id": "587d7790367417b2b2512ab1",
"title": "Use Tabindex to Specify the Order of Keyboard Focus for Several Elements",
"description": [
"The tabindex attribute also specifies the exact tab order of elements. This is achieved when the value of the attribute is set to a positive number of 1 or higher.",
"Setting a tabindex=\"1\" will bring keyboard focus to that element first. Then it cycles through the sequence of specified tabindex values (2, 3, etc.), before moving to default and tabindex=\"0\" items.",
"It's important to note that when the tab order is set this way, it overrides the default order (which uses the HTML source). This may confuse users who are expecting to start navigation from the top of the page. This technique may be necessary in some circumstances, but in terms of accessibility, take care before applying it.",
"Here's an example:",
"<div tabindex="1">I get keyboard focus, and I get it first!</div>",
"<div tabindex="2">I get keyboard focus, and I get it second!</div>",
"", "Camper Cat has a search field on his Inspirational Quotes page that he plans to position in the upper right corner with CSS. He wants the search
input and submit input form controls to be the first two items in the tab order. Add a tabindex attribute set to \"1\" to the search input, and a tabindex attribute set to \"2\" to the submit input."
],
"challengeSeed": [
"",
" Even Deeper Thoughts with Master Camper Cat
", " ", "Inspirational Quotes
", "", "", "“There's no Theory of Evolution, just a list of creatures I've allowed to live.”
", "
", " - Chuck Norris
", "", " ", "" ], "tests": [ "assert($('#search').attr('tabindex'), 'message: Your code should add a“Wise men say forgiveness is divine, but never pay full price for late pizza.”
", "
", " - TMNT
tabindex attribute to the search input tag.');",
"assert($('#submit').attr('tabindex'), 'message: Your code should add a tabindex attribute to the submit input tag.');",
"assert($('#search').attr('tabindex') == '1', 'message: Your code should set the tabindex attribute on the search input tag to a value of 1.');",
"assert($('#submit').attr('tabindex') == '2', 'message: Your code should set the tabindex attribute on the submit input tag to a value of 2.');"
],
"solutions": [],
"hints": [],
"type": "waypoint",
"challengeType": 0,
"translations": {}
}
]
}