Make focus indicator accessible

In continuation to my previous blog post on focus indicator, here we learn on what makes browsers to suppress the default focus indicator and how to make it accessible.

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.

•  A large focus indicator which sometimes occupies the entire row if developer provides an image inside an anchor tag.
• It is rarely misunderstood that the focus indicator occupies some space and breaks pixel perfection
• 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. 

Focus Indicator

Focus Visible: Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. (Level AA)


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 to indicate where the current keyboard focus is. 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 where as Chrome shows a blue solid line.

All elements which are interactive with mouse should be operable using keyboard as well. All those elements which are operable with keyboard should have a visible focus indicator when they receive keyboard focus.

Benefits of Focus Indicator:

                     A visible focus indicator not only helps users with certain disabilities but also helps normal users to know where the current keyboard focus is when navigating the page through keyboard alone.

Imagine you are in internet café where mouse is not responding. In such situations you rely on keyboard to navigate the page, fill forms and submit the application. If you have to submit a form but there is no visual keyboard focus indicator around elements, then you might not know whether the keyboard focus is on button or when to hit the enter key. It may cancel the application all together if you submit the form but focus is on another button.

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.