Accessibility: Managing Focus

by John Durance

For keyboard-only users you can think of focus as their cursor. Focus is moved forwards with the Tab key, backwards with Shift-Tab, and it can jump to another region via a keyboard shortcut.

Most browsers display focus as an outline around the focussed element. Some users cannot see this outline, but they can still be aware of where focus is, if it’s managed correctly.

In a complex widget, where the inclusion of semantic markup is not possible, focus can easily get lost or unintentionally reset. This can be very frustrating for keyboard-only users.

A fix for this is to use the tabindex attribute. This attribute makes elements like div and span keyboard focusable and keyboard inter-actable. It adds elements into the logical tab order – if you pass it a value of zero – or into a customised tab position:

<!-- Logical tab order -->
<div onclick="" tabindex="0">Text</div>
<!-- Customised tab position -->
<div onclick="" tabindex="3">Text</div>

For use cases where the focus behaviour is confusing or unhelpful, and which tabindex cannot fix, use the JavaScript: focus.element to customise how focus gets set on your web page or application. In this simple example, focus is returned to the button after the function has executed:

 <button id="exit" onclick="example()">Exit</button>
 function example() {

Related Blog posts