gitadmin/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-05-28 18:26:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(curriculum): replace D.O.B. acronym in accessibility quiz (#54829)

Browse Source 
Co-authored-by: Naomi the Technomancer <accounts+github@nhcarrigan.com>
This commit is contained in:
Supravisor
2024-08-01 02:16:42 +12:00
committed by GitHub
parent 628b559a75
commit 48e8653cb9
48 changed files with 422 additions and 262 deletions
Download Patch File Download Diff File Expand all files Collapse all files
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143908b6aafb00a659ca189.md
+1 -1
View File
@@ -93,7 +93,7 @@ assert.notEmpty(document.querySelectorAll('input')?.[0]?.placeholder);
<input id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.:</label>
<label for="birth-date">Date of Birth:</label>
<input id="birth-date" />
</div>
</section>
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143920c8eafb00b735746ce.md
+1 -1
View File
@@ -60,7 +60,7 @@ assert.isEmpty(document.querySelectorAll('input')?.[0]?.placeholder);
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.:</label>
<label for="birth-date">Date of Birth:</label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143931a113bb80c45546287.md
+72 -11
View File
@@ -7,28 +7,76 @@ dashedName: step-23
# --description--
Arguably, `D.O.B.` is not descriptive enough. This is especially true for visually impaired users. One way to get around such an issue, without having to add visible text to the label, is to add text only a screen reader can read.
Within the second `section` element, add two `div` elements with a class of `question-block`.
Append a `span` element with a class of `sr-only` to the current text content of the third `label` element.
Then, within each `div.question-block` element, add one `h3` element with text of incrementing numbers, starting at `1`, and one `fieldset` element with a class of `question`.
# --hints--
You should add a `span` element within the third `label` element.
You should nest two `div` elements within the second `section` element.
```js
assert.exists(document.querySelector('.info:nth-of-type(3) > label > span'));
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div')?.length, 2);
```
You should give the `span` element a class of `sr-only`.
You should give the first new `div` element a class of `question-block`.
```js
assert.equal(document.querySelector('.info:nth-of-type(3) > label > span')?.className, 'sr-only');
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div')?.[0]?.className, 'question-block');
```
You should place the `span` after the text content `D.O.B.`.
You should give the second new `div` element a class of `question-block`.
```js
assert.match(document.querySelector('.info:nth-of-type(3) > label')?.innerHTML, /D\.O\.B\.<span/);
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div')?.[1]?.className, 'question-block');
```
You should nest one `h3` element within each `div.question-block` element.
```js
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > h3')?.length, 2);
```
You should give the first `h3` element text of `1`.
```js
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > h3')?.[0]?.textContent, '1');
```
You should give the second `h3` element text of `2`.
```js
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > h3')?.[1]?.textContent, '2');
```
You should nest one `fieldset` element within each `div.question-block` element.
```js
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > fieldset')?.length, 2);
```
You should place the first `fieldset` element after the first `h3` element.
```js
assert.exists(document.querySelector('section:nth-of-type(2) > div.question-block > h3 + fieldset'));
```
You should place the second `fieldset` element after the second `h3` element.
```js
assert.exists(document.querySelector('section:nth-of-type(2) > div.question-block:nth-of-type(2) > h3 + fieldset'));
```
You should give the first `fieldset` element a class of `question`.
```js
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > fieldset')?.[0]?.className, 'question');
```
You should give the second `fieldset` element a class of `question`.
```js
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > fieldset')?.[1]?.className, 'question');
```
# --seed--
@@ -69,16 +117,17 @@ assert.match(document.querySelector('.info:nth-of-type(3) > label')?.innerHTML,
<label for="student-email">Email:</label>
<input type="email" name="student-email" id="student-email" />
</div>
--fcc-editable-region--
<div class="info">
<label for="birth-date">D.O.B.</label>
<label for="birth-date">Date of Birth:</label>
<input type="date" name="birth-date" id="birth-date" />
</div>
--fcc-editable-region--
</section>
--fcc-editable-region--
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
</section>
--fcc-editable-region--
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS</h2>
</section>
@@ -136,4 +185,16 @@ h2 {
border-bottom: 4px solid #dfdfe2;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
```
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614394fb41985e0d2012a93e.md
+46 -6
View File
@@ -7,14 +7,34 @@ dashedName: step-24
# --description--
Within the `span` element, add the text `(Date of Birth)`.
The question numbers are not descriptive enough. This is especially true for visually impaired users. One way to get around such an issue, without having to add visible text to the element, is to add text only a screen reader can read.
Append a `span` element with a `class` of `sr-only` to each of the `h3` elements.
# --hints--
You should give the `span` element the text `(Date of Birth)`.
You should add a `span` element within the first `h3` element.
```js
assert.equal(document.querySelector('.info:nth-of-type(3) > label > span')?.textContent, '(Date of Birth)');
assert.exists(document.querySelector('h3 > span'));
```
You should give the first `span` element a `class` of `sr-only`.
```js
assert.equal(document.querySelector('span')?.className, 'sr-only');
```
You should add a `span` element within the second `h3` element.
```js
assert.exists(document.querySelectorAll('h3 > span')[1]);
```
You should give the second `span` element a `class` of `sr-only`.
```js
assert.equal(document.querySelectorAll('span')[1]?.className, 'sr-only');
```
# --seed--
@@ -55,15 +75,23 @@ assert.equal(document.querySelector('.info:nth-of-type(3) > label > span')?.text
<label for="student-email">Email:</label>
<input type="email" name="student-email" id="student-email" />
</div>
--fcc-editable-region--
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only"></span></label>
<label for="birth-date">Date of Birth:</label>
<input type="date" name="birth-date" id="birth-date" />
</div>
--fcc-editable-region--
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
--fcc-editable-region--
<h3>1</h3>
<fieldset class="question"></fieldset>
</div>
<div class="question-block">
<h3>2</h3>
--fcc-editable-region--
<fieldset class="question"></fieldset>
</div>
</section>
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS</h2>
@@ -122,4 +150,16 @@ h2 {
border-bottom: 4px solid #dfdfe2;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
```
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143956ed76ed60e012faa51.md
+77 -72
View File
@@ -7,84 +7,22 @@ dashedName: step-25
# --description--
The `.sr-only` text is still visible. There is a common pattern to visually hide text for only screen readers to read.
Within the first `span` element, add the text `"Question"`.
This pattern is to set the following CSS properties:
```css
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
```
Use the above to define the `sr-only` class.
In the second `span` element, add the text `"Question"`.
# --hints--
You should use the `.sr-only` selector.
You should give the first `span` element text of `Question`.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('.sr-only'));
assert.equal(document.querySelector('h3 > span')?.textContent, 'Question');
```
You should give the `.sr-only` a `position` of `absolute`.
You should give the second `span` element text of `Question`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.position, 'absolute');
```
You should give the `.sr-only` a `width` of `1px`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.width, '1px');
```
You should give the `.sr-only` a `height` of `1px`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.height, '1px');
```
You should give the `.sr-only` a `padding` of `0`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.padding, '0px');
```
You should give the `.sr-only` a `margin` of `-1px`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.margin, '-1px');
```
You should give the `.sr-only` an `overflow` of `hidden`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.overflow, 'hidden');
```
You should give the `.sr-only` a `clip` of `rect(0, 0, 0, 0)`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.clip, 'rect(0px, 0px, 0px, 0px)');
```
You should give the `.sr-only` a `white-space` of `nowrap`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.whiteSpace, 'nowrap');
```
You should give the `.sr-only` a `border` of `0`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.borderWidth, '0px');
assert.equal(document.querySelectorAll('h3 > span')?.[1]?.textContent, 'Question');
```
# --seed--
@@ -126,12 +64,22 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.borderWidth,
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<label for="birth-date">Date of Birth:</label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
--fcc-editable-region--
<h3><span class="sr-only"></span>1</h3>
<fieldset class="question"></fieldset>
</div>
<div class="question-block">
<h3><span class="sr-only"></span>2</h3>
--fcc-editable-region--
<fieldset class="question"></fieldset>
</div>
</section>
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS</h2>
@@ -190,8 +138,65 @@ h2 {
border-bottom: 4px solid #dfdfe2;
}
--fcc-editable-region--
--fcc-editable-region--
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
header {
width: 100%;
height: 50px;
background-color: #1b1b32;
display: flex;
}
#logo {
width: max(10rem, 18vw);
background-color: #0a0a23;
aspect-ratio: 35 / 4;
padding: 0.4rem;
}
h1 {
color: #f1be32;
font-size: min(5vw, 1.2em);
}
nav {
width: 50%;
max-width: 300px;
height: 50px;
}
nav > ul {
display: flex;
justify-content: space-evenly;
}
h1,
h2 {
font-family: Verdana, Tahoma;
}
h2 {
border-bottom: 4px solid #dfdfe2;
}
```
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614396f7ae83f20ea6f9f4b3.md
+96 -42
View File
@@ -7,76 +7,84 @@ dashedName: step-26
# --description--
Within the second `section` element, add two `div` elements with a class of `question-block`.
The `.sr-only` text is still visible. There is a common pattern to visually hide text for only screen readers to read.
Then, within each `div.question-block` element, add one `h3` element with text of incrementing numbers, starting at `1`, and one `fieldset` element with a class of `question`.
This pattern is to set the following CSS properties:
```css
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
```
Use the above to define the `.sr-only` CSS rule.
# --hints--
You should nest two `div` elements within the second `section` element.
You should use the `.sr-only` selector.
```js
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div')?.length, 2);
assert.exists(new __helpers.CSSHelp(document).getStyle('.sr-only'));
```
You should give the first new `div` element a class of `question-block`.
You should give the `.sr-only` a `position` of `absolute`.
```js
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div')?.[0]?.className, 'question-block');
assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.position, 'absolute');
```
You should give the second new `div` element a class of `question-block`.
You should give the `.sr-only` a `width` of `1px`.
```js
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div')?.[1]?.className, 'question-block');
assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.width, '1px');
```
You should nest one `h3` element within each `div.question-block` element.
You should give the `.sr-only` a `height` of `1px`.
```js
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > h3')?.length, 2);
assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.height, '1px');
```
You should give the first `h3` element text of `1`.
You should give the `.sr-only` a `padding` of `0`.
```js
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > h3')?.[0]?.textContent, '1');
assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.padding, '0px');
```
You should give the second `h3` element text of `2`.
You should give the `.sr-only` a `margin` of `-1px`.
```js
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > h3')?.[1]?.textContent, '2');
assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.margin, '-1px');
```
You should nest one `fieldset` element within each `div.question-block` element.
You should give the `.sr-only` an `overflow` of `hidden`.
```js
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > fieldset')?.length, 2);
assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.overflow, 'hidden');
```
You should place the first `fieldset` element after the first `h3` element.
You should give the `.sr-only` a `clip` of `rect(0, 0, 0, 0)`.
```js
assert.exists(document.querySelector('section:nth-of-type(2) > div.question-block > h3 + fieldset'));
assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.clip, 'rect(0px, 0px, 0px, 0px)');
```
You should place the second `fieldset` element after the second `h3` element.
You should give the `.sr-only` a `white-space` of `nowrap`.
```js
assert.exists(document.querySelector('section:nth-of-type(2) > div.question-block:nth-of-type(2) > h3 + fieldset'));
assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.whiteSpace, 'nowrap');
```
You should give the first `fieldset` element a class of `question`.
You should give the `.sr-only` a `border` of `0`.
```js
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > fieldset')?.[0]?.className, 'question');
```
You should give the second `fieldset` element a class of `question`.
```js
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > fieldset')?.[1]?.className, 'question');
assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.borderWidth, '0px');
```
# --seed--
@@ -118,16 +126,21 @@ assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-bl
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<label for="birth-date">Date of Birth:</label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
--fcc-editable-region--
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<h3><span class="sr-only">Question</span>1</h3>
<fieldset class="question"></fieldset>
</div>
<div class="question-block">
<h3><span class="sr-only">Question</span>2</h3>
<fieldset class="question"></fieldset>
</div>
</section>
--fcc-editable-region--
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS</h2>
</section>
@@ -185,16 +198,57 @@ h2 {
border-bottom: 4px solid #dfdfe2;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
header {
width: 100%;
height: 50px;
background-color: #1b1b32;
display: flex;
}
#logo {
width: max(10rem, 18vw);
background-color: #0a0a23;
aspect-ratio: 35 / 4;
padding: 0.4rem;
}
h1 {
color: #f1be32;
font-size: min(5vw, 1.2em);
}
nav {
width: 50%;
max-width: 300px;
height: 50px;
}
nav > ul {
display: flex;
justify-content: space-evenly;
}
h1,
h2 {
font-family: Verdana, Tahoma;
}
h2 {
border-bottom: 4px solid #dfdfe2;
}
--fcc-editable-region--
--fcc-editable-region--
```
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143cb26f7edff2dc28f7da5.md
+3 -3
View File
@@ -88,7 +88,7 @@ assert.equal(document.querySelectorAll('fieldset > ul')?.[1]?.querySelectorAll('
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<label for="birth-date">Date of Birth:</label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
@@ -96,11 +96,11 @@ assert.equal(document.querySelectorAll('fieldset > ul')?.[1]?.querySelectorAll('
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<h3>1</h3>
<h3><span class="sr-only"></span>1</h3>
<fieldset class="question"></fieldset>
</div>
<div class="question-block">
<h3>2</h3>
<h3><span class="sr-only"></span>2</h3>
<fieldset class="question"></fieldset>
</div>
</section>
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144e818fd5ea704fe56081d.md
+3 -3
View File
@@ -94,7 +94,7 @@ assert.notEqual(document.querySelectorAll('legend')?.[0]?.textContent, document.
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<label for="birth-date">Date of Birth:</label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
@@ -102,7 +102,7 @@ assert.notEqual(document.querySelectorAll('legend')?.[0]?.textContent, document.
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<h3>1</h3>
<h3><span class="sr-only">Question</span>1</h3>
<fieldset class="question">
<legend></legend>
<ul>
@@ -112,7 +112,7 @@ assert.notEqual(document.querySelectorAll('legend')?.[0]?.textContent, document.
</fieldset>
</div>
<div class="question-block">
<h3>2</h3>
<h3><span class="sr-only">Question</span>2</h3>
<fieldset class="question">
<legend></legend>
<ul>
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144f8dc6849e405dd8bb829.md
+3 -3
View File
@@ -124,14 +124,14 @@ assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<label for="birth-date">Date of Birth:</label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<h3>1</h3>
<h3><span class="sr-only">Question</span>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -145,7 +145,7 @@ assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.
</fieldset>
</div>
<div class="question-block">
<h3>2</h3>
<h3><span class="sr-only">Question</span>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e6eeaa66c605eb087fe9.md
+3 -3
View File
@@ -74,14 +74,14 @@ assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<label for="birth-date">Date of Birth:</label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<h3>1</h3>
<h3><span class="sr-only">Question</span>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -103,7 +103,7 @@ assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.
</fieldset>
</div>
<div class="question-block">
<h3>2</h3>
<h3><span class="sr-only">Question</span>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md
+3 -3
View File
@@ -164,14 +164,14 @@ assert.equal(document.querySelectorAll('ul.answers-list > li > label')?.[3]?.tex
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<label for="birth-date">Date of Birth:</label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<h3>1</h3>
<h3><span class="sr-only">Question</span>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -193,7 +193,7 @@ assert.equal(document.querySelectorAll('ul.answers-list > li > label')?.[3]?.tex
</fieldset>
</div>
<div class="question-block">
<h3>2</h3>
<h3><span class="sr-only">Question</span>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145eb5f08a38a0786c7a80c.md
+3 -3
View File
@@ -97,14 +97,14 @@ assert.notEqual(i(0), i(2));
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<label for="birth-date">Date of Birth:</label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<h3>1</h3>
<h3><span class="sr-only">Question</span>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -128,7 +128,7 @@ assert.notEqual(i(0), i(2));
</fieldset>
</div>
<div class="question-block">
<h3>2</h3>
<h3><span class="sr-only">Question</span>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ed1f22caab087630aaad.md
+3 -3
View File
@@ -62,14 +62,14 @@ assert.include(new __helpers.CSSHelp(document).getStyle('p::before')?.content, '
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<label for="birth-date">Date of Birth:</label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<h3>1</h3>
<h3><span class="sr-only">Question</span>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -92,7 +92,7 @@ assert.include(new __helpers.CSSHelp(document).getStyle('p::before')?.content, '
</fieldset>
</div>
<div class="question-block">
<h3>2</h3>
<h3><span class="sr-only">Question</span>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ee65e2e1530938cb594d.md
+3 -3
View File
@@ -100,14 +100,14 @@ assert.equal(document.querySelector('section:nth-of-type(3) > div.formrow > div:
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<label for="birth-date">Date of Birth:</label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<h3>1</h3>
<h3><span class="sr-only">Question</span>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -130,7 +130,7 @@ assert.equal(document.querySelector('section:nth-of-type(3) > div.formrow > div:
</fieldset>
</div>
<div class="question-block">
<h3>1</h3>
<h3><span class="sr-only">Question</span>1</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md
+3 -3
View File
@@ -74,14 +74,14 @@ assert.isAtLeast(document.querySelectorAll('.formrow > .question-block')?.[1]?.q
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<label for="birth-date">Date of Birth:</label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<h3>1</h3>
<h3><span class="sr-only">Question</span>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -104,7 +104,7 @@ assert.isAtLeast(document.querySelectorAll('.formrow > .question-block')?.[1]?.q
</fieldset>
</div>
<div class="question-block">
<h3>2</h3>
<h3><span class="sr-only">Question</span>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f14f019a4b0adb94b051.md
+3 -3
View File
@@ -106,14 +106,14 @@ assert.isTrue(document.querySelector('div.answer > select')?.required);
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<label for="birth-date">Date of Birth:</label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<h3>1</h3>
<h3><span class="sr-only">Question</span>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -136,7 +136,7 @@ assert.isTrue(document.querySelector('div.answer > select')?.required);
</fieldset>
</div>
<div class="question-block">
<h3>2</h3>
<h3><span class="sr-only">Question</span>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f3a5cd9be60b9459cdd6.md
+3 -3
View File
@@ -74,14 +74,14 @@ assert.notEmpty(document.querySelector('.answer > select')?.name);
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<label for="birth-date">Date of Birth:</label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<h3>1</h3>
<h3><span class="sr-only">Question</span>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -104,7 +104,7 @@ assert.notEmpty(document.querySelector('.answer > select')?.name);
</fieldset>
</div>
<div class="question-block">
<h3>2</h3>
<h3><span class="sr-only">Question</span>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f47393fbe70c4d885f9c.md
+3 -3
View File
@@ -80,14 +80,14 @@ assert.notEmpty(document.querySelectorAll('div.answer')?.[1]?.querySelector('tex
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<label for="birth-date">Date of Birth:</label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<h3>1</h3>
<h3><span class="sr-only">Question</span>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -110,7 +110,7 @@ assert.notEmpty(document.querySelectorAll('div.answer')?.[1]?.querySelector('tex
</fieldset>
</div>
<div class="question-block">
<h3>2</h3>
<h3><span class="sr-only">Question</span>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f59029474c0d3dc1c8b8.md
+3 -3
View File
@@ -87,14 +87,14 @@ assert.match(document.querySelectorAll('.answer')?.[1]?.querySelector('textarea'
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<label for="birth-date">Date of Birth:</label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<h3>1</h3>
<h3><span class="sr-only">Question</span>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -117,7 +117,7 @@ assert.match(document.querySelectorAll('.answer')?.[1]?.querySelector('textarea'
</fieldset>
</div>
<div class="question-block">
<h3>2</h3>
<h3><span class="sr-only">Question</span>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f685797bd30df9784e8c.md
+3 -3
View File
@@ -81,14 +81,14 @@ assert.equal(document.querySelector('button[type="submit"]')?.textContent ?? doc
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<label for="birth-date">Date of Birth:</label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<h3>1</h3>
<h3><span class="sr-only">Question</span>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -111,7 +111,7 @@ assert.equal(document.querySelector('button[type="submit"]')?.textContent ?? doc
</fieldset>
</div>
<div class="question-block">
<h3>2</h3>
<h3><span class="sr-only">Question</span>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f829ac6a920ebf5797d7.md
+3 -3
View File
@@ -64,14 +64,14 @@ assert.exists(document.querySelector('footer > address'));
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<label for="birth-date">Date of Birth:</label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<h3>1</h3>
<h3><span class="sr-only">Question</span>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -94,7 +94,7 @@ assert.exists(document.querySelector('footer > address'));
</fieldset>
</div>
<div class="question-block">
<h3>2</h3>
<h3><span class="sr-only">Question</span>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f8f8bcd4370f6509078e.md
+3 -3
View File
@@ -65,14 +65,14 @@ assert.equal(document.querySelector('address')?.innerText, 'freeCodeCamp\nSan Fr
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<label for="birth-date">Date of Birth:</label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<h3>1</h3>
<h3><span class="sr-only">Question</span>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -95,7 +95,7 @@ assert.equal(document.querySelector('address')?.innerText, 'freeCodeCamp\nSan Fr
</fieldset>
</div>
<div class="question-block">
<h3>2</h3>
<h3><span class="sr-only">Question</span>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fb5018cb5b100cb2a88c.md
+3 -3
View File
@@ -71,14 +71,14 @@ assert.equal(document.querySelector('address')?.innerHTML?.match(/freeCodeCamp/g
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<label for="birth-date">Date of Birth:</label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<h3>1</h3>
<h3><span class="sr-only">Question</span>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -101,7 +101,7 @@ assert.equal(document.querySelector('address')?.innerHTML?.match(/freeCodeCamp/g
</fieldset>
</div>
<div class="question-block">
<h3>2</h3>
<h3><span class="sr-only">Question</span>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fc3707fc3310c277f5c8.md
+3 -3
View File
@@ -96,14 +96,14 @@ assert.equal(display, 'block');
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<label for="birth-date">Date of Birth:</label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<h3>1</h3>
<h3><span class="sr-only">Question</span>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -126,7 +126,7 @@ assert.equal(display, 'block');
</fieldset>
</div>
<div class="question-block">
<h3>2</h3>
<h3><span class="sr-only">Question</span>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md
+3 -3
View File
@@ -104,14 +104,14 @@ for (let elem of document.querySelectorAll('li > a')) {
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<label for="birth-date">Date of Birth:</label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<h3>1</h3>
<h3><span class="sr-only">Question</span>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -134,7 +134,7 @@ for (let elem of document.querySelectorAll('li > a')) {
</fieldset>
</div>
<div class="question-block">
<h3>2</h3>
<h3><span class="sr-only">Question</span>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6147a14ef5668b5881ef2297.md
+3 -3
View File
@@ -89,14 +89,14 @@ assert.equal(cursor, 'pointer');
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<label for="birth-date">Date of Birth:</label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<h3>1</h3>
<h3><span class="sr-only">Question</span>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -119,7 +119,7 @@ assert.equal(cursor, 'pointer');
</fieldset>
</div>
<div class="question-block">
<h3>2</h3>
<h3><span class="sr-only">Question</span>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614878f7a412310647873015.md
+3 -3
View File
@@ -76,14 +76,14 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.top, '0px');
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<label for="birth-date">Date of Birth:</label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<h3>1</h3>
<h3><span class="sr-only">Question</span>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -106,7 +106,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.top, '0px');
</fieldset>
</div>
<div class="question-block">
<h3>2</h3>
<h3><span class="sr-only">Question</span>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487b77d4a37707073a64e5.md
+3 -3
View File
@@ -78,14 +78,14 @@ assert.isEmpty(new __helpers.CSSHelp(document).getStyle('main')?.paddingRight);
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<label for="birth-date">Date of Birth:</label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<h3>1</h3>
<h3><span class="sr-only">Question</span>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -108,7 +108,7 @@ assert.isEmpty(new __helpers.CSSHelp(document).getStyle('main')?.paddingRight);
</fieldset>
</div>
<div class="question-block">
<h3>2</h3>
<h3><span class="sr-only">Question</span>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487da611a65307e78d2c20.md
+3 -3
View File
@@ -89,14 +89,14 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.height, '100%
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<label for="birth-date">Date of Birth:</label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<h3>1</h3>
<h3><span class="sr-only">Question</span>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -119,7 +119,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.height, '100%
</fieldset>
</div>
<div class="question-block">
<h3>2</h3>
<h3><span class="sr-only">Question</span>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487f703571b60899055cf9.md
+3 -3
View File
@@ -94,14 +94,14 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.maxWidth, '600
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<label for="birth-date">Date of Birth:</label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<h3>1</h3>
<h3><span class="sr-only">Question</span>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -124,7 +124,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.maxWidth, '600
</fieldset>
</div>
<div class="question-block">
<h3>2</h3>
<h3><span class="sr-only">Question</span>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614880dc16070e093e29bc56.md
+3 -3
View File
@@ -62,14 +62,14 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('h2')?.paddingTop, '60px')
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<label for="birth-date">Date of Birth:</label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<h3>1</h3>
<h3><span class="sr-only">Question</span>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -92,7 +92,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('h2')?.paddingTop, '60px')
</fieldset>
</div>
<div class="question-block">
<h3>2</h3>
<h3><span class="sr-only">Question</span>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614883b6fa720e09fb167de9.md
+3 -3
View File
@@ -80,14 +80,14 @@ assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('.info')?.paddi
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<label for="birth-date">Date of Birth:</label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<h3>1</h3>
<h3><span class="sr-only">Question</span>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -110,7 +110,7 @@ assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('.info')?.paddi
</fieldset>
</div>
<div class="question-block">
<h3>2</h3>
<h3><span class="sr-only">Question</span>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614884c1f5d6f30ab3d78cde.md
+3 -3
View File
@@ -160,14 +160,14 @@ assert.isAtLeast(valInPx, 13);
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<label for="birth-date">Date of Birth:</label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<h3>1</h3>
<h3><span class="sr-only">Question</span>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -190,7 +190,7 @@ assert.isAtLeast(valInPx, 13);
</fieldset>
</div>
<div class="question-block">
<h3>2</h3>
<h3><span class="sr-only">Question</span>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61488ecfd05e290b5712e6da.md
+3 -3
View File
@@ -73,14 +73,14 @@ assert.equal(textAlign, 'left');
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<label for="birth-date">Date of Birth:</label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<h3>1</h3>
<h3><span class="sr-only">Question</span>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -103,7 +103,7 @@ assert.equal(textAlign, 'left');
</fieldset>
</div>
<div class="question-block">
<h3>2</h3>
<h3><span class="sr-only">Question</span>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148d99cdc7acd0c519862cb.md
+3 -3
View File
@@ -73,14 +73,14 @@ assert.equal(minWidth, '55px');
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<label for="birth-date">Date of Birth:</label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<h3>1</h3>
<h3><span class="sr-only">Question</span>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -103,7 +103,7 @@ assert.equal(minWidth, '55px');
</fieldset>
</div>
<div class="question-block">
<h3>2</h3>
<h3><span class="sr-only">Question</span>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148da157cc0bd0d06df5c0a.md
+3 -3
View File
@@ -77,14 +77,14 @@ document.querySelectorAll('.info label').forEach(el => {
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<label for="birth-date">Date of Birth:</label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<h3>1</h3>
<h3><span class="sr-only">Question</span>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -107,7 +107,7 @@ document.querySelectorAll('.info label').forEach(el => {
</fieldset>
</div>
<div class="question-block">
<h3>2</h3>
<h3><span class="sr-only">Question</span>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dc095264000dce348bf5.md
+3 -3
View File
@@ -94,14 +94,14 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.question-block')?.textAl
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<label for="birth-date">Date of Birth:</label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<h3>1</h3>
<h3><span class="sr-only">Question</span>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -124,7 +124,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.question-block')?.textAl
</fieldset>
</div>
<div class="question-block">
<h3>2</h3>
<h3><span class="sr-only">Question</span>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dcaaf2e8750e6cb4501a.md
+3 -3
View File
@@ -80,14 +80,14 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('p')?.fontSize, '20px');
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<label for="birth-date">Date of Birth:</label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<h3>1</h3>
<h3><span class="sr-only">Question</span>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -110,7 +110,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('p')?.fontSize, '20px');
</fieldset>
</div>
<div class="question-block">
<h3>2</h3>
<h3><span class="sr-only">Question</span>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dd31d210990f0fb140f8.md
+3 -3
View File
@@ -70,14 +70,14 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.question')?.paddingBotto
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<label for="birth-date">Date of Birth:</label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<h3>1</h3>
<h3><span class="sr-only">Question</span>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -100,7 +100,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.question')?.paddingBotto
</fieldset>
</div>
<div class="question-block">
<h3>2</h3>
<h3><span class="sr-only">Question</span>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md
+3 -3
View File
@@ -76,14 +76,14 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.answers-list')?.padding,
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<label for="birth-date">Date of Birth:</label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<h3>1</h3>
<h3><span class="sr-only">Question</span>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -106,7 +106,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.answers-list')?.padding,
</fieldset>
</div>
<div class="question-block">
<h3>2</h3>
<h3><span class="sr-only">Question</span>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dfab9b54c110577de165.md
+3 -3
View File
@@ -108,14 +108,14 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.border, '3px so
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<label for="birth-date">Date of Birth:</label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<h3>1</h3>
<h3><span class="sr-only">Question</span>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -138,7 +138,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.border, '3px so
</fieldset>
</div>
<div class="question-block">
<h3>2</h3>
<h3><span class="sr-only">Question</span>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e0bcc13efd10f7d7a6a9.md
+3 -3
View File
@@ -74,14 +74,14 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('footer')?.justifyContent,
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<label for="birth-date">Date of Birth:</label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<h3>1</h3>
<h3><span class="sr-only">Question</span>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -104,7 +104,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('footer')?.justifyContent,
</fieldset>
</div>
<div class="question-block">
<h3>2</h3>
<h3><span class="sr-only">Question</span>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e161ecec9511941f8833.md
+3 -3
View File
@@ -88,14 +88,14 @@ assert.isAtLeast(contrast(backgroundColour, aColour), 7);
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<label for="birth-date">Date of Birth:</label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<h3>1</h3>
<h3><span class="sr-only">Question</span>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -118,7 +118,7 @@ assert.isAtLeast(contrast(backgroundColour, aColour), 7);
</fieldset>
</div>
<div class="question-block">
<h3>2</h3>
<h3><span class="sr-only">Question</span>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e28706b34912340fd042.md
+3 -3
View File
@@ -86,14 +86,14 @@ assert.isAtLeast(Number(window.getComputedStyle(document.querySelector('address'
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<label for="birth-date">Date of Birth:</label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<h3>1</h3>
<h3><span class="sr-only">Question</span>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -116,7 +116,7 @@ assert.isAtLeast(Number(window.getComputedStyle(document.querySelector('address'
</fieldset>
</div>
<div class="question-block">
<h3>2</h3>
<h3><span class="sr-only">Question</span>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e335c1edd512d00e4691.md
+3 -3
View File
@@ -64,14 +64,14 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('*')?.scrollBehavior, 'smo
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<label for="birth-date">Date of Birth:</label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<h3>1</h3>
<h3><span class="sr-only">Question</span>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -94,7 +94,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('*')?.scrollBehavior, 'smo
</fieldset>
</div>
<div class="question-block">
<h3>2</h3>
<h3><span class="sr-only">Question</span>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e41c728f65138addf9cc.md
+3 -3
View File
@@ -80,14 +80,14 @@ assert.notExists(new __helpers.CSSHelp(document).getStyle('*'));
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<label for="birth-date">Date of Birth:</label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<h3>1</h3>
<h3><span class="sr-only">Question</span>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -110,7 +110,7 @@ assert.notExists(new __helpers.CSSHelp(document).getStyle('*'));
</fieldset>
</div>
<div class="question-block">
<h3>2</h3>
<h3><span class="sr-only">Question</span>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e5aeb102e3142de026a2.md
+6 -6
View File
@@ -82,14 +82,14 @@ assert.equal(document.querySelectorAll('a')?.[2]?.getAttribute('accesskey')?.len
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<label for="birth-date">Date of Birth:</label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<h3>1</h3>
<h3><span class="sr-only">Question</span>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -112,7 +112,7 @@ assert.equal(document.querySelectorAll('a')?.[2]?.getAttribute('accesskey')?.len
</fieldset>
</div>
<div class="question-block">
<h3>2</h3>
<h3><span class="sr-only">Question</span>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
@@ -401,14 +401,14 @@ address {
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span>:</label>
<label for="birth-date">Date of Birth:</label>
<input type="date" id="birth-date" name="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<h3>1</h3>
<h3><span class="sr-only">Question</span>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -431,7 +431,7 @@ address {
</fieldset>
</div>
<div class="question-block">
<h3>2</h3>
<h3><span class="sr-only">Question</span>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6351e7a8684bf5377c4ee7f7.md
+3 -3
View File
@@ -104,14 +104,14 @@ assert.equal(htmlFor, document.querySelectorAll('ul.answers-list > li > label >
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<label for="birth-date">Date of Birth:</label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<h3>1</h3>
<h3><span class="sr-only">Question</span>1</h3>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
@@ -133,7 +133,7 @@ assert.equal(htmlFor, document.querySelectorAll('ul.answers-list > li > label >
</fieldset>
</div>
<div class="question-block">
<h3>2</h3>
<h3><span class="sr-only">Question</span>2</h3>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a