Image Replacement Techniques - Accessible Solutions?
| Nathan wrote: |
| The technique at http://www.kryogenix.org/code/browser/lir/ fails in Opera 7 ... all the user sees is "l>" |
No, that was just him missing an end comment tag out, I emailed him about it and it's fixed.
Share: 
OK, my comments here are going to be pretty out of the accessibility arena, but as I take a fairly holistic approach to web design (everything in moderation!) I'd like to bring it up anyway.
I've seen this technique discussed at length on Zeldman, StopDesign, ALA etc... mostly from a web standards only point of view with bits of accessibility (almost by default as its meant to be one of the advanatges of the tecnique as well) thrown in for good measure.
I also have an interest in Search Engines though (not as much as I used to, I'm generally happy with what I know and don't get so involved with them these days, that moderation thing again) and one thing they really don't like is hidden text.
Spammers have been using hidden text for a long time to make Search Engines think they should be ranked higher than they deserve. There Search Engines say, no hidden text.
Now I think if you were to speak to Google, they would probably have no problem with the FIR technique specifically, indeed, is not the act of hiding text that is the 'evil' thing, but how some people impliment it.
People may use the technique and never have any grief from the likes of Google about it, certainly if they don't go doing things like keyword stuffing the hidden text and it is reviewed by a person rather than just an SE Bot, it would probably be considered fine. However, if people abuse it and use it, not only as a tool to help usability/accessibility etc.. but also to help improve search engine rank, then they could find themselves being penalised and undoing a lot of good work. In trying to make the site better for everyone, they've actually made it harder to find in the first place........
That was a good bit longer than I meant it to be and it may be fairly mute in the grand scheme of things, I think its worthwhile people being aware of it though. Its been promoted by some very respected people (present company included) and it wouldn't be great for sites to start using it and then wondering why their visibility in Search Engines has suddenly plummeted.
Also, a small point about the handheld browsers, Opera for Smartphones they claim supports CSS1 and 2, therefore, considering Opera's decent enough compliance with standards, I would assume it was fairly good.
Share:
| Adrian wrote: |
| People may use the technique and never have any grief from the likes of Google about it, certainly if they don't go doing things like keyword stuffing the hidden text and it is reviewed by a person rather than just an SE Bot, it would probably be considered fine. However, if people abuse it and use it, not only as a tool to help usability/accessibility etc.. but also to help improve search engine rank, then they could find themselves being penalised and undoing a lot of good work. |
I have made exactly this point before, and tried to find an 'official' response to this - but getting a response from anyone at a search engine on this subject is nigh on impossible. After all, if they confirm that using such a technique won't be penalised, that would potentially open the floodgates for new spamming techniques if I were to repeat their response. So instead, they keep schtumm.
For what it's worth, I would not let it stop me - I'd just be careful not to put anything in there that resembled spam, nothing deceptive at all.
Build Your Own Web Site the Right Way!
A beginners' HTML/CSS book with web standards at its heart
The Ultimate HTML Reference
A complete reference, in glorious hardback
Share:
I don't think Search Engines will ever write penalisation of things like that into the software, but if on human review (this happens quite often) it is obviously being used for the benefits of Search Engine results and not for the benefit of the site's users then yes they will penalise.
If your reasons for doing something like this are genuine then there are no problems with Search Engines as this shows in the way you do it.
Cheers,
Nigel
Accessify Forum Administrator ~ Nigel Peck / MIS Web Design
"Everything I say is not meant to be set in stone" - Van Morrison
Share:
| lloydi wrote: |
| I'd just be careful not to put anything in there that resembled spam, nothing deceptive at all. |
When done that way then I can't see there ever being a problem, in the same way Google is 'happy' with some forms of cloaking (not wanting to go off on a tangent but its a very dubious tactic usually), the problem being, most cloaking is used to spam the engines.
They can't (or don't) auto detect it at the moment anyway so its only really going to be if a competitor reports you and they go and have a look. In which case the correct and sensible approach (putting it there for the other reasons usually stated) will probably be let by, as long as people are aware of it, I don't see a problem with the technique.
Share:
With reference to the <h1><span></span></h1> solution:
I'm quite surprised that people are using a span.
I use a <strong> tag. That way it can still be argued that it's semantically correct (I'm emaphasising the text because its the most important part). In other words an H1 with a <strong> tag looks better and stands out more when the style sheets are turned off. Esp. when using a mobile device like my P800 and Opera with the Thin browsing turned on.
P.S. Opera 6.0 on P800 supports CSS handheld wonderfully.
Share:
| Adrian wrote: |
| I also have an interest in Search Engines ... one thing they really don't like is hidden text. |
Are you saying that if I occasionally point to something like "{ display: none }" in an external style sheet search engines won't like me?
It would seem risky to abuse using styles to hide text, anyway. Isn't the point that you want some people to see this content?
Share:
| casey wrote: |
| Are you saying that if I occasionally point to something like "{ display: none }" in an external style sheet search engines won't like me? |
No I don't believe so; if you display: none the first and most important content of your page - that will cause you problems with search engines. Most sites nowadays use display: none in some form or the other (hide browser upgrade notices, menu etc).
BTW, in spite of display: none-ing the h1 and h2, CSS Zen Garden still ranks very high with Google.
And final point: I am still not convinced that FIR is really better than
<h1><img src="head.gif" alt="My Site Header" width="300" height="75" /></h1>
The only point against this seems to be700px-wide-image-on-PDA. But you can simply do h1 img:before {My Site Header} h1 img{display: none}
Or can you not?
[edit]
Of course <h1 src="head.gif">My Site Header</h1> is a better method. But lets not go into the future yet
Share:
The problem SE's have with display:none is the same problem they have with people who set the text colour to the same as the background colour or make the text size rediculously small (or even both!).
Its been a way of getting your keywords (the things the Search Engines is trying to rank you on) more prominent on your site without the surfer seeing it slapped all over the place.
So long as display:none is used in the manner it is meant to be used, theres not a lot of problem, if people start abusing it, wait for the shouts of 'why has my site dissapeared from Google?'.
It doesn't take a brain surgeon to make the leap from thinking 'I can use display:none to hide some text that helps describe the image thats with it' to thinking 'I can use display:none to hide to hide loads of text to describe my whole site that will make it rank better in search engines but won't screw the page up for visitors'.
| casey wrote: |
| It would seem risky to abuse using styles to hide text, anyway. Isn't the point that you want some people to see this content? |
Keep that idea in your head and you'll be ok.
I didn't mean to hijack a thread about accessible image replacement and turn it to an issue about Search Engines with display:none, but the very fact you asked that question casey points out why I wanted to mention it.
Share:
| nkaisare wrote: |
| But you can simply do h1 img:before {My Site Header} h1 img{display: none} |
Doesn't IE fail to recognize :before and :after?
Share:
It failes to recognise most things at all times, before, during and after Accessify Forum Administrator ~ Nigel Peck / MIS Web Design
"Everything I say is not meant to be set in stone" - Van Morrison
Share:
| casey wrote: |
| Doesn't IE fail to recognize :before and :after? |
Yep.
What else is new, right?
Share:
| Nathan wrote: |
| Back to the topic at hand, another FIR technique has been created. See http://levin.grundeis.net/files/20030809/alternatefir.html. With this method it is possible to see the text when images are off but CSS is on. Still requires a superfluous <span>, but I'm not going to lose any sleep over it ... |
What's wrong with the method that doesn't use a superfluous span - as, for example, here?
http://phark.typepad.com/phark/2003/08/accessible_imag.html
I tried one in this format and it looked OK in Firebird 0.6.1, Opera 7.11, and IE6. But I haven't checked in any Mac browsers yet, and I haven't got access to IE5.5 at the moment.
Michael
Share:
Let me think... Micro$oft IE 6.0 also fails to render 'display: none' correctly under some circumstances it is not supposed to generate boxes, i.e. the element has no effect on layout.};-) http://www.xhtmlcoder.com/
WVYFC chose the Yorkshire Air Ambulance as the main charity to fund raise for in 2006
Share:
| Robert Wellock wrote: |
| Let me think... Micro$oft IE 6.0 also fails to render 'display: none' correctly under some circumstances it is not supposed to generate boxes, i.e. the element has no effect on layout. |
Some thinking. That's a complete irrelevance. The method doesn't use 'display: none'
Michael
Share: