What is the primary goal of CSS in terms of accessibility?
A
To structure HTML content
B
To define server behavior
C
To enhance visual presentation without harming usability
D
To manage database access
Analysis & Theory
CSS should improve the visual experience while keeping content accessible to all users, including those using assistive technologies.
Which CSS practice can negatively affect screen reader accessibility?
B
Hiding content with `display: none;`
C
Using relative units like `em`
D
Using contrast-friendly colors
Analysis & Theory
`display: none;` removes content from both the screen and screen readers.
What is a more accessible alternative to `display: none;` for hiding content visually but keeping it available to screen readers?
D
Use a `.sr-only` class with absolute positioning offscreen
Analysis & Theory
A `.sr-only` (screen-reader-only) class hides content visually while keeping it accessible to assistive technologies.
Why is sufficient color contrast important in CSS design?
A
It improves page load time
B
It prevents layout shifts
C
It ensures text is readable by users with visual impairments
D
It makes the design more colorful
Analysis & Theory
Proper color contrast improves readability for users with vision impairments or color blindness.
Which of these combinations provides better accessibility?
A
Light gray text on white background
B
Dark blue text on white background
C
Yellow text on white background
D
Red text on green background
Analysis & Theory
Dark blue on white offers strong contrast and readability, improving accessibility.
How can `focus` styles help with accessibility?
A
They improve animations
B
They help users see where they are when using the keyboard
C
They make buttons larger
Analysis & Theory
`:focus` styles indicate which element is active, helping keyboard and screen reader users navigate.
What is a good accessibility practice for hover effects?
A
Avoid using hover effects entirely
B
Use hover only for essential actions
C
Provide the same effect on `focus` for keyboard users
D
Only use hover on mobile
Analysis & Theory
Ensure hover styles have equivalent `:focus` styles so keyboard users are not excluded.
Which CSS property can cause accessibility issues if used improperly?
Analysis & Theory
Using low-contrast `color` values can make text unreadable for many users.
Why should you avoid removing outlines (`outline: none`) without replacements?
A
It can increase browser memory
B
It hides keyboard focus indicators
C
It disables form validation
Analysis & Theory
Removing outlines makes it hard for keyboard users to know which element is focused.
What is the WCAG minimum contrast ratio for normal text?
Analysis & Theory
WCAG recommends a **minimum 4.5:1** contrast ratio for normal text to ensure accessibility.