Hide Focus attribute and CSS

This is an odd MSIE proprietary attribute (‘hidefocus‘) that is used to remove the dotted border (outline) of the focused elements, usually links or images, in the page. Modern CSS is much more robust and should be used in most cases for valid HTML.

The example below requires you to add the class specifically to elements, but your design may allow for you to do so for as elements of larger components of your design.

<style type="text/css">
.hidefocus:focus {
outline: none;
}
</style>

<a href="#" class="hidefocus" hidefocus="true">Some link</a>

NOTE: You should still provide some sort of visual focus mechanism for accessibility purposes, even when you prevent the default behavior.

REFERENCES:

Leave a Reply