One of the cool things in CSS is the ability to add styles to elements with certain attribute values – so you can style based upon the context of an HTML element. During website testing a useful thing to do is to test and make sure that images, where appropriate, have an alt attribute.
Having a good alt attribute is not going to change your SEO performance on its own – it will going help make your website more accessible and user friendly. Good alt attributes are part of SEO housekeeping – should be done but no one really likes doing it. So before you launch a site check your pages with the following style in the sheet to place a red border round all images that have no alt attribute specified:
img[alt=””] {border:10px solid red;}
See how easy that was. One quick check and you can find the problems almost instantly – on a test site it only takes a short time to check your pages.
3 Comments
That’s a great trick. I always get lazy with my alt tags on pages with tons of web buttons on them. Thanks!
@ Arron: for the sheer brass neck of coming on and spamming in that almost relevant way I’ll leave your link up – just because it made me laugh :p
It’s a nice trick but want to use this ability even further. Therefore I need to know what browsers support it (or in which CSS version this feature was added)? Please reply anyone who knows.
Alex Coleman’s last blog post..How To Boost Your Wordpress Blog Performance
2 Trackbacks
Checking for Blank Alt Attributes with CSS…
Blog post about how to use CSS to detect which images within an HTML page have no “Alt” attribute – useful for usability and SEO during website testing….
Checking for Blank Alt Attributes with CSS…
Blog post about how to use CSS to detect which images within an HTML page have no “Alt” attribute – useful for usability and SEO during website testing….