jprdonnelly/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-05-12 03:00:53 -04:00
Code Issues Projects Releases Wiki Activity

feat(curriculum): adding JS and A11y quiz questions (#61616)

Browse Source 
Co-authored-by: Tom <20648924+moT01@users.noreply.github.com>
Co-authored-by: Dario <105294544+Dario-DC@users.noreply.github.com>
This commit is contained in:
Jessica Wilkins
2025-08-06 06:42:25 -07:00
committed by GitHub
parent 276b39638e
commit 6bf3e33b69
1 changed files with 91 additions and 270 deletions
Download Patch File Download Diff File Expand all files Collapse all files

361
curriculum/challenges/english/25-front-end-development/quiz-js-a11y/68376949899fcbad3c9cac23.md
View File

@@ -7,7 +7,7 @@ dashedName: quiz-js-a11y
# --description--
To pass the quiz, you must correctly answer at least 18 of the 20 questions below.
To pass the quiz, you must correctly answer at least 9 of the 10 questions below.
# --quizzes--
@@ -17,438 +17,259 @@ To pass the quiz, you must correctly answer at least 18 of the 20 questions belo
#### --text--
Placeholder question
Which attribute is used for accessibility purposes to indicate if a control is expanded or collapsed?
#### --distractors--
Placeholder distractor 1
`aria-controlled`
---
Placeholder distractor 2
`aria-controls`
---
Placeholder distractor 3
`aria-expands`
#### --answer--
Placeholder answer
`aria-expanded`
### --question--
#### --text--
Placeholder question
Which two attributes can be used in combination with `aria-expanded` to establish a programmatic connection between the controlling element and the element it controls?
#### --distractors--
Placeholder distractor 1
`aria-labelledBy` and `aria-owns`
---
Placeholder distractor 2
`aria-controls` and `aria-label`
---
Placeholder distractor 3
`aria-live` and `aria-owns`
#### --answer--
Placeholder answer
`aria-controls` and `aria-owns`
### --question--
#### --text--
Placeholder question
Which of the following attributes creates a live region on your page which can be used to notify screen reader users of dynamic content changes in the live region as they occur?
#### --distractors--
Placeholder distractor 1
`aria-live-regions`
---
Placeholder distractor 2
`aria-lives`
---
Placeholder distractor 3
`aria-live-region`
#### --answer--
Placeholder answer
`aria-live`
### --question--
#### --text--
Placeholder question
Which of the following `div` elements will be disabled only to people using assistive technologies, such as screen readers?
#### --distractors--
Placeholder distractor 1
```html
<div role="button" tabindex="-1" aria-disables="true">Edit</div>
```
---
Placeholder distractor 2
```html
<div role="button" tabindex="-1" aria-disabling="true">Edit</div>
```
---
Placeholder distractor 3
```html
<div role="button" tabindex="-1" aria-disable="true">Edit</div>
```
#### --answer--
Placeholder answer
```html
<div role="button" tabindex="-1" aria-disabled="true">Edit</div>
```
### --question--
#### --text--
Placeholder question
Which of the following is a valid use of the `aria-expanded` attribute?
#### --distractors--
Placeholder distractor 1
```html
<button aria-expanded="expand">Menu</button>
```
---
Placeholder distractor 2
```html
<button aria-expanded="allow">Menu</button>
```
---
Placeholder distractor 3
```html
<button aria-expanded="set">Menu</button>
```
#### --answer--
Placeholder answer
```html
<button aria-expanded="true">Menu</button>
```
### --question--
#### --text--
Placeholder question
Which attribute is used to create a programmatic relationship between a controlling element and the element it affects on the page?
#### --distractors--
Placeholder distractor 1
`aria-set`
---
Placeholder distractor 2
`aria-region`
---
Placeholder distractor 3
`aria-expanded`
#### --answer--
Placeholder answer
`aria-controls`
### --question--
#### --text--
Placeholder question
Which of the following is NOT a common use case for live regions?
#### --distractors--
Placeholder distractor 1
Messages that are displayed after an action has been taken (such as an error message or confirmation).
---
Placeholder distractor 2
Content that updates periodically (such as a ticker, marquee, or countdown timer).
---
Placeholder distractor 3
General status messages (such as updates about a process).
#### --answer--
Placeholder answer
Messages that are displayed before an action has been taken (such as a confirmation dialog).
### --question--
#### --text--
Placeholder question
Which of the following examples is the correct way to indicate which tab is currently selected?
#### --distractors--
Placeholder distractor 1
```html
<div role="tablist">
<button role="tab" aria-selecting="true">Tab 1</button>
<button role="tab" aria-selecting="false">Tab 2</button>
<button role="tab" aria-selecting="false">Tab 3</button>
</div>
```
---
Placeholder distractor 2
```html
<div role="tablist">
<button role="tab" aria-select="true">Tab 1</button>
<button role="tab" aria-select="false">Tab 2</button>
<button role="tab" aria-select="false">Tab 3</button>
</div>
```
---
Placeholder distractor 3
```html
<div role="tablist">
<button role="tab" aria-selects="true">Tab 1</button>
<button role="tab" aria-selects="false">Tab 2</button>
<button role="tab" aria-selects="false">Tab 3</button>
</div>
```
#### --answer--
Placeholder answer
```html
<div role="tablist">
<button role="tab" aria-selected="true">Tab 1</button>
<button role="tab" aria-selected="false">Tab 2</button>
<button role="tab" aria-selected="false">Tab 3</button>
</div>
```
### --question--
#### --text--
Placeholder question
Which of the following is NOT a valid value for the `aria-live` attribute?
#### --distractors--
Placeholder distractor 1
`off`
---
Placeholder distractor 2
`polite`
---
Placeholder distractor 3
`assertive`
#### --answer--
Placeholder answer
`on`
### --question--
#### --text--
Placeholder question
Which of the following `aria-live` attribute values means that the update is very important and has the highest priority?
#### --distractors--
Placeholder distractor 1
`now`
---
Placeholder distractor 2
`immediate`
---
Placeholder distractor 3
`urgent`
#### --answer--
Placeholder answer
`assertive`
### --question--
#### --text--
Placeholder question
#### --distractors--
Placeholder distractor 1
---
Placeholder distractor 2
---
Placeholder distractor 3
#### --answer--
Placeholder answer
### --question--
#### --text--
Placeholder question
#### --distractors--
Placeholder distractor 1
---
Placeholder distractor 2
---
Placeholder distractor 3
#### --answer--
Placeholder answer
### --question--
#### --text--
Placeholder question
#### --distractors--
Placeholder distractor 1
---
Placeholder distractor 2
---
Placeholder distractor 3
#### --answer--
Placeholder answer
### --question--
#### --text--
Placeholder question
#### --distractors--
Placeholder distractor 1
---
Placeholder distractor 2
---
Placeholder distractor 3
#### --answer--
Placeholder answer
### --question--
#### --text--
Placeholder question
#### --distractors--
Placeholder distractor 1
---
Placeholder distractor 2
---
Placeholder distractor 3
#### --answer--
Placeholder answer
### --question--
#### --text--
Placeholder question
#### --distractors--
Placeholder distractor 1
---
Placeholder distractor 2
---
Placeholder distractor 3
#### --answer--
Placeholder answer
### --question--
#### --text--
Placeholder question
#### --distractors--
Placeholder distractor 1
---
Placeholder distractor 2
---
Placeholder distractor 3
#### --answer--
Placeholder answer
### --question--
#### --text--
Placeholder question
#### --distractors--
Placeholder distractor 1
---
Placeholder distractor 2
---
Placeholder distractor 3
#### --answer--
Placeholder answer
### --question--
#### --text--
Placeholder question
#### --distractors--
Placeholder distractor 1
---
Placeholder distractor 2
---
Placeholder distractor 3
#### --answer--
Placeholder answer
### --question--
#### --text--
Placeholder question
#### --distractors--
Placeholder distractor 1
---
Placeholder distractor 2
---
Placeholder distractor 3
#### --answer--
Placeholder answer