Principle 2: Operable

Ensure items which keyboard users are focussed on, are shown through active focus (visually indicated)

Some computer users are physically unable to use a mouse. Others prefer using keyboard because it’s often more efficient. Computers in general, and web browsers specifically, can be operated with keyboard alone. In web browsers, users can use the tab key to jump between focusable elements (i.e., links, form fields, and any other content that has been added to the tab order with the HTML tabindex attribute). However, it is often difficult for keyboard users to tell where they are on the page. Designers must take care to ensure that it is easy to tell which item on the page currently has keyboard focus.

Best practice

Avoid Overriding Browsers’ Default Focus Indicator

All browsers display a visible outline around the element that currently has keyboard focus. This outline can be disabled using the outline:none property in CSS. Do not do this unless you are offering a better focus indicator than the one provided by browsers (see the next section).


additional guidance

References and useful links