Actually, I think outline in general is rarely considered. I know designers who are quite accessibility concious that weren’t even aware that outline existed. It seems to be one of those CSS components that has fallen behind on the best practice marketing talk - especially in the sense of how it can be used to boost usability.
E Meyer does state that people should define :focus, but I think he made a big mistake by including an outline: declaration in his CSS reset. In reality a “reset” shouldn’t interfere with browser accessibility features.
I’ve noticed two main reasons why “designers” remove outline (or don’t give an alternative:
They use a CSS reset without reading the instructions/advisories
They do it for visual/vanity purposes - really, as web designers they should know better
Yes, the problem is that the dotted outline border is often unsightly on tab menus or on items where text-indent has been used to hide text and the border goes all around the off screen text as well. There are better image replacement techniques though that can avoid this issue.
Designers could just offer more sightly visual clues anyway quite easily.
I suppose what was really needed was that tab should have its own pseudo class because the element should actually be made more prominent when tabbing because it’s hard to spot sometimes. Mouse users don’t really need that clue.
I thought WCAG already states that feedback is necessary to keyboard users? It doesn’t have to be outline, but people who let it get removed by the Meyer reset ignore Meyer’s comment stating they should add :focus styles later.
Once the link is clicked it will be red in IE6 because the visited state takes over.
Yes I see this regularly since I do use # as placeholders while building… not only would that link be red, but all the (unclicked) links with # as the “url” will also be red… which, really, makes a lot of sense to me : )
*edit I see it’s a skip link, not a #… Firefox has been showing those as visited for me for years. Is it not supposed to do this?
*edit2 hm, no, you’re right, IE6 is ignoring the specificity of p.test a.
Therefore it’s safer to do them in threes as I suggested above because a lot of people are using the old reset that defined :link styles.
My opinion is starting to shift from “resets cause a lot of unnecessary bother” to “resets are the evil that’s killing the interwebs”. Mostly because of the outline:none thing though. Outline seriously needs a media campaign or fundraiser or a something-a-thon on public television.
If a:link had been styled originally then the same thing applies. Therefore it’s safer to do them in threes as I suggested above because a lot of people are using the old reset that defined :link styles.
Usually on pages that I style I just use the last method (p.test a,p.test a:visited{color:blue}).
I never style :link. Ever. I recall Tommy saying something like, :link needs to be styled if you are using the name attribute for some reason, but since that had been deprecated from anchors in XHTML I never used “name” either.
please please please don’t forget :focus. Add it to your :hover statement. IE<8 won’t see it, but, tough.
Assuming of course you haven’t styled any font-sizes and other rules for the “a” element before otherwise they won’t inherit the font-size or font-family from the parent.
If you hadn’t previously defined any of the pseudo states you could have said:
Though my IE7 will use outline in a default sort of way: if nothing is mentioned about outline, I do get outlines in my links. It’s made me think twice about removing outline in main menus (the one place I tend to remove them, as it’s a pretty-boy menu and has :focus styles in it) since it’s better than nothing in IE.
Recently I removed it using :nth-of-type just so only browsers understanding :focus styles would remove the outline and use the :focus styles. It kept outline in IE6 and 7.
Yes I think we can lay the blame safely at the door of IE once again because it never implemented :focus or outline in IE7 and under so no one bothered to think about them. Old IE uses a:active incorrectly as though in some respects it were :focus and just totally confused everyone for years.
E Meyer does state that people should define :focus, but I think he made a big mistake by including an outline: declaration in his CSS reset.
YES especially because of IE. IE6 and 7 will show outlines on their own, but not :focus styles. Once you remove it, you can’t add anything back without using some goofy JS to make IE :focus.
It would help if every code example for something, whenever it has :hover, has :focus just in the same line by default. Lots of web developers out there have also never heard of :focus, if what we hear in the forums is to be believed… and one reason would be that many code examples (for other things) don’t have :focus listed anywhere.
Amen to that, Outline is being neglected! You should petition the W3C to include something on forced outline usage in WCAG (at least for the next version).
