Log in   Register a New Account

Accessify Forum - Discuss Website Accessibility

New to the forum?

Only an email address is required.

Register Here

Already registered? Log In

Currently Online

No registered users are online.

Image Replacement Techniques - Accessible Solutions?

  • Reply to topic
  • Post new topic
Reply with quote Take a look at Ian's post regarding the above over at Accessify:

Image Replacement Techniques - Accessible Solutions?

Post your suggestions/comments here.

Cheers,
Nigel

Accessify Forum Administrator ~ Nigel Peck / Starstream
"Everything I say is not meant to be set in stone" - Van Morrison
Reply with quote The technique at http://www.kryogenix.org/code/browser/lir/ fails in Opera 7 ... all the user sees is "l>"
Reply with quote My comments are it is nothing more than a clever hack method, presumably the background-image cannot be read by most assistive technologies.

Thus rather than providing a truly accessible fallback method, the user is actually manipulating the behaviour of a "visual browser" rather than marking up an inline image as a 'replaced element' with the appropriate title and alt attributes, etc.

I am not saying I believe it is wrong rather, it is eschewing semantics in a perverse sense if used within the main body flow, e.g. for pretty looking sub headings.

Obviously using the hack has many benefits since you could easily use alternative style sheets to present alternative images.

Basically I am indifferent in opinion to that hack, but it's always nice to add some controversy. Wink

};-) http://www.xhtmlcoder.com/

WVYFC chose the Yorkshire Air Ambulance as the main charity to fund raise for in 2006
Reply with quote I am a novice with respect to accessibility. But remind me how exactly is
<h1><img src="hello.gif" alt="Hello World" /></h1>
inaccessible?

I had an unregistered copy of JAWS. While looking at CSS Zen Garden, it did not read the headings because they were replaced by the background image using FIR.

Possibly a CSS rule similar to the following may improve accessibility:
h1 img {display: alt-text}
Visual browsers can display the image, non-visual browsers can display the alt text and PDAs which are capable of displaying images can be made to display alt text instead, to save on file size.
Reply with quote
nkaisare wrote:
I am a novice with respect to accessibility. But remind me how exactly is
<h1><img src="hello.gif" alt="Hello World" /></h1>
inaccessible?


Welcome to the wild and wooly world of accessibility! For the record, I think that most of us involved are novices (heck, the medium's only about a decade old, and most of the accessibility recommendations are only about five years old).

The example you give above is accessible, provided that no CSS is used to hide the image. The FIR is a different animal altogether, as the image doesn't exist as part of the XHTML; rather it is part of the styling as defined by CSS ... and as such no ALT text exists for the screen readers to render.
Reply with quote
nkaisare wrote:
I am a novice with respect to accessibility. But remind me how exactly is
<h1><img src="hello.gif" alt="Hello World" /></h1>
inaccessible?


Well, if we just overlook the missing height/width attributes Wink ... I shall explain

In itself, it's not inaccessible - but consider this scenario:

You have an image used for a heading, it's 700 pixels wide.
You want to view it on a PC/Mac - no problem ...
- but what about when you want to view that page on a PDA?
- or a phone?
The image won't fit - say hello to horizontal scrolling!

Using the FIR technique solves this, as such devices don't support CSS and therefore serve up the text alternative - it's about coding for greater device independance - one of the WAI recommendations.

Also, if you use the FIR technique, you can easily change the style of the site, which is a real boon for audiences with different requirements (e.g. low vision might want big type, dyslexics may want navy on a cream background rather than black on white, while others may prefer the full graphical version). It's all about choices, in the end.

It's just a shame that there are some quirky side effects that we have yet to resolve.

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
Reply with quote Nice to see you here Niket, somehow I though you might find this forum mentally stimulating.

};-) http://www.xhtmlcoder.com/

WVYFC chose the Yorkshire Air Ambulance as the main charity to fund raise for in 2006
Reply with quote
lloydi wrote:

You have an image used for a heading, it's 700 pixels wide.
You want to view it on a PC/Mac - no problem ...
- but what about when you want to view that page on a PDA?
- or a phone?
The image won't fit - say hello to horizontal scrolling!

Using the FIR technique solves this, as such devices don't support CSS and therefore serve up the text alternative - it's about coding for greater device independance - one of the WAI recommendations.


That's a big assumption that PDAs and other small screen devices won't support CSS. AFAIK both the new Pocket IE 2003 and WebPro in Palm OS 5.2 do. Perhaps better not to use 700 pixel wide images for headings?
Reply with quote
JohnG wrote:
That's a big assumption that PDAs and other small screen devices won't support CSS. AFAIK both the new Pocket IE 2003 and WebPro in Palm OS 5.2 do. Perhaps better not to use 700 pixel wide images for headings?

Is this right? I am using Pocket PC 2002, so I'd like to know if Pocket PC 2003 does support CSS - anyone clarify this? I get plain text on my iPaq.

If this is the case, presumably you can serve up a specific style sheet for that device using media="handheld"; if you use media="screen", the device *should* ignore it and serve up plain text.

http://www.w3.org/TR/REC-CSS2/media.html

Should, but as we have discovered, this is not always the case, example being hiptops:

http://www.accessify.com/articles/why-hiptops-are-harmful-to-web-standards.asp

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
Reply with quote I can confirm that WebPro in Palm OS 5.2 uses CSS specified for "screen" rather than for "handheld". Just got a Tungsten C, surfed to my site expecting to see my lovely handheld CSS in all its glory ... instead saw my screen CSS mashed into all kinds of new and interesting (and unreadable) directions. Truly one of the most boneheaded ideas ever to take shape.
Reply with quote
Nathan wrote:
I can confirm that WebPro in Palm OS 5.2 uses CSS specified for "screen" rather than for "handheld".


If I may be permitted to use a particularly British term ...

-- What a bunch of arse!

Why do they not read specs?! The 'handheld' media type is reserved tor these kinds of devices.

Out of interest, just how crap does Accessify.com look in that browser? I'd love to see a screenshot (email to accessify at yahoo dot co dot uk)

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
Reply with quote Regarding: Why Hiptops are Harmful to Web Standards; I meant to spell
"Proprietary" but being dyslexic sometimes causes these typographical errors Smile.

};-) http://www.xhtmlcoder.com/

WVYFC chose the Yorkshire Air Ambulance as the main charity to fund raise for in 2006
Reply with quote According to http://www.w3.org/TR/css-mobile:

Quote:
A CSS Mobile Profile conforming user agent MUST be able to process media-dependent style sheets as specified in CSS2 ([CSS2] Section 7). Specifically:

1. The MP-UA SHALL support the CSS2 @media rules as specified in CSS2 ([CSS2] Section 7).
2. The MP-UA SHALL accept and process style sheets that target the handheld media type.
3. The MP-UA SHALL accept and process style sheets that target the all media type.
4. The MP-UA SHALL accept style sheets that contain other (non-handheld) media-dependent style sheets.
5. The MP-UA MAY process other media types (such as screen or print).

The MP-UA is not required to satisfy the CSS2 conformance statement pertaining to the handheld media type (see [CSS2] Section 7.3.1); the MP-UA need only satisfy the conformance statements in this specification.


So they may use screen. But only they would use handheld though, so I'm guessing you could include a handheld type that overrides and removes large images like this.

The docs for the PalmOS browser is at http://www.palmos.com/dev/support/docs/creatingwebcontent.pdf.zip.

This is all theoretical, as I've only got a 1st-gen Tungsten T Sad
Reply with quote
lloydi wrote:
Why do they not read specs?! The 'handheld' media type is reserved tor these kinds of devices.

I emailed the Palm OS development team yesterday, and pointed out 1) Where they violated the spec and gave them a link to the spec (no more excuses) 2) Why that's a bad thing. Liberally laced the email with the words "buggy", "breaks standards", and "what's the f***ing problem here". Hopefully they will fix it in an upcoming release ... they've been pretty helpful with customer support so far, so I guess we'll see.

lloydi wrote:
Out of interest, just how crap does Accessify.com look in that browser? I'd love to see a screenshot (email to accessify at yahoo dot co dot uk)

As soon as I'm next to a wireless hotspot I'll try to take a pic and show you. Unfortunately that may be a while (a week or so). There's very few hotspots out here ... I may have to break down and visit a Starbucks to make that happen.
Reply with quote 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 ...

Display posts from previous:   

Page 1 of 4

Goto page 1, 2, 3, 4  Next

All times are GMT

  • Reply to topic
  • Post new topic