Get some focus

18 September 2009

When you click on or tab to an element, a 'focus' event is fired.  Focus has a significant role if we want to make sure our websites and especially our interactive features are accessible to everyone.

Focus is by default indicated visually either using an outline around the active element or by the flashing cursor for typed input areas.  This indicator may vary between browsers.

However, there are only 2 types of element that can receive focus through the keyboard.

• anchor elements with href attribute
  • <a href="#">...</a>
• form field, for example
  • <input type="text" /> and other input elements
  • <textarea></textarea>
  • <select>...</select>
  • <button>...</button>

Wherever you need to have user-triggered interactivity, you need to use one of these focusable elements for the trigger.  I'll cover this in greater depth in a later post.

About tabindex

Yes, you can force elements to receive focus by giving them a tabindex.   However, you then mess up the order in which elements receive focus.  Instead of following the order in which the HTML was developed, the focus will run through the tabindexed elements by numerical order, then go onto the non-tabindexed elements.  This might result in the cursor jumping around the page, which is especially annoying if the page is long enough to scroll.

Try the code example to test it out