RE: [WSG] RE: Image replacement techniques for linked elementsHi guys, >> I've done this on one of our new websites (text changed to make more >> sense in this context), and it works quite well with images turned off >> or on. Or am I missing the point of image replacement techniques?
I'm no expert and haven't been doing XHTML/CSS/standards for very long, but my take on this is that the idea of CSS image replacement is so the text in the image still appears in the source, ie. it still is accessible and understood by search engines, screen-readers, etc. People have come up with several techniques for this, generally by setting a background image on the element and somehow hiding the text, via the CSS. A good listing of various techniques is here: http://www.mezzoblue.com/tests/revised-image-replacement/ (redesigned, yay!) I tend to use the Leahy-Langridge method, which involves setting the background image then padding the text out of the viewable area of the element (with overflow set to hidden). This seems to work pretty well with hyperlinked elements without adjustments to your markup, but unfortunately doesn't address the issue of images being turned off when CSS is left on, and it utilises a box-model hack. I'm interested in what the opinion on this is here - or perhaps it's been discussed at length previously? Cheers, hank ----- Original Message ----- From: Peter Ottery To: '[EMAIL PROTECTED]' Sent: Monday, August 16, 2004 11:18 AM Subject: RE: [WSG] RE: Image replacement techniques for linked elements >> James wrote: >> I have my minimum font-size set to 12px, so >> websites can't set text I can't read (or see for that >> matter) - like 6px :D. I think this is rendering your (ed: smh.com.au) plain text headers >> to be 12px - and they are appearing over the image headers on the >> smh.com.au home page ... making both types of headers unreadable. GOLD medal to James in the advanced font setting relay! :D you are the 1st person *ever* to pick that up. seriously tho, cheers for that, a valid point indeed, and noted. >> James then wrote: >> I've done this on one of our new websites (text changed to make more >> sense in this context), and it works quite well with images turned off >> or on. Or am I missing the point of image replacement techniques? >> <h1><a href="/sport/" title="link to the sport page"> >> <img src="/images/imagethatsayssport.png" height="60" width="470" alt="sport" /> >> </a></h1> nah i dont think yr missing the point. looks like a solid method. The major benefit for us at present for the method we used is the lower strain on the server. ie: having the image as a background image that is part of the "sprite" image and called once, used repeatedly for a bunch of other images, and eases the load on the servers a fair bit. Can someone out there in accessibility guru land tell us if an image (only) used as a h1 heading is as good as regular text used as a h1 heading? ie: does the alt text on the image (in James' example above) become the defacto "heading" and get used in the methods the screenreaders use to scan headings on a page? At the WSG meet earlier in the year that David Woodbridge from the Royal Blind Society came to and demo'd that shortcut used that popped up a box with all the headings on the page listed... just wondering if an img's alt text would show up in that list - and other similar scenarios/readers...? >> James wrote: >> not sure how it works with search engines i dont know if anyone would know for sure (other than the search engines themselves). Google reads alt text on images - but whether it finds that alt text within a h1 tag and then assumes that's the heading and applies the same "points" to it when the googlebot scans the page is another thing... pete :) ****************************************************** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ******************************************************
