Accessibility · Senior · Question 70 of 75

Why can `outline-offset` and `overflow: hidden` conflict?

1The parent can clip the focus ring so it isn't visible
2Browsers disable :focus-visible on overflow containers
3Focus can't move into containers with hidden overflow

Show the answer

Correct answer: The parent can clip the focus ring so it isn't visible

Explanation

Cards with rounded corners often clip outlines of their children. Use an inset outline or remove the clipping.

Further reading

Test yourself

Take the Accessibility · Senior quiz: questions and options are shuffled, and you get a review of your mistakes at the end.