动态常见问题页面 - 可访问性和渐进增强示例

这个想法是创建一个问答式页面，通过 JavaScript（jQuery）来增强其功能。每个问题都会显示在一个带有标签的方框中，标签悬挂在方框底部。点击标签时，标签会滑出，露出另一个包含答案的方框。

查看演示   下载文件

注意事项

这绝对不是一件难事，尤其是在 jQuery 的帮助下。但这个示例非常适合考虑我们即将执行操作的影响。我们的想法考虑了大多数访问网站的人，即使用支持 JavaScript 的标准浏览器的用户。但我们也需要考虑使用非标准浏览器（例如屏幕阅读器）的用户，或者在禁用 JavaScript 的情况下浏览网页的用户。

无 JavaScript

在我们功能齐全的示例中，答案被隐藏，直到点击答案标签才会显示。有很多方法可以实现这一点，但我们应该注意使用 JavaScript 进行隐藏操作，这样当 JavaScript 关闭时，答案就不会被隐藏。我们的“答案”下拉标签在禁用 JavaScript 时也会变得无关紧要，所以我们也要注意通过 JavaScript 应用它，使其只在可用时出现。

屏幕阅读器

我们已经确定将使用 JavaScript 来隐藏答案，所以不用担心答案隐藏的问题。我们现在唯一要担心的是我们的标记是否干净且语义化。换句话说，没有屏幕阅读器用户不需要看到的额外内容，以及“问题”和“答案”之间清晰的区分。

标记

然后我们从标记开始。我们将利用 定义列表，我认为它非常适合常见问题内容。

<dl class="faq">
	<dt>How much wood would a wood chuck chuck if a wood chuck could chuck wood?</dt>
	<dd class="answer"><div>1,000,000</div></dd>
</dl>

非常干净，但我们的语义评分有一个缺点：答案元素中的额外 div。这并非完全必要，但它有助于我们打算使用 jQuery 执行的动画的流畅性。简而言之，如果您使用类似 .slideToggle 的函数，如果该元素不使用任何填充，您的动画将更加平滑。我们通过这个额外的 div 来实现我们需要的填充。 此处有更多信息。

jQuery JavaScript

首先，我们加载库并链接到我们的外部 JavaScript 文件，以保持代码整洁。请注意，我们在这里从 Google 加载 jQuery，这是生产环境的推荐做法。更多关于 如何 和 为什么 的信息。

<script src="//www.google.com/jsapi"></script>
<script>
  google.load("jquery", "1.2.6");
</script>
<script src="js/faq.js"></script>

然后我们编写实际的代码。

1. 隐藏答案。
2. 追加“答案”悬挂标签
3. 将 slideToggle 功能应用于标签

$(function(){
	$("dd.answer")
		.hide();
	$("dl.faq")
		.append("<dd class='answer-tab-wrap'><a class='answer-tab'>Answer</a></dd>");	
	$(".answer-tab")
		.click(function(){
			$(this)
				.parent()
				.parent()
				.find("dd.answer")
				.slideToggle();
		});
});

CSS

dl			{ clear: both; margin: 0 0 20px 0; }

dt			{ border: 8px solid #7ac0d0; padding: 10px; background: white; 
			  position: relative; font-style: italic; }
					
dd.answer		{ background: white; 
			  position: relative; width: 90%; margin: 0 auto; }
dd.answer div		{ padding: 10px; border-left: 8px solid #dedede;
                         border-right: 8px solid #dedede; border-bottom: 8px solid #dedede; }
dd.answer-tab-wrap	{ margin: 0 30px 0 0; }

.answer-tab		{ background: url(images/answer-tag.png); display: block; margin: 0 0 20px 0;
                        text-indent: -9999px; width: 105px; height: 50px; float: right; }

这里有一些有趣的地方。因为我们正在使答案标签浮动，所以我们将在定义列表本身清除浮动，以确保它们之间的间距正常。我们还在 .answer-tab 锚链接上使用 CSS 图片替换，以实现最高效率（图片只需加载一次）。

成功

在页面顶部，您可以看到 演示 的结果，具有功能。以下是其他场景

JavaScript 关闭

答案可见，样式仍然合理。

屏幕阅读器

以网页形式显示，禁用 CSS 和 JavaScript。

已在以下浏览器中测试并通过

Firefox 3、Safari 4、Internet Explorer 6 & 7、Opera 9