Sent by Alastair Campbell on 10 January 2003 18:06
Hia,
I'm making a bookmarklet to help with accessibility evaluations, but I'm
stuck on one thing.
It successfully highlights images with alt tags (in green), images with
blank alt tags (in blue) and images without alt tags (in red).
(It doesn't work in IE, but that doesn't bother me too much!)
I'm fairly new to javascript, so I nicked someone else's and substituted
my own CSS. (Bookmarklet from
http://www.sam-i-am.com/work/bookmarklets/dev_debugging.html 'show
tables' with the href substituted with one for my CSS below.)
That was easy (in gecko-browsers). The CSS is:
img {border: 2px #f00 solid !important}
img[alt] {border: 2px #0f0 solid !important;}
img[alt=""] {border: 2px #00f solid !important}
img:after {content: attr(alt) !important;}
What I'm stuck on is getting it to display the actual alt text.
I was hoping to use the :after pseudo element like Craig Saila's
article:
http://www.saila.com/usage/attributes/cssattribute.html
However, although it seems to work on images in local tests within a
page, it doesn't seem to work as part of the bookmarklet.
Is it a limitation of the javascript, or browser implementation, or am I
just completely wrong?
Regards,
-Alastair Campbell
--
http://www.nomensa.com | e. [EMAIL-REMOVED]
