Web Accessibility Basics – Focus Outline

This is the second article on my web accessibility basics series. See Web Accessibility – Where to Start to find out more about contrast standards.

Visual Navigation

Have you ever been comfortably navigating your laptop or desktop computer when suddenly your mouse cursor disappears? Maybe it froze or got lost in some black hole off the screen. It is incredibly frustrating because your computer usage comes screeching to an immediate halt. You literally cannot interact with your computer without that little visual indicator of where you are on the screen.

The mouse arrow, pointer, or cursor provides a crucial component of your computer using experience. It is the visual indicator of where exactly you are working in the interface. In websites and applications it provides additional visual queues. The arrow may change to a pointer or finger icon when you are over an interactive element such as a link.

When you are visually navigating and interacting with a computer screen the visual queue provided by the mouse arrow, a blinking cursor, or a pointer makes the difference between a usable and not usable interface.

Visual Navigation Via Keyboard

Now that you know how very crucial it is to have a visual indicator of where you are on your computer screen, imagine that for some reason you are not using a mouse to navigate. There are number of reasons that this might be the case. You may need to use a keyboard to navigate due to a having a limited range of motion in your wrist, or because you have a child in one of your arms. You may be using a screen reader to read the contents of the screen to you and not using the visual interface at all.

In these cases, having functional keyboard navigation is incredibly important. The visible focus state is the keyboard user equivalent of the visible mouse cursor. Keyboard users can use the tab button to jump between links, buttons, inputs, and other interactive elements on the page. So how do they tell exactly what they are interacting with on the screen? They need a visible focus state.

Luckily browsers set visible focus states by default. If you have ever seen that bright blue outline around a link or button (typically a dashed line in internet explorer and firefox) then you are familiar with the visible focus states.

So Where is My Visible Focus State?

Unfortunately, these outlines are often disabled by developers due to design teams disliking them, and in some cases responsive frameworks like Foundation will disable them by default.

You can actually customize your focus outlines in css using the focus pseudo-class.
a:focus {
outline: 1px dashed red;
}
button:focus {
outline: 1px dashed #222;
}
input:focus {
outline: 2px auto blue;
}

The above code applies outlines to their respective html elements on a page.

Set Visible Focus States on All Interactive Elements

You should also have visible focus states on any interactive element on the page. By default focus states are applied to form inputs, buttons, and links (‘a’ tags). For example, if you have a slide out panel, or series of sliding panels like an accordion menu system, then you should have a visible focus state on the element that activates the hidden panel.

It is a good idea to use a button element anytime that you want to have an interactive panel on a page that toggles open and closed – e.g. drop-down panels, accordions, etc.

By default button elements are focusable. Another common method is to us an ‘a’ tag with the href attribute set to “#”. This will create a focusable element for the activating element of your panel.

It is important that interactive elements be focusable by keyboard users, and for the focus state to be visible. That gives your keyboard user a visible queue of what element they are on. Non-focusable elements may not be findable by the keyboard. In other words, your keyboard users may have no way of knowing that an element can be interacted with if you do not use a focusable element, and set a visible focus state to make it clear when that element gets focus.

Additional Resources

In the next article I will discuss how to make your interactive elements activate with the keyboard.

Advertisements

One thought on “Web Accessibility Basics – Focus Outline

  1. Pingback: Activating Interactive Element with Keyboard Interactions – Writing Rainbough

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s