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

客户要求他们的主页开始空白(只有徽标和背景图像可见)，然后在一两秒钟后在导航和内容中逐渐消失。

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

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

我错过了一个解决方案吗?还是说这不是个好主意?

执行以下操作

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

用这个css

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

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

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

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

我认为你可以做这样一个hack:

或者，推回你正在建立这个网站的人，因为这是一个可怕的用户体验。div = D

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

如果您有一些服务器端代码，

可以像get变量一样简单。

在头部，你可以在javascript中创建设置这个CSS规则:

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

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

然后在页面底部运行javascript来隐藏所有内容并删除此CSS规则，然后像您想要的那样逐渐淡出。

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

我认为唯一的，不是理想的解决方案，这个问题是使用jQuery的hide()函数后，你已经加载了元素，然后淡出他们。你会看到一闪而过的内容，但它是可访问的。

我这里有一个小例子

相关内容