How to fade in an entire web page -- accessibly
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?
Answer
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.