如何淡入整个网页 - 可访问答案

【问题标题】：How to fade in an entire web page -- accessibly如何淡入整个网页 - 可访问
【发布时间】：2011-08-13 00:03:26
【问题描述】：

客户要求他们的主页一开始是空白的（只有徽标和背景图像可见），然后在一两秒后淡入导航和内容。

我可以从通过 CSS 隐藏的内容开始，然后使用 jQuery 将其淡入。不幸的是，这违反了渐进增强：在活动代码运行之前，该站点将完全无法使用，这会给使用屏幕阅读器的视障人士带来问题，等等。

我考虑过的两种解决方法是 Flash 和 <noscript> 标记。 Flash 似乎有点矫枉过正，因为它没有在网站的其他地方使用。此外，主页内容丰富，有一组不断更新的新闻，有点像一个轻博客。 <noscript> 标签对使用屏幕阅读器的视障人士没有帮助，因为他们的浏览器通常启用脚本。

我是否缺少解决方案？或者这不是一个好主意？

【问题讨论】：

【解决方案1】：

执行以下操作

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

有了这个css

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

然后在暂停两秒钟后，您应该可以执行$("#myHidden-div").fadeIn();

如果用户禁用了 js，那么addClass 标签将永远不会被触发，也不会隐藏任何内容。我认为您根本不需要使用<noscript> 标签。

您必须确保脚本标签紧跟在<body> 之后，这样用户就不会看到内容的跳转然后突然隐藏。这比默认隐藏所有内容要好，因为某些搜索引擎可能会注意到您隐藏了文本并出于垃圾邮件的原因将其忽略。

【讨论】：

感谢 Amir，这是我没有想到的解决方法——比 jQuery .hide() 更轻量。我仍然担心在 jQuery 有机会初始化和运行之前可能会有短暂的内容闪现，特别是因为我们希望为农村用户提供慢速拨号连接。所以我会在限制带宽的情况下尝试一下，如果效果不好，我会向客户解释为什么我们不应该在网站中淡入淡出。
@Andy 很高兴我能提供帮助。如果 jquery 脚本包含在 <body> 标记之上，那么浏览器在到达正文时应该已经执行了脚本。让我知道结果如何。

【解决方案2】：

我认为您可以进行这种破解：

或者，反对您为其构建此网站的人，因为那是一种糟糕的用户体验。 =D

【讨论】：

【解决方案3】：

为视障人士和其他人提供不同的网站。一个有剧本，一个没有。

如果您有一些服务器端代码，可以像获取变量一样简单。

【讨论】：

【解决方案4】：

在头部，您可以在 javascript 中创建设置此 CSS 规则：

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

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

然后在页面底部运行您的 javascript 以隐藏所有内容并删除此 CSS 规则，然后按照您的需要逐渐淡入。

这适用于非 javascript 浏览器和启用 javascript 的屏幕阅读器 :)

【讨论】：

感谢 soniic，+1 建议的方法；与阿米尔的非常相似，我几乎接受了。与 Amir 一样，我担心内容会闪烁然后关闭的可能性：在 jQuery 加载和运行之前，内容将一直存在，这更有可能在连接速度较慢的情况下出现。不过，这似乎很接近。

【解决方案5】：

我认为解决这个问题的唯一但不理想的方法是在加载元素后使用 jQuery 的 hide() 函数，然后将它们淡入。你会得到一闪而过的内容，但它是可访问的。

我有一个小例子here。

【讨论】：

谢谢果酱。我会尝试这种方法，除了增加内容闪烁的可能性，因为 .hide() 是一个比仅使用 jQuery 的 JavaScript 添加类更重的函数。（我不确定是谁对这些投了反对票，而不是我。）
只是一个想法 :-) 看起来您找到了解决问题的方法，这就是 SO 的用途。还有来自 JamWaffles 的所有不屑一顾的、被否决的答案；-P