What is a recommended approach to focus outlines for accessibility?

What is a recommended approach to focus outlines for accessibility?

• A. Hide focus on keyboard users
• B. Maintain a visible focus indicator; style outline or glow; avoid removing focus styling.
• C. Use a different color for hover instead of focus
• D. Only show focus for mouse users

Answer: (B)

Visible focus indicators are essential for keyboard users to know which element is currently ready to receive input. When you navigate with the keyboard, a clear outline or glow lets you track your place and move confidently from element to element. The best approach is to keep a visible focus indicator on all focusable controls and style it so it’s clearly distinguishable, high-contrast, and consistent across the site. This means avoiding hiding the focus styling or relying solely on hover effects, since hover is tied to a mouse and won’t help someone tabbing through the page. If you want a refined behavior, you can use techniques like :focus-visible to show the focus ring mainly during keyboard navigation while still having a solid, accessible outline for all focus states. In practice, don’t remove the focus cue; provide a strong, accessible ring or glow that remains visible when an element has focus. For example, styling a focus state with a clear outline helps ensure users can always see where their next action will apply.

Visible focus indicators are essential for keyboard users to know which element is currently ready to receive input. When you navigate with the keyboard, a clear outline or glow lets you track your place and move confidently from element to element. The best approach is to keep a visible focus indicator on all focusable controls and style it so it’s clearly distinguishable, high-contrast, and consistent across the site. This means avoiding hiding the focus styling or relying solely on hover effects, since hover is tied to a mouse and won’t help someone tabbing through the page. If you want a refined behavior, you can use techniques like :focus-visible to show the focus ring mainly during keyboard navigation while still having a solid, accessible outline for all focus states. In practice, don’t remove the focus cue; provide a strong, accessible ring or glow that remains visible when an element has focus. For example, styling a focus state with a clear outline helps ensure users can always see where their next action will apply.