Skip to content

Commit 7fafe48

Browse files
myllahmyllah
committed
4 - Applied Accessibility
1 parent 56c39f8 commit 7fafe48

23 files changed

+578
-0
lines changed

‎4-applied-accessibility/01-add-a-text-alternative-to-images-for-visually-impaired-accessibility.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<img src="doingKarateWow.jpeg" alt="Camper Cat doing karate">

‎4-applied-accessibility/02-know-when-alt-text-should-be-left-blank.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<h1>Deep Thoughts with Master Camper Cat</h1>
2+
<article>
3+
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
4+
<p>To Come...</p>
5+
</article>
6+
7+
<img src="samuraiSwords.jpeg" alt="">
8+
9+
<article>
10+
<h2>Is Chuck Norris a Cat Person?</h2>
11+
<p>To Come...</p>
12+
</article>

‎4-applied-accessibility/03-use-headings-to-show-hierarchical-relationships-of-content.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<h1>How to Become a Ninja</h1>
2+
<main>
3+
<h2>Learn the Art of Moving Stealthily</h2>
4+
<h3>How to Hide in Plain Sight</h3>
5+
<h3>How to Climb a Wall</h3>
6+
7+
<h2>Learn the Art of Battle</h2>
8+
<h3>How to Strengthen your Body</h3>
9+
<h3>How to Fight like a Ninja</h3>
10+
11+
<h2>Learn the Art of Living with Honor</h2>
12+
<h3>How to Breathe Properly</h3>
13+
<h3>How to Simplify your Life</h3>
14+
</main>

‎4-applied-accessibility/04-jump-straight-to-the-content-using-the-main-element.html

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<header>
2+
<h1>Weapons of the Ninja</h1>
3+
</header>
4+
5+
<main>
6+
7+
</main>
8+
9+
<footer></footer>

‎4-applied-accessibility/05-wrap-content-in-the-article-element.html

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<h1>Deep Thoughts with Master Camper Cat</h1>
2+
<main>
3+
<article>
4+
<h2>The Garfield Files: Lasagna as Training Fuel?</h2>
5+
<p>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...</p>
6+
</article>
7+
8+
<img src="samuraiSwords.jpeg" alt="">
9+
10+
<article>
11+
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
12+
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
13+
</article>
14+
15+
<img src="samuraiSwords.jpeg" alt="">
16+
17+
<article>
18+
<h2>Is Chuck Norris a Cat Person?</h2>
19+
<p>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?...</p>
20+
</article>
21+
</main>

‎4-applied-accessibility/06-make-screen-reader-navigation-easier-with-the-header-landmark.html

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<body>
2+
3+
<header>
4+
<h1>Training with Camper Cat</h1>
5+
</header>
6+
7+
8+
<main>
9+
<section id="stealth">
10+
<h2>Stealth &amp; Agility Training</h2>
11+
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
12+
<article><h3>No training is NP-complete without parkour</h3></article>
13+
</section>
14+
<section id="combat">
15+
<h2>Combat Training</h2>
16+
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
17+
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
18+
</section>
19+
<section id="weapons">
20+
<h2>Weapons Training</h2>
21+
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
22+
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
23+
</section>
24+
</main>
25+
</body>

‎4-applied-accessibility/07-make-screen-reader-navigation-easier-with-the-nav-landmark.html

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<body>
2+
<header>
3+
<h1>Training with Camper Cat</h1>
4+
5+
<nav>
6+
<ul>
7+
<li><a href="#stealth">Stealth &amp; Agility</a></li>
8+
<li><a href="#combat">Combat</a></li>
9+
<li><a href="#weapons">Weapons</a></li>
10+
</ul>
11+
</nav>
12+
13+
</header>
14+
<main>
15+
<section id="stealth">
16+
<h2>Stealth &amp; Agility Training</h2>
17+
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
18+
<article><h3>No training is NP-complete without parkour</h3></article>
19+
</section>
20+
<section id="combat">
21+
<h2>Combat Training</h2>
22+
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
23+
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
24+
</section>
25+
<section id="weapons">
26+
<h2>Weapons Training</h2>
27+
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
28+
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
29+
</section>
30+
</main>
31+
</body>

‎4-applied-accessibility/08-make-screen-reader-navigation-easier-with-the-footer-landmark.html

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<body>
2+
<header>
3+
<h1>Training</h1>
4+
<nav>
5+
<ul>
6+
<li><a href="#stealth">Stealth &amp; Agility</a></li>
7+
<li><a href="#combat">Combat</a></li>
8+
<li><a href="#weapons">Weapons</a></li>
9+
</ul>
10+
</nav>
11+
</header>
12+
<main>
13+
<section id="stealth">
14+
<h2>Stealth &amp; Agility Training</h2>
15+
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
16+
<article><h3>No training is NP-complete without parkour</h3></article>
17+
</section>
18+
<section id="combat">
19+
<h2>Combat Training</h2>
20+
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
21+
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
22+
</section>
23+
<section id="weapons">
24+
<h2>Weapons Training</h2>
25+
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
26+
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
27+
</section>
28+
</main>
29+
30+
31+
<footer>&copy; 2018 Camper Cat</footer>
32+
33+
34+
</body>

‎4-applied-accessibility/09-improve-accessibility-of-audio-content-with-the-audio-element.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<body>
2+
<header>
3+
<h1>Real Coding Ninjas</h1>
4+
</header>
5+
<main>
6+
<p>A sound clip of Zersiax's screen reader in action.</p>
7+
8+
<audio controls>
9+
<source src="https://s3.amazonaws.com/freecodecamp/screen-reader.mp3" type="audio/mpeg">
10+
</audio>
11+
12+
</main>
13+
</body>

‎4-applied-accessibility/10-improve-chart-accessibility-with-the-figure-element.html

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<body>
2+
<header>
3+
<h1>Training</h1>
4+
<nav>
5+
<ul>
6+
<li><a href="#stealth">Stealth &amp; Agility</a></li>
7+
<li><a href="#combat">Combat</a></li>
8+
<li><a href="#weapons">Weapons</a></li>
9+
</ul>
10+
</nav>
11+
</header>
12+
<main>
13+
<section>
14+
15+
<!-- Only change code below this line -->
16+
<figure>
17+
<!-- Stacked bar chart will go here -->
18+
<br>
19+
<figcaption>Breakdown per week of time to spend training in stealth, combat, and weapons.</figcaption>
20+
</figure>
21+
<!-- Only change code above this line -->
22+
23+
</section>
24+
<section id="stealth">
25+
<h2>Stealth &amp; Agility Training</h2>
26+
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
27+
<article><h3>No training is NP-complete without parkour</h3></article>
28+
</section>
29+
<section id="combat">
30+
<h2>Combat Training</h2>
31+
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
32+
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
33+
</section>
34+
<section id="weapons">
35+
<h2>Weapons Training</h2>
36+
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
37+
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
38+
</section>
39+
</main>
40+
<footer>&copy; 2018 Camper Cat</footer>
41+
</body>

‎4-applied-accessibility/11-improve-form-field-accessibility-with-the-label-element.html

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<body>
2+
<header>
3+
<h1>Deep Thoughts with Master Camper Cat</h1>
4+
</header>
5+
<section>
6+
<form>
7+
<p>Sign up to receive Camper Cat's blog posts by email here!</p>
8+
9+
10+
<label for="email">Email:</label>
11+
<input type="text" id="email" name="email">
12+
13+
14+
<input type="submit" name="submit" value="Submit">
15+
</form>
16+
</section>
17+
<article>
18+
<h2>The Garfield Files: Lasagna as Training Fuel?</h2>
19+
<p>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...</p>
20+
</article>
21+
<img src="samuraiSwords.jpeg" alt="">
22+
<article>
23+
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
24+
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
25+
</article>
26+
<img src="samuraiSwords.jpeg" alt="">
27+
<article>
28+
<h2>Is Chuck Norris a Cat Person?</h2>
29+
<p>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?...</p>
30+
</article>
31+
<footer>&copy; 2018 Camper Cat</footer>
32+
</body>

‎4-applied-accessibility/12-wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility.html

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<body>
2+
<header>
3+
<h1>Deep Thoughts with Master Camper Cat</h1>
4+
</header>
5+
<section>
6+
<form>
7+
<p>Sign up to receive Camper Cat's blog posts by email here!</p>
8+
<label for="email">Email:</label>
9+
<input type="text" id="email" name="email">
10+
11+
12+
<!-- Only change code below this line -->
13+
<fieldset>
14+
<legend>What level ninja are you?</legend>
15+
<input id="newbie" type="radio" name="levels" value="newbie">
16+
<label for="newbie">Newbie Kitten</label><br>
17+
<input id="intermediate" type="radio" name="levels" value="intermediate">
18+
<label for="intermediate">Developing Student</label><br>
19+
<input id="master" type="radio" name="levels" value="master">
20+
<label for="master">Master</label>
21+
</fieldset>
22+
<!-- Only change code above this line -->
23+
24+
25+
<input type="submit" name="submit" value="Submit">
26+
</form>
27+
</section>
28+
<article>
29+
<h2>The Garfield Files: Lasagna as Training Fuel?</h2>
30+
<p>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...</p>
31+
</article>
32+
<img src="samuraiSwords.jpeg" alt="">
33+
<article>
34+
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
35+
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
36+
</article>
37+
<img src="samuraiSwords.jpeg" alt="">
38+
<article>
39+
<h2>Is Chuck Norris a Cat Person?</h2>
40+
<p>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?...</p>
41+
</article>
42+
<footer>&copy; 2018 Camper Cat</footer>
43+
</body>

‎4-applied-accessibility/13-add-an-accessible-date-picker.html

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<body>
2+
<header>
3+
<h1>Tournaments</h1>
4+
</header>
5+
<main>
6+
<section>
7+
<h2>Mortal Kombat Tournament Survey</h2>
8+
<form>
9+
<p>Tell us the best date for the competition</p>
10+
<label for="pickdate">Preferred Date:</label>
11+
12+
<!-- Only change code below this line -->
13+
<input type="date" id="pickdate" name="date">
14+
<!-- Only change code above this line -->
15+
16+
<input type="submit" name="submit" value="Submit">
17+
</form>
18+
</section>
19+
</main>
20+
<footer>&copy; 2018 Camper Cat</footer>
21+
</body>

‎4-applied-accessibility/14-standardize-times-with-the-html5-datetime-attribute.html

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<body>
2+
<header>
3+
<h1>Tournaments</h1>
4+
</header>
5+
<article>
6+
<h2>Mortal Kombat Tournament Survey Results</h2>
7+
8+
<!-- Only change code below this line -->
9+
10+
<p>Thank you to everyone for responding to Master Camper Cat's survey. The best day to host the vaunted Mortal Kombat tournament is <time datetime="2016-09-15">Thursday, September 15<sup>th</sup></time>. May the best ninja win!</p>
11+
12+
<!-- Only change code above this line -->
13+
14+
<section>
15+
<h3>Comments:</h3>
16+
<article>
17+
<p>Posted by: Sub-Zero on <time datetime="2016-08-13T20:01Z">August 13<sup>th</sup></time></p>
18+
<p>Johnny Cage better be there, I'll finish him!</p>
19+
</article>
20+
<article>
21+
<p>Posted by: Doge on <time datetime="2016-08-15T08:12Z">August 15<sup>th</sup></time></p>
22+
<p>Wow, much combat, so mortal.</p>
23+
</article>
24+
<article>
25+
<p>Posted by: The Grim Reaper on <time datetime="2016-08-16T00:00Z">August 16<sup>th</sup></time></p>
26+
<p>Looks like I'll be busy that day.</p>
27+
</article>
28+
</section>
29+
</article>
30+
<footer>&copy; 2018 Camper Cat</footer>
31+
</body>

0 commit comments

Comments
 (0)