WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Firefox vs. IE - dotted outline to show element in focus

for

From: steven
Date: Oct 12, 2010 10:12AM

Don't forget to use :active for aged IE browsers which don't understand
:focus

Steven


-----Original Message-----
From: <EMAIL REMOVED>
[mailto: <EMAIL REMOVED> ] On Behalf Of William Lawrence
Sent: 12 October 2010 16:26
To: WebAIM Discussion List
Subject: Re: [WebAIM] Firefox vs. IE - dotted outline to show element in
focus

Amanda,

> I see that the <LI> has "outline-style: none". I'm assuming that's what
> Steve is referring to.

In the CSS of the site, it is best to add a :focus pseudo-class
selector to any declaration that is already specifying the :hover
pseudo-class selector. For example, if the scope of the design
specifies the following CSS:

a:hover { background-color: #000; color: #fff; text-decoration: underline; }

The add the :focus pseudo-class selector as such:

a:focus, a:hover { background-color: #000; color: #fff;
text-decoration: underline; }

OR

a:focus { background-color: #fff; color: #000; outline:1px solid #000 }
a:hover { background-color: #000; color: #fff; text-decoration: underline; }

OR

The opportunities for controlling the presentation of your focus
management are endless.

There are different ways in which it may be written and ordered in the
CSS which you're working, however don't be afraid to specify :focus
for every focusable element. It is in the :focus pseudo-class selector
that you will be able to control the presentation of the outline of
the links in your "tab bar" navigation.

For further reading, an esteemed member of this list wrote a bit about
it awhile back:
http://24ways.org/2009/dont-lose-your-focus

There are other resources as well: http://www.delicious.com/tag/focus+css

Cheers!
William