Re: Image replacement techniques fail with IE accessiblity settings

Yes. I made an accessible Image replacement technique, which  
unfortunately contains some semantic chaff. However it works and it, or  
something based on it is the only way to make accessible image  
replacement with CSS2. This is due to the fact that all image  
replacement currently uses background: for including the images. I have  
explored the possibility of removing some of the <span> tags from the  
markup using before: and after: but concluded that since IE doesn't  
support and Opera, Mozilla, and Safari badly support them it is not  
workable at the moment. However I would love someone to use them to  
find something which would work in the future.

This works on the idea of having a container element which has two  
spans in it, one for the text and an empty one for the image. Within  
the container these are then overlayed the image over the text. The  
container can be put anywhere happily with the image replacement still  
working. In this example a <h1> is used but a <span> could be used  
equally well.

<html>
<head>

<style>
#logoimage {
  	/* Must use position to cause the overlap */
          position: absolute;
	background: url('helloworld.gif') top left no-repeat;
	height: 31px;
	width: 214px;
	padding: 0;
	margin: 0;
	z-index: 1;
}

#logo {
	/* Must use position to cause the overlap */
          position: absolute;
	overflow: auto;
	height: 31px;
	width: 214px;
	padding: 0;
	margin: 0;
	z-index: -1;
}

#logocontainer {
         /* Must have same height and width as the replacement image */
         height: 31px;
         width: 214px;
}

</style>

</head>

<body>
<br />
<br />
<h1 id="logocontainer"><a href="#" id="logo">Hello World!</a><span  
id="logoimage"></span></h1>

</body>

</html>

The image used in this code example is available at  
<http://www.netalleynetworks.com/Members/tcroucher/accessibility/ 
helloworld.gif>

There is a "test" page for this at  
<http://www.netalleynetworks.com/Members/tcroucher/accessibility/nnir>  
mostly because I haven't had the time to write it up properly.


I hope this is a decent solution that people are happy with.


Tom

On 4 Dec 2003, at 16:57, Jon Dodd - Bunnyfoot wrote:

>
> I've seen a number of sites recently use variants of image replacement  
> techniques to make graphical headings etc. accessible.
>
> There are a number of methods that appear to have different successes  
> with screen readers etc.
>
> They all appear to suffer however if CSS is on and images are off  
> (which may be pretty rare), or and this is not that rare for people  
> with visual impairments, they use the IE accessibility settings -  
> specifically: tools - Internet options - accessibility - ignore  
> colours specified on web pages.
>
> I have recently user tested with 2 visually impaired people who use  
> different screen magnification software combined with the microsoft IE  
> accessibility settings - they missed out on all sorts of information -  
> headings, menus etc.
>
> I can think of a way round this - but its a bit of a hack: put a link  
> that only appears when colours are ignored and the link affects (or  
> disables) the stylesheet to return the lost menus.
>
> I generally resist tailoring content for specific browsers or  
> technologies (standards and all that) but this is a real practical  
> issue that will affect a host of people.
>
> Any other suggestions or experiences with this?
>
> Cheers
>
> Jon
>
> ---
> Outgoing mail is certified Virus Free.
> Checked by AVG anti-virus system (http://www.grisoft.com).
> Version: 6.0.545 / Virus Database: 339 - Release Date: 27/11/2003

Received on Friday, 5 December 2003 05:17:25 UTC