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.