Remove Dotted Outline VS Accessibility

Remove the annoying dotted outline on links and form elements, keeping accessibility (and usability) intact… styling it too!

The issue of dotted outline

Webmasters (specifically semantic coders) usually get annoyed by the dotted outline that appears while clicking on a link (text or image) or a form element (button or other input fields such as radio). This can get ugly on the header part of a design, especially with coding that involves text indent.
You can try it for yourself by clicking on a link and mousing off of that link before letting go. This is done for accessibility (and usability), because when you are navigating with the keyboard, those outlines show you where your cursor is!

There is a series of solutions for this issue, but we should carefully decide what’s best as an overall value for price, as some solutions can hurt our site’s accessibility. Some of you might just don’t care, but I do.

So, let’s see what W3C says about outlines to help us get a backstage understanding, before we list the possible solutions.

W3C introduction to the outline property

By default browsers create outlines around visual objects such as links, buttons, active form fields.

Outlines behave similar to borders, but they differ from borders in the following ways:

  1. Outlines do not take up space.
  2. Outlines may be non-rectangular.

Let’s explain that.

1. The outline created with the outline properties is drawn “over” a box, i.e., the outline is always on top, and does not influence the position or size of the box, or of any other boxes. Therefore, displaying or suppressing outlines does not cause reflow or overflow.

2. Outlines may be non-rectangular. For example, if the element is broken across several lines, the outline is the minimum outline that encloses all the element’s boxes. In contrast to borders, the outline is not open at the line box’s end or start, but is always fully connected if possible.

Which are the outline properties and how do they behave?

The ‘outline-width‘ property accepts the same values as ‘border-width‘.

The ‘outline-style‘ property accepts the same values as ‘border-style‘, except that ‘hidden’ is not a legal outline style.

The ‘outline-color‘ accepts all colors, as well as the keyword ‘invert‘. ‘Invert’ is expected to perform a color inversion on the pixels on the screen. This is a common trick to ensure the focus border is visible, regardless of color background.

If the browser does not support the ‘invert’ value, then the initial value of the ‘outline-color’ property is the value of the ‘color’ property, similar to the initial value of the ‘border-top-color’ property.

The ‘outline’ property is a shorthand property, and sets all three of ‘outline-style’, ‘outline-width’, and ‘outline-color’.

The outline is the same on all sides, so no outline-top or outline-left. And since the outline does not affect formatting, it may well overlap other elements on the page.

Outlines and focus

Graphical user interfaces may use outlines around elements to tell the user which element on the page has the focus. These outlines are in addition to any borders, and switching outlines on and off should not cause the document to reflow. The focus is the subject of user interaction in a document (e.g., for entering text, selecting a button, etc.).

Users must keep track of where the focus lies and must also represent the focus. This may be done by using dynamic outlines in conjunction with the :focus pseudo-class.

Example:

For example, to draw a thick black line around an element when it has the focus, and a thick red line when it is active, the following rules can be used:

:focus { outline: thick solid black; }
:active { outline: thick solid red; }

The solutions

The nitty gritty part of the article now. Tested in modern browsers, so please share your experience with your browser.

Just remove the damn thing

Gone from every link (kills accessibility):
a { outline: none; }
We could apply this to specific CSS selectors instead of the whole site. For example to our header (still kills accessibility a little):
#header a { outline: none; }

Oh, wait! We can save the day, using active/focus statuses without losing the accessibility.
Or we can apply outline:none to the active state or use overflow:hidden for text-indent situations:
a:active { outline: none; }
or
a{ overflow: hidden; }

Gone from every flash object (to be honest I see no accessibility drawback here):
object { outline: none; }

Gone from submit buttons or input elements that behave as such (not so bad for accessibility, but not valid):
/* FireFox*/
input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner { border: 0; }
/* IE8 */
input[type="submit"]:focus, input[type="button"]:focus { outline: none; }

Source: Stack Overflow

There’s an alternative javascript way, 1st line for links 2nd for input element (which kills all possibility of keyboard use with that input element):
onfocus="this.hideFocus=true;"
onfocus="this.blur()"

A quick jQuery kill for links:
$('a').each(function(){this.onmouseup = this.blur();});

A longer jQuery kill for links:
$('a').live('mousedown', function(e) {
e.target.blur();
e.target.hideFocus = true;
e.target.style.outline = 'none'
}).live('mouseout', function(e) {
e.target.blur();
e.target.hideFocus = false;
e.target.style.outline = null;
});

A long javascript kill:
var runOnLoad = new Array(); // for queuing multiple onLoad event functions
window.onload = function() { for(var i=0; i
// hide dotted :focus outlines when mouse is used
// but NOT when tab key is used
if(document.getElementsByTagName)
for(var i in a = document.getElementsByTagName('A')) {
a[i].onmousedown = function() {
this.blur(); // most browsers
this.hideFocus = true; // ie
this.style.outline = 'none'; // mozilla
}
a[i].onmouseout = a[i].onmouseup = function() {
this.blur(); // most browsers
this.hideFocus = false; // ie
this.style.outline = null; // mozilla
}
}

Source: Mike Smullin

I think I saw a CSS way to remove the outline for older IE versions, not sure if it works; but certainly is not valid (in this example for links):
a { noFocusLine:expression(this.onFocus=this.blur()) }

Style it, don’t kill it

Instead of killing it, we could just style it (IE6 and IE7 don’t support this, as they are not modern browsers):
:focus { outline: 4px solid green; }
Notice that I used :focus instead of a:focus to make it global, so it applies to form buttons as well and not just links.
Source: haslayout.net

Putting all together, deciding on best solution

Personally, I dislike the dotted outlines, but I have to admit accessibility (and usability) should not be ignored. My recommendation after looking at the solutions above would be to do a bit of both; let me call this kill in style.
As I don’t like javascript options, I’d only use CSS that’s valid for modern browsers and wait for any comments from you regarding non-modern ones.

Alright! I’d remove the outlines from specific areas of a design, get rid of them for things that has no use for, and then style it for the areas that would be nice to have it there. For the form buttons, I’m using a code by Stu Nicholls. Here’s my final code:

#header a:active, object { outline: none; }
:focus { outline: 2px solid green; }
.button { width: your_button_width_in_px; height: your_button_height_in_px; background:url('path_to/your_initial_image'); position: relative; }
.button a img { display: none; }
.button a:hover { background:url('path_to/your_hover_image'); }
.button a:active, .button a:focus { position: absolute; width: 0; height: 0; top: 0; left: 0; }
.button a:active img, .button a:focus img { display: block; width:your_button_width_in_px; height: your_button_height_in_px;}

6 Responses to “Remove Dotted Outline VS Accessibility”

  1. Come eliminare il bordo tratteggiato attorno a un link | paitadesignblog Says:

    [...] The Dotted Outline Don’t remove the outline from links Remove Dotted Outline VS Accessibility Removing Dotted Border on Clicked Links Better CSS outline suppression Remove the outline from [...]

  2. kuh • pain´• kah − Mozilla (Firefox) Accessibility vs Design vs Me Says:

    [...] http://stamatiskritikos.com/2010/01/03/remove-dotted-outline-vs-accessibility/ Tagged and categorized as: General | TrackBack [...]

  3. kukur Says:

    +++

  4. blog ubezpieczeniowy Says:

    Great post, Happy Christmas greetings!

  5. Jae Lucek Says:

    Fantastic goods from you, man. I’ve be mindful your stuff prior to and you’re simply too great. I really like what you have obtained here, certainly like what you are saying and the way in which wherein you assert it. You are making it entertaining and you continue to take care of to stay it sensible. I cant wait to read far more from you. That is actually a tremendous website.

  6. Outline ist wirklich over and out im Firefox Says:

    [...] Remove dotted outline versus accessibility [...]

 
 

RSS Updates