Estimated reading time: < 1 minute


This article was published more than a year ago, there may have been developments.
Please take this into account.

In today's article we see a simple CSS rule, already present in many CSS Reset. I'm talking about the property “outline”. If the regola “outline” do not set the browser will display a dotted box around each link clicked. The default setting is that because it is also thought to those who use the Tab key to navigate, and beading without any lose focus on that link no longer understand it happened. I'm also thinking of those who can not use the mouse to visual defect. By removing the beading renderesti the site inaccessible to them.


The edge is present on the link just visited

Among other things, define the “focus” is not optional, is clearly stated in the “web content accessibility guidelines“.

You might ask why would we remove the outline from the links. In fact we will not just remove it, but we will provide a viable alternative to the default focus.

To the example above, we have the property “a:focus” in the CSS in this way:

#test1 a:focus { background: #FFFF00; }
#test2 a:focus { color: #FF6600; }
#test3 a:focus { outline: #FF0000 dotted medium; }
#test4 a:focus { color: #FFFFFF; background: #FF0000; }

Referred to this HTML:

  <li>define a <span id="test1"><a href="#test1">alternate color of the background</a></span>,</li>
  <li>define a <span id="test2"><a id="txt" href="#">color for the text</a></span>,</li>
  <li>change <span id="test3"><a id="brd" href="#">bordo di default</a></span>,</li>
  <li><span id="test4"><a id="multi" href="#">change more&ugrave; parameters</a></span> to give high visibility&worse;.</li>


Look here:  Some methods for countering email spam


I keep this blog as a hobby by 2009. I am passionate about graphic, technology, software Open Source. Among my articles will be easy to find music, and some personal thoughts, but I prefer the direct line of the blog mainly to technology. For more information contact me.


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.