Jukka K. Korpela wrote:
> On Fri, 2 Mar 2007, Rob Wilmshurst wrote:
>> I personally wouldn't do this though; as part of the browser's default
>> behaviour the user is expecting it. That outline indicates that the
>> link is currently active. It may be annoying when clicking, but if one
>> is tabbing through the document then it's the only thing to show what's
>> currently in focus. [...]
> I couldn't agree more.
Nor can I: it is a real good accessibility feature. People who don't
have the abilities to use a mouse, can use the Tab key to track the
links in a page. The outline dots are the "mouse pointer" for them: the
only way to see on which link they are, and where they have to click (=
Enter key) to visit the link.
One thing you can do to get a less striking presentation, is to style
the outline dots just around the img, and not with a bottom margin in
the text area, as in your testpage. The bottom margin is caused by the
fact that in general an image is placed vertically on the same height as
the letters of the line in question, but also with adding the needed
space for characters with something under the line, like p,y or j.
You can check this (in not-IE) by enlarging the font-size: the bottom
distance of the dotted outline border will grow and shrink according to
the scaling factor.
To get rid of this, you can:
1. Add a vertical position for the images in the links:
* screenshot with adapted css
Then the outline is just around the img. - But with dark images it is
hard to see.
2. Alternative (better accessible) is in your case to extend the dotted
outline to the whole clicking area. Voilà:
3. An other alternative for better visibility of the outline dots is to
style the img with a 1px white border (or 1px padding with white
background-color). Then there is some distance between img and dots,
whatever the colors of the img are.
CSS is giving choices! :-)
btw: In the meantime I've set the font-size in em instead of in the
fixed px unit. Now also scalable for IE-visitors who like/need to
enlarge the fonts.
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/