How to make focus indicator accessible

A focus indicator is a dotted or solid line present around the tab-able elements such as links, buttons, and form fields. While navigating the page through keyboard tab key, the focus indicator appears around elements when they receive keyboard focus. It helps users to visually determine which element has current keyboard focus. All major browsers like Firefox, Chrome, Internet Explorer and Safari shows a thin dotted or solid line around the elements when they receive the keyboard TAB focus. But the focus indicator look different in each of the browsers. For example, Internet explorer and Firefox shows a dotted line whereas Chrome shows a blue solid line. In this article lets discuss on why focus indicator is suppressed in a web page and how to make focus indicator accessible for user.

 

Benefits of Focus Indicator:

A visible focus indicator not only helps users with certain disabilities but also helps sighted users to know where the current keyboard focus is when navigating the page through keyboard alone.
Following are different groups who majorly get benefited with presence of focus indicator:
Motor – Users who cannot use mouse and completely rely upon keyboard to navigate the web page and access interactions present in it.
Visual – Users who have low vision use screen readers often and keyboard to navigate the web page.\
Cognitive – Users with memory limitations may lose the track they are working on.

 

CSS Outline property

What if we don’t like the default dotted focus indicator and want to create something fancy? Can an author or developer create a customized focus indicators for interactive elements? Yes, a customized focus indicator can be shown using “outline” which is a CSS property that draws a line around the elements.

 

When focus indicators are not visible?

The HTML elements are not rendered by browsers in the same way. Sometimes there would be mismatch in padding, margin for same elements when seen in different browsers. This behavior makes it difficult to achieve pixel perfect (maintain pixel to pixel accuracy as per visual design specifications) while developing a web page. Hence developers go for CSS reset style sheet which has a set of CSS rules that resets the styling of all HTML elements to a consistent baseline.

Sample code:
In the sample code, the css properties are set for few html elements in reset.css.

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, button, input {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
outline : 0;
}

As per above sample code, developers uses css property outline: none for following reasons.

  1. A large focus indicator which sometimes occupies the entire row if developer provides an image inside an anchor tag.
  2. It is rarely misunderstood that the focus indicator occupies some space and breaks pixel perfection
  3. Developers assume there is not harm with presence of outline and does not think to remove it.

 

Impact on Accessibility:

But, due to the presence of outline: none, all browsers suppress the default focus indicator they generally show for all interactive elements making it inaccessible for certain users. Motor disability group users who rely on keyboard will not know where their current keyboard focus is and hence cannot activate the interactive elements precisely. Hence they may have to rely on someone to complete their task.

Remedy:

  1. Removing outline:

    A straight forward remedy is to remove the “outline: none” property from reset css file. By removing it from reset.css, browsers will show the default focus indicator for all interactive elements and makes it accessible for all users.

  2. Define separate styles:

    Instead of removing the outline: none property, define separate styles for anchor element. In the above code snippet, remove the anchor and define it separately without outline: none.

    Sample code:
    html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote {
    margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; outline : 0;
    }
    a{
    margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;
    }

  3. CSS Pseudo classes:

    Pseudo class is used to define the special state of the element like hover (when user mouse over on an element), focus (when keyboard focus is on an element) or activates it.
    Instead of removing outline: none from reset css, use pseudo class: focus. Define the outline explicitly for anchor elements when they receive keyboard focus using “: focus” pseudo class.

    Sample code:
    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, a {
    margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; outline: 0;
    }
    a: focus { outline: 1px dotted black }

    Here by default anchor element has outline: none property making browsers to suppress the default focus indicator. But as outline is explicitly define in :focus pseudo class, browsers will overwrite the outline:0 and shows dotted black focus indicator with width of 1px. Hence users will still know where the keyboard focus is when they navigate through TAB key

 

Conclusion:

As per 2.4.7 focus visible success criteria, any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. The presence of outline: none in reset.css or any of the css files makes browsers to suppress the default focus indicator around interactive elements thus arising accessibility problems. Authors or developers should not encourage using outline: none in CSS. If at all they have to use it, then pseudo classes must be used to make the focus indicator visible.

1 Comment to "How to make focus indicator accessible"

  1. Roberta Dvojack's Gravatar Roberta Dvojack
    April 20, 2017 - 4:27 am | Permalink

    Thank you. This is very useful information.

Leave a Reply