Re: [WSG] RE: Image replacement techniques for linked elements

[Chris Blown]

On Sat, 2004-08-14 at 23:44, James Ellis wrote:
> What I've done is probably not done often but it is worth considering. 
> Firefox ships with its minimum font size turned off.
> 

I also use the very same setting.

It can be a common adjustment for people who use XFree86 or X.org under
unix ( and its variants), since true type anti aliased fonts at anything
under 10px pretty much disappear. esp. when running resolutions above
1280x960. However I do prefer using this technique over others, since I
consider the minimum font setting a rarity. Also if you can allow a
little bit of extra image padding ( with a nice solid bg colour ) then
you can almost hide 12px easy enough anyway.  








**
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
**

Re: [WSG] RE: Image replacement techniques for linked elements

[Philippe Wittenbergh]

On Aug 16, 2004, at 11:59 am, Henry Tapia wrote:
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.
A much better method imsho

P.
---/---
Philippe Wittenbergh
now live : 
code | design | web projects : 
IE5 Mac bugs and oddities : 
**
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
**

Re: [WSG] RE: Image replacement techniques for linked elements

[Henry Tapia]

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?
>> 
>> 
>> 
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
**

Re: [WSG] RE: Image replacement techniques for linked elements

[Rick Faaberg]

>>> 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.

Now if we can just get the html/rtf emails off this list! :-)

Rick Faaberg

**
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
**

RE: [WSG] RE: Image replacement techniques for linked elements

[Peter Ottery]

Title: 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?
>> 
>> 
>> 


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 :)

Re: [WSG] RE: Image replacement techniques for linked elements

[James Ellis]

Peter Ottery wrote:
these are still linked. the actual (non graphic) heading is just using the
technique [1] of making the font size 1px and white (so its not visible on a
white page) leaving the background image visible. the link that contains the
heading is given a width & height and display:block like your example so
that the link "hotspot" is forced to stay big enough and cover the desired
area.
That has worked for us pretty well. Haven't had any complaints about weird
display or anything
 

Peter
Sorry to be a party pooper but in Firefox, 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 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.

What I've done is probably not done often but it is worth considering. 
Firefox ships with its minimum font size turned off.

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?

  
Works for the graphical browsers and text browser, not sure how it works 
with search engines, though.

Cheers
James
**
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
**

Re: [WSG] RE: Image replacement techniques for linked elements

[Mark Harwood]

H all i do is place a set of [span] tag's around the text and make the [a]
tag a block element and give it the background image...

Much like i've done on http://phunky.co.uk/2005/ in the menu...

Nice and simple!


**
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
**

[WSG] RE: Image replacement techniques for linked elements

[Peter Ottery]

Title: Re: [WSG] sitecheck on Mac (Safari, IE5) and Win (IE 5/5.5) please?



>> Scott 
wrote: Has anyone had any luck with an image replacement techniques that leaves 
the link available?
 
Hi 
Scott,
 
We use 
a variant of image replacement for the section headings on the homepage of www.smh.com.au
ie: 
the section headings in the main centre column start about 800px down the page - 
"WORLD", "NATIONAL", "SPORT" etc in the blue font - all 
caps.
 
these 
are still linked. the actual (non graphic) heading is just using the technique 
[1] of making the font size 1px and white (so its not visible on a white page) 
leaving the background image visible. the link that contains the heading is 
given a width & height and display:block like your example so that the 
link "hotspot" is forced to stay big enough and cover the desired 
area.
 
That 
has worked for us pretty well. Haven't had any complaints about weird display or 
anything
 
the 
css is all inline on the homepage so its easy to "take a look under the hood" 
:)
 
I dont 
mind it. With css disabled the heading is just a linked heading. I should say 
I'm not a fan of image replacement techniques in general but in this case for us 
we had the need to use a graphical heading font (to match the offline product) 
and didn't want to bloat the page with lots of images. (we used sprites and 
loaded what we could into sprites [2])
 
cheers,
pete
 
[1] http://www.maxdesign.com.au/presentation/headings-as-images/index.cfm#option4
[2] http://www.alistapart.com/articles/sprites/
 

Peter 
OtteryHead of DesignFairfax Digital
Level 3 Wharf 7 Pirrama 
Road
Pyrmont NSW 
2009T: 02 8596 4450
F: 02 8596 
4466
M: 0403 192 
858E: [EMAIL PROTECTED]www.fairfaxdigital.com.au