5

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

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

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

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

4

5 回答 5

5

请执行下列操作

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

有了这个 CSS

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

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

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

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

于 2011-08-12T15:49:42.153 回答
1

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

  1. 从默认隐藏的内容开始。
  2. 向要显示的元素添加另一个 css 类。
  3. 在 noscript 标记中，添加另一个带有新 css 类定义的 CSS 文件，以显示内容。
  4. 否则，使用 jQuery 淡入元素。

或者，推倒您正在为其构建此网站的人，因为那是一种可怕的用户体验。=D

于 2011-08-12T15:48:05.763 回答
1

为视障者和其他人设置不同的站点。一个有剧本，一个没有。

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

于 2011-08-12T15:48:08.083 回答
1

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

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

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

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

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

于 2011-08-12T15:48:54.177 回答
0

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

我这里有一个小例子。

于 2011-08-12T15:47:53.767 回答