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?

回答1:

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.

回答2:

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

回答3:

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.

回答4:

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 :)

回答5:

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.

来源：https://stackoverflow.com/questions/7042670/how-to-fade-in-an-entire-web-page-accessibly

标签

jquery

accessibility

progressive-enhancement