Get some focus

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.

Chrome Browser showing focus

Chrome Browser shows focus by having a orange line around the link

Firefox link showing focus

Firefox shows focus by having a dotted line around the link

IE link showing focus

IE shows focus by having a black dotted line around the link

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

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>