WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Amanda Nance
Date: Oct 15, 2010 2:39PM

Thanks William and everyone. I showed this email thread to a developer who
got it all working properly.

-Amanda

On Tue, Oct 12, 2010 at 11:25 AM, William Lawrence < <EMAIL REMOVED> >wrote:

> 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
>