{ "name": "Applied Accessibility", "order": 3, "time": "5 hours", "helpRoom": "Help", "challenges": [ { "id": "587d774b367417b2b2512a9b", "title": "Introduction to the Applied Accessibility Challenges", "description": [ [ "", "", "\"Accessibility\" generally means having web content and a user interface that can be understood, navigated, and interacted with by a broad audience. This includes people with visual, auditory, mobility, or cognitive disabilities.", "" ], [ "", "", "Websites should be open and accessible to everyone, regardless of a user's abilities or resources. Some users rely on assistive technology such as a screen reader or voice recognition software. Other users may be able to navigate through a site only using a keyboard. Keeping the needs of various users in mind when developing your project can go a long way towards creating an open web.", "" ], [ "", "", "Here are three general concepts this section will explore throughout the following challenges:


  1. have well-organized code that uses appropriate markup

  2. ensure text alternatives exist for non-text and visual content

  3. create an easily-navigated page that's keyboard-friendly



Having accessible web content is an ongoing challenge. A great resource for your projects going forward is the W3 Consortium's Web Content Accessibility Guidelines (WCAG). They set the international standard for accessibility and provide a number of criteria you can use to check your work.", "" ] ], "releasedOn": "Feb 17, 2017", "challengeSeed": [], "tests": [], "type": "waypoint", "challengeType": 7, "isRequired": false, "translations": {} }, { "id": "587d774c367417b2b2512a9c", "title": "Add a Text Alternative to Images for Visually Impaired Accessibility", "description": [ "It's likely you've seen an alt attribute on an img tag in other challenges. Alt 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:", "<img src="importantLogo.jpeg" alt="Company logo">", "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 alt attribute and read its contents to deliver key information.", "Good alt text is short but descriptive, and meant to briefly convey the meaning of the image. You should always include an alt attribute on your image. Per HTML5 specification, this is now considered mandatory.", "
", "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 alt attribute in the img tag, that explains Camper Cat is doing karate. (The image src doesn't link to an actual file, so you should see the alt text in the display.)" ], "challengeSeed": [ "" ], "tests": [ "assert($('img').attr('alt'), 'message: Your img tag should have an alt attribute, and it should not be empty.');" ], "solutions": [], "hints": [], "type": "waypoint", "releasedOn": "Feb 17, 2017", "challengeType": 0, "translations": {}, "guideUrl": "https://guide.freecodecamp.org/certificates/add-alt-text-to-an-image-for-accessibility" }, { "id": "587d774c367417b2b2512a9d", "title": "Know When Alt Text Should be Left Blank", "description": [ "In the last challenge, you learned that including an alt attribute on img tags is mandatory. However, sometimes images are grouped with a caption already describing them, or are used for decoration only. In these cases alt text may seem redundant or unnecessary.", "In situations when an image is already explained with text content, or does not add meaning to a page, the img still needs an alt attribute, but it can be set to an empty string. Here's an example:", "<img src="visualDecoration.jpeg" alt="">", "Background images usually fall under the 'decorative' label as well. However, they are typically applied with CSS rules, and therefore not part of the markup screen readers process.", "Note
For images with a caption, you may still want to include alt text, since it helps search engines catalog the content of the image.", "
", "Camper Cat has coded a skeleton page for the blog part of his website. He's planning to add a visual break between his two articles with a decorative image of a samurai sword. Add an alt attribute to the img tag and set it to an empty string. (Note that the image src doesn't link to an actual file - don't worry that there are no swords showing in the display.)" ], "challengeSeed": [ "

Deep Thoughts with Master Camper Cat

", "
", "

Defeating your Foe: the Red Dot is Ours!

", "

To Come...

", "
", "", "", "", "
", "

Is Chuck Norris a Cat Person?

", "

To Come...

", "
" ], "tests": [ "assert(!($('img').attr('alt') == undefined), 'message: Your img tag should have an alt attribute.');", "assert($('img').attr('alt') == '', 'message: The alt attribute should be set to an empty string.');" ], "solutions": [], "hints": [], "type": "waypoint", "releasedOn": "Feb 17, 2017", "challengeType": 0, "translations": {} }, { "id": "587d774d367417b2b2512a9e", "title": "Use Headings to Show Hierarchical Relationships of Content", "description": [ "Headings (h1 through h6 elements) are workhorse tags that help provide structure and labeling to your content. Screen readers can be set to read only the headings on a page so the user gets a summary. This means it is important for the heading tags in your markup to have semantic meaning and relate to each other, not be picked merely for their size values.", "Semantic meaning means that the tag you use around content indicates the type of information it contains.", "If you were writing a paper with an introduction, a body, and a conclusion, it wouldn't make much sense to put the conclusion as a subsection of the body in your outline. It should be its own section. Similarly, the heading tags in a webpage need to go in order and indicate the hierarchical relationships of your content.", "Headings with equal (or higher) rank start new implied sections, headings with lower rank start subsections of the previous one.", "As an example, a page with an h2 element followed by several subsections labeled with h4 tags would confuse a screen reader user. With six choices, it's tempting to use a tag because it looks better in a browser, but you can use CSS to edit the relative sizing.", "One final point, each page should always have one (and only one) h1 element, which is the main subject of your content. This and the other headings are used in part by search engines to understand the topic of the page.", "
", "Camper Cat wants a page on his site dedicated to becoming a ninja. Help him fix the headings so his markup gives semantic meaning to the content, and shows the proper parent-child relationships of his sections. Change all the h5 tags to the proper heading level to indicate they are subsections of the h2 ones." ], "challengeSeed": [ "

How to Become a Ninja

", "
", "

Learn the Art of Moving Stealthily

", "
How to Hide in Plain Sight
", "
How to Climb a Wall
", "", "

Learn the Art of Battle

", "
How to Strengthen your Body
", "
How to Fight like a Ninja
", "", "

Learn the Art of Living with Honor

", "
How to Breathe Properly
", "
How to Simplify your Life
", "
" ], "tests": [ "assert($('h3').length === 6, 'message: Your code should have six h3 tags.');", "assert($('h5').length === 0, 'message: Your code should not have any h5 tags.');" ], "solutions": [], "hints": [ "All the h5 tags are siblings, and should be changed to the same new heading level." ], "type": "waypoint", "releasedOn": "Feb 17, 2017", "challengeType": 0, "translations": {} }, { "id": "587d774e367417b2b2512a9f", "title": "Jump Straight to the Content Using the main Element", "description": [ "HTML5 introduced a number of new elements that give developers more options while also incorporating accessibility features. These tags include main, header, footer, nav, article, and section, among others.", "By default, a browser renders these elements similarly to the humble div. However, using them where appropriate gives additional meaning in your markup. The tag name alone can indicate the type of information it contains, which adds semantic meaning to that content. Assistive technologies can access this information to provide better page summary or navigation options to their users.", "The main element is used to wrap (you guessed it) the main content, and there should be only one per page. It's meant to surround the information that's related to the central topic of your page. It's not meant to include items that repeat across pages, like navigation links or banners.", "The main tag also has an embedded landmark feature that assistive technology can use to quickly navigate to the main content. If you've ever seen a \"Jump to Main Content\" link at the top of a page, using a main tag automatically gives assistive devices that functionality.", "
", "Camper Cat has some big ideas for his ninja weapons page. Help him set up his markup by adding opening and closing main tags between the header and footer (covered in other challenges). Keep the main tags empty for now." ], "challengeSeed": [ "
", "

Weapons of the Ninja

", "
", "", "", "", "" ], "tests": [ "assert($('main').length == 1, 'message: Your code should have one main tag.');", "assert(code.match(/<\\/header>\\s*?
\\s*?<\\/main>/gi), 'message: The main tags should be between the closing header tag and the opening footer tag.');" ], "solutions": [], "hints": [], "type": "waypoint", "releasedOn": "Feb 17, 2017", "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 div
The 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> - groups content
<section> - groups related content
<article> - groups 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...

", "
", "", " \"\"", "", "
", "

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?...

", "
", "
" ], "tests": [ "assert($('article').length == 3, 'message: Your code should have three article tags.');", "assert($('div').length == 0, 'message: Your code should not have any div tags.');" ], "solutions": [], "hints": [], "type": "waypoint", "releasedOn": "Feb 17, 2017", "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.", "Note
header 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?

", "
", "
", "" ], "tests": [ "assert($('header').length == 1, 'message: Your code should have one 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.');", "assert(code.match(/<\\/header>/g) && code.match(/<\\/header>/g).length === code.match(/
/g).length, 'message: Make sure your header element has a closing tag.');" ], "solutions": [], "hints": [], "type": "waypoint", "releasedOn": "Feb 17, 2017", "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 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?

", "
", "
", "" ], "tests": [ "assert($('nav').length == 1, 'message: Your code should have one 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.');", "assert(code.match(/<\\/nav>/g) && code.match(/<\\/nav>/g).length === code.match(/