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

Question

客户要求他们的主页开始空白(只显示徽标和背景图像),然后在一两秒后淡入导航和内容.

我可以从通过CSS隐藏的内容开始,然后使用jQuery淡化它.不幸的是,这违反了渐进式增强功能:在活动代码运行之前,该网站将完全无法使用,从而导致视障人士使用屏幕阅读器等问题.

我考虑过的两个解决方法是Flash和<noscript>标签.Flash似乎有点矫枉过正,因为它没有在网站的其他地方使用; 此外,主页内容丰富,不断更新的新闻项目,一种轻松的博客.该 <noscript>标签将不利于视力受损谁使用屏幕阅读器,因为他们的浏览器通常有启用脚本.

我错过了解决方案吗？或者这不是一个好主意？

Answer 1

请执行下列操作

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

有了这个CSS

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

然后在暂停两秒后你应该可以做到 $("#myHidden-div").fadeIn();

如果用户已禁用js,则addClass永远不会触发标记,也不会隐藏任何内容.我认为你根本不需要使用<noscript>标签.

您必须确保脚本标记正好在<body>用户没有看到内容的跳转然后突然隐藏之后.这比默认隐藏所有内容更好,因为一些搜索引擎可能会注意到您有隐藏文本并因垃圾邮件原因而忽略它.