Hi Dwain,
Others will have different ways of handling this, but I can tell you how I
handle incorporating link color, underlining and images through an external
css stylesheet.
Color: I use the normal blue for unvisited likes and the normal purple for
visited links. All links are set to bold to make them easier to see and
identify.
Underlining: Both unvisited and visited links are underlined (border-bottom)
in their respective colors. This is set in the external stylesheet.
Images: I use two images/icons to identify if a link has or has not been
visited. Each image is 20 x 15 pixels in size, with transparent backgrounds.
The unvisited link has an image/icon of an arrow pointing to a document. The
visited link has an image/icon of a checkmark. The images are not part of
the markup, but are called from the stylesheet from an images folder in the
main web project folder. This is because of the dynamic effect of the
image/icon changing after the user clicks a link.
Here is the css that makes it happen. If you need the two images, I can email
them to you off-list.
/* a links */
a:link
{
text-decoration: none;
color: #0000ff;
font-weight: bold;
border-bottom: 1px solid #0000ff;
padding: 0em 1.5em 0em 0em;
background: url(images/link.gif) no-repeat right center;
}
a:visited
{
text-decoration: none;
color: #800080;
font-weight: bold;
border-bottom: 1px solid #800080;
padding: 0em 1.5em 0em 0em;
background: url(images/visited.gif) no-repeat right center;
}
Hope this helps,
Kind regards,
Frank M. Palinkas
Microsoft M.V.P. - Windows Help
M.C.P., M.C.T., M.C.S.E., M.C.D.B.A., A+
Senior Technical Communicator
Web Standards & Accessibility Designer
--------------------------------------------
website: http://frank.helpware.net
email: [EMAIL PROTECTED] | [EMAIL PROTECTED]
--------------------------------------------
Member:
Society for Technical Communications (S.T.C.)
Guild of Accessible Web Designers (G.A.W.D.S.)
Web Standards Group (W.S.G.)
--------------------------------------------
super group trading ltd.
Sandhurst, Gauteng, South Africa
website: http://www.supergroup.co.za
--------------------------------------------
Work: +27 011 523 4931
Home: +27 011 455 5287
Fax: +27 011 455 3112
Mobile: +27 074 109 1908
--------------------------------------------
-----Original Message-----
From: [email protected] [mailto:[EMAIL PROTECTED] On
Behalf Of Matthew Smith
Sent: Thursday, 11 January, 2007 10:18 AM
To: [email protected]
Subject: Re: [WSG] Visited Links and Accessibility
Quoth Dwain Alford at 01/11/07 18:09...
> for accessibility purposes in using color (on links and visited links,
> etc.) i would recommend using the color contrast analyzer from
> http://www.accessibleinfo.org.au/ <http://www.accessibleinfo.org.au/>
>
> since web sites need to be accessible to everyone, don't forget the
> color blind, so make sure your colors work for them not just those with
> normal color vision.
I find excessive colours distracting and confess that I am guilty of
displaying visited and unvisited links the same, and only changing on
focus/hover.
With the colour blindness issue taken into consideration as well, would
it not be better, therefore, to style visited links in a manner where
colour is not involved at all?
Not being a CSS guru, I would need to check what options are available,
but something like a line over and under the word for visited links may
be a possibility.
Cheers
M
--
Matthew Smith
IT Consultancy & Web Application Development
Business: http://www.kbc.net.au/
Personal: http://www.smiffysplace.com/
LinkedIn: http://www.linkedin.com/in/smiffy
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
*******************************************************************
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
*******************************************************************
