如何淡入整个网页-可访问性 [英] 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.
我可以先通过CSS隐藏内容，然后使用jQuery将其淡入淡出。不幸的是，这违反了渐进式增强功能：在运行有效代码之前，该站点将完全无法使用，从而导致使用屏幕阅读器等视障人士的问题。
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.
我考虑过的两个解决方法是Flash和< noscript> 标记。 Flash似乎过分杀人，因为它没有在网站上的其他地方使用；同样，主页内容丰富，新闻集不断更新，就像是一个博客。 < noscript> 标签不会帮助使用屏幕阅读器的视障人士，因为他们的浏览器通常启用了脚本功能。
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?
推荐答案
执行以下操作
<html>
....
<body>
<script>$("body").addClass("hide");</script>
...
使用此CSS
body.hide #myHidden-div{
opacity: 0;
}
然后，在暂停两秒钟后，您应该可以执行 $（＃myHidden-div）。fadeIn（）;
Then after a two second pause you should be able to do $("#myHidden-div").fadeIn();
如果用户禁用了js，则 addClass 标签将永远不会触发，也不会隐藏任何内容。我认为您根本不需要使用< noscript> 标记。
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.
您必须确保脚本标签位于< body> 之后看到内容的跳跃然后突然隐藏。这比默认情况下隐藏所有内容要好，因为某些搜索引擎可能会注意到您已隐藏文本，并且由于垃圾邮件的原因而忽略了它。
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.
这篇关于如何淡入整个网页-可访问性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
