Firefox webdeveloper toolbar option "disable page colours"

[Els]

Hi,

I would like an opinion on the following:

I have a page which is made up of background-images with transparent
linked images in front of it, which on hover show text in CSS popups.
Due to appropriate alt text, anyone viewing the page with images
turned off, will see the alt text instead, and on hover will see the
popups.

Reason for the transparent images instead of just bringing the
background images to the front, is that the popups don't cover up
normal images. Any non-background images will shine through the popups
(making them unreadable) if those images are later in the source code
than the popup (in some browsers).

Now, if I use the option "disable page colours" in the Firefox
webdeveloper toolbar, I see nothing. The transparent images are
loaded, thus the alt text isn't displayed, only I don't see the
background images, because the colours are disabled. Hovering over the
page will still bring up the popups, but it initially just looks like
a white empty page.

Is this something I should worry about wrt to accessibility, or is it
really only a webdeveloper tool that doesn't mimic any possible
behaviour of any browser? The page displays perfectly as a list of
links (which include the text in the popups) in Lynx, and shows the
image version in graphical browsers.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Steve Pugh]

Re: Firefox webdeveloper toolbar option "disabl e page colours"

Els <els.aNOSPAM@ti scali.nl> wrote:
[color=blue]
>I have a page which is made up of background-images with transparent
>linked images in front of it, which on hover show text in CSS popups.
>Due to appropriate alt text, anyone viewing the page with images
>turned off, will see the alt text instead, and on hover will see the
>popups.
>
>Reason for the transparent images instead of just bringing the
>background images to the front, is that the popups don't cover up
>normal images. Any non-background images will shine through the popups
>(making them unreadable) if those images are later in the source code
>than the popup (in some browsers).[/color]

I would be concentrating on solving that problem, thus rendering the
issue you raise below null.
[color=blue]
>Now, if I use the option "disable page colours" in the Firefox
>webdeveloper toolbar, I see nothing. The transparent images are
>loaded, thus the alt text isn't displayed, only I don't see the
>background images, because the colours are disabled. Hovering over the
>page will still bring up the popups, but it initially just looks like
>a white empty page.
>
>Is this something I should worry about wrt to accessibility, or is it
>really only a webdeveloper tool that doesn't mimic any possible
>behaviour of any browser?[/color]

The ability to disable author-specified colours, or to apply user
stylesheets, is available in many browsers. It would be foolish to
assume that no one ever uses those options.

Presumably your transparent image is a much smaller download than the
background images - thus users may be looking at your invisible links
for some time whilst waiting for the backgrounds to load. And if one
of the backgrounds doesn't download for whatever reason they're stuck
with the invisible link.

(Presumably this is navigation or similar that is display: none;
anyway in your print stylesheet? As most browsers have background
printing off by default "content" displayed via background images
doesn't show up when printed.)

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve@pugh.net > <http://steve.pugh.net/>

[Els]

Re: Firefox webdeveloper toolbar option &quot;disabl e page colours&quot;

Steve Pugh wrote:
[color=blue]
> Els <els.aNOSPAM@ti scali.nl> wrote:
>[color=green]
>>I have a page which is made up of background-images with transparent
>>linked images in front of it, which on hover show text in CSS popups.
>>Due to appropriate alt text, anyone viewing the page with images
>>turned off, will see the alt text instead, and on hover will see the
>>popups.
>>
>>Reason for the transparent images instead of just bringing the
>>background images to the front, is that the popups don't cover up
>>normal images. Any non-background images will shine through the popups
>>(making them unreadable) if those images are later in the source code
>>than the popup (in some browsers).[/color]
>
> I would be concentrating on solving that problem, thus rendering the
> issue you raise below null.[/color]

I tried that. I'll mock up an example version and remember which
browsers don't handle it later today. I already tried Z-index too.
[color=blue][color=green]
>>Now, if I use the option "disable page colours" in the Firefox
>>webdevelope r toolbar, I see nothing. The transparent images are
>>loaded, thus the alt text isn't displayed, only I don't see the
>>background images, because the colours are disabled. Hovering over the
>>page will still bring up the popups, but it initially just looks like
>>a white empty page.
>>
>>Is this something I should worry about wrt to accessibility, or is it
>>really only a webdeveloper tool that doesn't mimic any possible
>>behaviour of any browser?[/color]
>
> The ability to disable author-specified colours, or to apply user
> stylesheets, is available in many browsers. It would be foolish to
> assume that no one ever uses those options.[/color]

:-(
If I make the images foreground images, and someone disables page
colours, the popups will be unreadable, as they will become
transparent. I guess most user stylesheets will just change the
background and foreground colours, which won't be a problem.
Problem arises if background images are disabled though..
[color=blue]
> Presumably your transparent image is a much smaller download than the
> background images - thus users may be looking at your invisible links
> for some time whilst waiting for the backgrounds to load. And if one
> of the backgrounds doesn't download for whatever reason they're stuck
> with the invisible link.[/color]

That's true too, but the background image is only 37kB (there's only
one really, but there are 5 foreground transparent ones of each
43bytes.
[color=blue]
> (Presumably this is navigation or similar that is display: none;
> anyway in your print stylesheet? As most browsers have background
> printing off by default "content" displayed via background images
> doesn't show up when printed.)[/color]

Print stylesheet will only show text, yes.

Just thought of a possible solution: Have the background image in the
page twice. Once as a background in a div that's absolutely positioned
over a div that's containing the second one as a regular image. That
way, with page colours disabled, the foreground image in the div
behind it will show. Hmm.. I guess that way I won't need the
background in the front div at all.
Sounds too easy a solution though, am I missing something obvious?

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: LuLu - The Man Who Sold The World

[Els]

Re: Firefox webdeveloper toolbar option &quot;disabl e page colours&quot;

Els wrote:
[color=blue]
> but there are 5 foreground transparent ones of each 43bytes.[/color]

Make that one image of 43 bytes used 5 times :-)

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: The Cure - Close To Me (Acoustic)

[Els]

Re: Firefox webdeveloper toolbar option &quot;disabl e page colours&quot;

Els wrote:
[color=blue]
> Steve Pugh wrote:
>[color=green]
>> Els <els.aNOSPAM@ti scali.nl> wrote:
>>[color=darkred]
>>> I have a page which is made up of background-images with transparent
>>> linked images in front of it, which on hover show text in CSS popups.
>>> Due to appropriate alt text, anyone viewing the page with images
>>> turned off, will see the alt text instead, and on hover will see the
>>> popups.
>>>
>>> Reason for the transparent images instead of just bringing the
>>> background images to the front, is that the popups don't cover up
>>> normal images. Any non-background images will shine through the popups
>>> (making them unreadable) if those images are later in the source code
>>> than the popup (in some browsers).[/color]
>>
>> I would be concentrating on solving that problem, thus rendering the
>> issue you raise below null.[/color]
>
> I tried that. I'll mock up an example version and remember which
> browsers don't handle it later today. I already tried Z-index too.[/color]

Okay, got a mockup online with foreground images instead of one larger
background one:

http://here.locusmeus.com/test/splash2.html

In Opera and Firefox it does what it should do, and disabling images
or colours doesn't pose a problem. The popups become transparent, but
I reckon that if a User wants to use his/her own stylesheet, s/he
should set background colours, nothing I can do about it.

But now look at IE (5 or 6). Hovering over the 3rd image will show
that the popup covers image 1 and 2, as they are appearing in the code
before number 3, but image 4 and 5 will stay in the front.

If anyone knows a solution to that, I'd be grateful.


--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Carly Simon - You're So Vain