Accessible Focus Indicator Using :focus-visible
Explore how to apply the :focus-visible pseudo-class in CSS to create visible focus outlines only for keyboard users. This lesson helps you improve web accessibility by showing how to style buttons with a clear focus ring that appears on keyboard focus, while avoiding unnecessary outlines for mouse clicks, all without using JavaScript or changing HTML.
We'll cover the following...
We'll cover the following...
Problem description
Given an HTML page with a button <button class="keyboard-focus">Accessible Action</button>, write CSS to meet the following requirements: ...