Onfocus Styling

Estimated reading time: ( words)

Summary: The active area of the web page is the area targeted by the keyboard or activated by mouse click, and users should be able to tell what area is active through some sort of visual cue. Onfocus indicators included in some browsers are inconsistent, so you should be sure to add it via CSS.

When a user tabs through a web page using a keyboard, they move from active area to active area. An active area can be a hyperlink, form element, button, or any object the user has tabbed to. When a user lands on a link or object, that object has focus or is “onfocus”.  

Users should be able to tell what area of a web page is onfocus via some sort of visual indicator, often an outline box (see below).

While many browsers automatically add an onfocus visual indicator, that functionality may be inconsistent and may not work for every page. Therefore you should use CSS ensure onfocus styling is included in your pages.

There isn’t a clear convention of how an onfocus link or object should look like; accessibility guidelines merely dictate that the visual style should be distinct (“highly visible”) from the rest of the text

This CSS code example results in a light blue outline around the onfocus object:

*:focus, *:hover{
outline: none;
    border-color: #9ecaed;
    box-shadow: 0 0 10px #9ecaed;
}

Another common form of onfocus styling for hyperlinks is to underline them (if they are not underlined already as part of the defined site styles) and add a light gray background. 

*:focus,*:hover{
    text-decoration:underline;
    background-color:#ddd;
}

The results of the above code examples look like this:

A textbox without onfocus style looks plain. A text box with focus has a light blue outline around the box. A normal hyperlink is indicated in plain, bright blue text, while a link with focus has the bright blue text plus underline and a gray box.

If you have added any hover effects either through CSS or Javascript, make sure the effect also displays when the item has focus.

If you’re wondering what colors to use for your visual styling, check your college or unit’s graphic designer or the U of M brand guidelines for appropriate contrasting palette colors.

Did you find what you were looking for?

Learn more

Get help

Submit your accessibility question for a personal response, and we'll use your question to improve the content of this website.