How to fade in an entire web page -- accessibly

Asked 12/8, 2011 at 15:44 Answered 12/8, 2011 at 15:49

Solved jquery accessibility progressive-enhancement

A client has asked that their home page begin blank (only the logo and background image visible) and then fade in the navigation and content after a second or two.

I could start with the content hidden via CSS and fade it in with jQuery. Unfortunately this violates progressive enhancement: the site would be completely unusable until active code runs, causing problems for the visually impaired using screen readers, among others.

The two work-arounds I've considered are Flash and the <noscript> tag. Flash seems overkill since it isn't used elsewhere on the site; also, the home page is content-heavy with a constantly updating set of news items, sort of a light blog. The <noscript> tag won't help the visually impaired who use screen readers, since their browsers usually have scripting enabled.

Am I missing a solution? Or is this just not a good idea?

Schuman answered 12/8, 2011 at 15:44 Comment(3)

somebody is down voting everybody? – Code 12/8, 2011 at 15:59

I wondered that too. I wish people would comment when they down-vote so that the rest of us can understand what they disagreed with. – Schuman 14/8, 2011 at 19:33

I've upvoted everyone except me to counteract; it's disgraceful that people downvote without commenting. – Aegaeon 19/8, 2011 at 20:17

Do the following

<html>
....
<body>
<script>$("body").addClass("hide");</script>
...

With this css

body.hide #myHidden-div{
  opacity: 0;
}

Then after a two second pause you should be able to do $("#myHidden-div").fadeIn();

If the user has js disabled then the addClass tag will never be triggered and nothing will be hidden. I don't think you need to use <noscript> tag at all.

You have to make sure the script tag is right after the <body> so the user doesn't see a jump of the content and then suddenly hidden. This is better than hiding every thing by default because some search engines may notice that you have hidden text and ignore it for spamming reasons.

Code answered 12/8, 2011 at 15:49 Comment(2)

Thanks Amir, that's a work-around I hadn't thought of--lighter-weight than a jQuery .hide(). I'm still concerned that there could be a brief content flash before jQuery has a chance to initialize and run, especially since we want to accommodate rural users with slow dial-up connections. So I'll try this out with my bandwidth throttled, and if it doesn't quite work I'll explain to the client why we shouldn't fade in the site. – Schuman 19/8, 2011 at 19:55

@Andy glad I can help. If the jquery script include is above the <body> tag then the browser should have already executed the script by the time it reaches the body. Let me know how it works out. – Code 19/8, 2011 at 20:33

I would think you could make this kind of a hack:

Start with content hidden by default.
Add another css class to the elements you want to show.
In a noscript tag, add another CSS file with a definition for the new css class, to show the content.
Otherwise, use jQuery to fade In the elements.

Alternatively, push back on the guy you're building this website for, because that is a horrible user experience. =D

Haire answered 12/8, 2011 at 15:48 Comment(6)

Apple do it on their website, it's not a horrible user experience – Ramose 12/8, 2011 at 15:51

Instead of starting with the content being hidden by default he should start with it shown. Because otherwise, if the noscript css hangs, it will be a white screen for a while. – Code 12/8, 2011 at 15:52

There is also an SEO loss if you hide things because smarter search engines now look at what is hidden and make not index. – Code 12/8, 2011 at 15:53

I have to agree with @Haire here; it's far better to just display everything as it is. – Aegaeon 12/8, 2011 at 16:4

For a while google.com had this fading also. They must have removed it with the new bar. – Code 12/8, 2011 at 22:49

Yep, I'm concerned about hiding content by default because of the problems for people with JavaScript disabled (e.g., the NoScript Firefox plugin), and also the SEO risk. I think there's also a potential problem for visually impaired people: if the screen reader grabs the text before jQuery runs, it'll ignore the hidden elements. However, I'm inclined to agree with Tejs and @JamWaffles: while I don't think it's horrible Ux, adding a delay between the user and the content seems suboptimal to me--especially since some of our visitors have slow connections to start with. – Schuman 19/8, 2011 at 19:48

Have different sites for visually impaired and the rest. One has the script and the other doesnt.

Could be as easy as a get variable if you have some sever side code.

Canaanite answered 12/8, 2011 at 15:48 Comment(1)

Thanks Neal, +1. I considered this approach but would prefer not to duplicate the home page if possible simply for maintenance reasons (and potential confusion reasons in case someone else inherits the code in the future). – Schuman 19/8, 2011 at 20:25

In the head, you could create set this CSS rule in javascript:

*
{
    position:relative;
    left:-9999px;
}

using jquery: $("*").css({position: 'relative', left: '-9999px'})

Then at the bottom of the page run your javascript to hide everything and remove this CSS rule, and then gradually fade in like you want.

This works for non-javascript browsers, and for javascript-enabled screenreaders :)

Ramose answered 12/8, 2011 at 15:48 Comment(1)

Thanks soniiic, +1 for the suggested approach; very similar to Amir's, which I accepted by a hairs-breadth. As with Amir's, I'm concerned about the potential for the content to flicker on then off: the content will be present until jQuery loads and runs, which will be more likely over slow connections. Still, this seems pretty close. – Schuman 19/8, 2011 at 20:23

I think the only, not ideal solution to this problem is use jQuery's hide() function after you've loaded the elements, then fade them in. You'll get a flash of content, but it's accessible.

I've got a small example here.

Aegaeon answered 12/8, 2011 at 15:47 Comment(2)

Thanks Jam. I'd try this approach except for the increased likelihood for the content to flicker since .hide() is a heavier-weight function than just using JavaScript of jQuery to add a class. (I'm not sure who's down-voting these, not me.) – Schuman 19/8, 2011 at 20:27

Just an idea :-) Looks like you found a solution to your problem, which is what SO is for. And all the naff, downvoted answers from JamWaffles ;-P – Aegaeon 19/8, 2011 at 20:31

Recommended topics

Hot tags