Get some focus - accessible web pages

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.

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

Firefox shows focus by having a dotted line around the link

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.

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