curriculum/challenges/english/blocks/quiz-css-accessibility/66ed8fc1f45ce3ece4053ead.md
To pass the quiz, you must correctly answer at least 9 of the 10 questions below.
Why do you need to have good color contrast on your webpage?
To make the page more vibrant.
To meet requirements for search engine optimization (SEO).
To make important elements of the page stand out.
To make the page content accessible and readable.
Which of the following tools allows you to enter background and foreground colors and check their contrast ratio?
TPGi Colour Contrast Analyzer
Figma
Canva
WebAIM's Color Contrast Checker
Which of the following tools allows you to pick background and foreground colors from content displayed on your screen and check for their contrast ratio?
Figma
Canva
WebAIM's Color Contrast Checker
TPGi Colour Contrast Analyzer
Why should you NOT use display: none and visibility: hidden to visually hide content?
These methods make it so that only assistive technologies like screen readers can access the hidden content.
These methods make it so that the content is only hidden until users move their mouse over the content.
These methods do not work with some browsers.
These methods remove the content from the accessibility tree, making it impossible for screen readers to access the hidden content.
What is an accessibility tree?
A visual representation of the layout of a webpage.
A structure used by screen readers to read the text content of a webpage.
A copy of the DOM tree.
A structure used by screen readers to interpret and interact with the content on a webpage.
Which of the following ensures that an image has a minimum width of 400px, but becomes wider when the viewport width is greater than 1000px?
img {
width: max(400px, 10vw);
}
img {
width: max(400px, 30vw);
}
img {
width: max(400px, 20vw);
}
img {
width: max(400px, 40vw);
}
Which of the following scroll-behavior value allows a smooth scrolling behavior?
auto
inherit
revert
smooth
Which of the following features is used to detect the user's animation preference?
prefers-contrast
display-mode
animation
prefers-reduce-motion
Which of the following is an accessibility issue of the placeholder attribute in an input element?
Placeholder text prevents screen readers from reading the input label text.
Placeholder text prevents screen readers from reading the input value.
Placeholder text is too small to be readable.
Placeholder text can be confused with an actual input value.
What does the hidden attribute do?
It hides content and reveals on hover.
It hides content only from the accessibility tree.
It hides content visually, but the content is available in the accessibility tree.
It hides content both visually and from the accessibility tree.