mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-05-28 18:26:54 +00:00
feat(curriculum): add HTML accessibility quiz (#56470)
Signed-off-by: Christine <shecoder30@gmail.com> Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com> Co-authored-by: Ilenia <26656284+ilenia-magoni@users.noreply.github.com> Co-authored-by: Naomi the Technomancer <accounts+github@nhcarrigan.com> Co-authored-by: Bruce Blaser <bbsmooth@gmail.com>
This commit is contained in:
Christine Belzie
+108
-100
@@ -17,439 +17,447 @@ Answer all of the questions below correctly to pass the quiz.
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
What is accessibility?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
Accessibility focuses on making websites faster to load.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
Accessibility is a belief to make websites compatible with older browsers.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
Accessibility is a type of coding style.
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
Accessibility is a set of standardized practices that help make online content more usable by people with disabilities.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
What is a best practice for creating accessible headings?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
Add SEO-friendly keywords.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
Create humorous headings.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
Place `h6` headings at the beginning of your webpage.
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
Put headings in hierarchical order.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
What are the six main categories of ARIA roles?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
Document Structure, Landmark, Window, Explicit, Fidget, and Footer
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
Landmark, House, Live Region, Application, Window, and Extension
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
Window, Alert Dialog, Article, Cell, Banner, and Button
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
Document Structure, Landmark, Window, Abstract, Widget, and Live Region
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
What is the correct way to add an `alt` attribute to an `<img>` tag?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
```html
|
||||
alt="cat running"<img src="cat.jpg">
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
```html
|
||||
alt=""<img src="cat.jpg">
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
```html
|
||||
<img src="cat.jpg"> alt="cat running"
|
||||
```
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
```html
|
||||
<img src="cat.jpg" alt="cat running">
|
||||
```
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
What is WAI-ARIA?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
WAI-ARIA is a programming language specifically designed for creating animated web graphics.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
WAI-ARIA is a set of guidelines for making websites more visually appealing and colorful.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
WAI-ARIA is a tool for optimizing website loading speeds and server performance.
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
WAI-ARIA is a set of standardized practices that helps make online content more accessible to people with disabilities.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
What is the function of the `hidden` attribute?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
To shrink the focused elements.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
To add tabs.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
To hide an HTML form.
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
To prevent an element from being rendered.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
What is the function of the `tabindex` attribute?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
To change the color of focused elements.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
To shrink the focused elements.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
To add tabs.
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
To control keyboard navigation order and allow programmatic focus on elements that aren’t accessible via keyboard.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
Which of the following is a best practice for creating accessible data tables?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
Add a caption by using the `<paragraph>` tag.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
Use the `aria-label` attribute to make sure that the data cells associate with the proper header.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
Use absolute sizing to make sure that the data cells are not too large.
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
Designate row and/or column headers by using `<th>` elements.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
What is the difference between the attributes `aria-label` and `aria-labelledby`?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
The `aria-label`and `aria-labelledby` attributes serve the same purpose.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
The `aria-label` attribute is used to give a color to its label while the `aria-labelledby` attribute is used to give height to its label.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
The `aria-label` and `aria-labelledby` attributes keep labels undefined.
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
The `aria-labelledby` attribute allows you to give an element an accessible name by referencing an existing element on the page while the `aria-label` attribute allows you to define the name in the attribute itself.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
What is the function of the `aria-selected` attribute?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
To change the font size of an element.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
To change the background color of an element.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
To shrink an element.
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
To indicate if an element is selected.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
What is the function of `aria-expanded`?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
To change the font size of an element.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
To change the background color of an element.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
To shrink an element.
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
To indicate whether a control is currently expanded or collapsed, and whether its associated content is displayed or hidden.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
What is the correct way to give an input a label?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
Give the input a `name` attribute.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
Add placeholder text to the input.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
Pair the input with a `p` element.
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
Use the `for` attribute on `label`s and matching `id` attribute on `input`s to associate them.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
How does a screen magnifier help visually-impaired users navigate web pages?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
A screen magnifier reads the page's content aloud to the user.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
A screen magnifier converts text to Braille for tactile reading.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
A screen magnifier automatically adjusts the color contrast of web pages.
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
A screen magnifier helps visually-impaired users navigate web pages by allowing them to zoom in and out.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
What is the function of the `aria-haspopup` attribute?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
To indicate that an element has a tooltip associated with it.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
To specify the language of the element's content.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
To indicate that an element has keyboard shortcuts associated with it.
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
To indicate that an element can trigger a popup like a menu or dialog.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
What is a common keystroke to see if a website is keyboard navigation-friendly?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
<kbd>Enter</kbd> + <kbd>6</kbd>
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
<kbd>Enter</kbd>
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
<kbd>Caps Lock</kbd>
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
<kbd>Shift</kbd> + <kbd>Tab</kbd>
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
What is the function of the `aria-live` attribute?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
To record live music performances.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
To make HTML elements focusable.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
To make HTML elements smaller.
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
To indicate that an element's content is dynamic and will be updated, which enables assistive technology to mention those updates to the user.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
What is the purpose of the `role` attribute?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
To style elements with CSS animations.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
To define the visual appearance of HTML elements.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
To modify HTML tags.
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
To specify the type and purpose of an element, allowing assistive technologies to better understand how the element should be interpreted and interacted with.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
What is the best way to make a website's link accessible?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
Use phrases like "click here" to describe the link.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
Add the site's URL to the link's text.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
Link to two different URLs using the same words on the same page.
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
Avoid linking whole paragraphs.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
When recording audio for a video, it is best to:
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
Use the latest recording tool.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
Use jargon and terms related to the topic.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
Speak quickly.
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
Speak slowly and clearly to give users time to process and understand the presented information.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
What is the function of the `aria-checked` attribute?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
To show a checkmark.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
To mark HTML elements.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
To add a circle.
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
To indicate whether an element is checked (`true`), unchecked (`false`), or in an indeterminate state (`mixed`), meaning neither checked nor unchecked.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user