logo Accessibility Academy
PrinciplesBrowse ExercisesBrowse CoursesSettings

Exercise 2.10 - Focus Visible

The developer who created the webpage for answering quizzes... made another mistake. After adding the hidden radio input to solve the previous accessibility issues, they failed to handle the focus styling so as to make focus visible to keyboard users.

Requirements

Pending requirement:

When an answer is focused, a visual cue is displayed. Make sure to use a CSS outline.
Hint: Because you want to style the <label> when the <input> itself is focused, you must use the :focus-within pseudo-class.

Need help?

Show me the solution

Learning Material

logo Accessibility Academy
PrinciplesBrowse ExercisesBrowse CoursesSettings

Exercise 2.10 - Focus Visible

The developer who created the webpage for answering quizzes... made another mistake. After adding the hidden radio input to solve the previous accessibility issues, they failed to handle the focus styling so as to make focus visible to keyboard users.

Requirements

Pending requirement:

When an answer is focused, a visual cue is displayed. Make sure to use a CSS outline.
Hint: Because you want to style the <label> when the <input> itself is focused, you must use the :focus-within pseudo-class.

Need help?

Show me the solution

Learning Material

Editor

Preview Page