<?xml version="1.0" encoding="utf-8"?>

Optimize for keyboard

Imagine navigating a website without a cursor. You'd probably feel completely lost and disoriented. That's what people using keyboards or similar assistive technologies experience when there's no visual indicator of keyboard focus. Here's what you can do to enhance accessibility in design:

  • Provide a consistent focus indicator. By default, most browsers use a dotted grey outline or solid blue border, but you can use your brand colors.
  • Ensure keyboard navigation. Provide keyboard access to all interactive elements, including forms, buttons, dropdowns, and modal boxes.
  • Maintain the logical hierarchy in code. It ensures that the keyboard focus can move in the intended order from top to bottom and from left to right, from the most important to less important content.
Improve your UX & Product skills with interactive courses that actually work