大型信息树的无障碍导航

Question

我正在开发一个公共网站，它是有关医疗状况信息的前端。

用户进行搜索（基于调查问卷）后，他们会看到按部分和子部分分类的结果。

信息项可以分配给部分和子部分。

目前，部分由顶部和屏幕上的选项卡表示，子部分由侧栏中的链接表示。侧边栏中的链接会根据选择的部分而变化。

问题是部分名称非常长（几个单词），因此选项卡的组合长度对于标准屏幕分辨率（1024 x 768）来说太宽。因此它们会换行并破坏页面布局。将来我们还必须添加其他选项卡。

考虑到这个问题，而且我们的目标受众相当广泛，这是一个公共医疗网站，有什么选择可以以普通用户可访问且易于导航的方式呈现此类信息。

Answer 1

小节的名字有多长？ 他们是否适合标签空间？如果您将侧栏菜单上的部分链接和选项卡中的子部分链接放在一起，而不是相反，那么您可能会获得更好的用户性能。请参阅 http://www.usability.gov/pubs/040106news.html 。

另一种选择是将所有内容放在侧栏菜单上。子节链接可以在其节链接下缩进显示。您还可以考虑将子节链接放在节列右侧的列中。这使得节菜单稳定，但需要大量的水平空间，这可能更适合用于内容。在任何一种情况下，对视觉设计的适当关注将显示当前部分，子部分以及它们之间的链接。

只要您使用链接导航到每个部分/子部分（可能是基于与页面链接相关的数据库为每个页面编程生成），就不应该存在可访问性问题。

Answer 2

只是集思广益一些想法：

• 使用组合框允许用户选择（子）部分，然后显示适当的信息项。
• 为每个部分级别创建单独的页面，并提供面包屑控件以向用户显示他/她在页面层次结构中的位置。
• 创建某种折叠式菜单，当用户阅读信息项时自动隐藏。

在关于SO的另一个问题中，我发现了一个链接 桲, ，也许你也可以在那里找到一些灵感。

Answer 3

你可以尝试：

• iPod 风格的菜单（其中的小节是从右侧飞入的隐藏页面）： http://www.filamentgroup.com/lab/jquery_ipod_style_and_flyout_menus/

或者正如达安所说：

• 级联下拉框： http://www.asp.net/AJAX/AjaxControlToolkit/Samples/CascadingDropDown/CascadingDropDown.aspx

这两种方法（相对于传统的树视图）的缺点是，在您选择一个部分之前，子部分不可见。如果您的用户不知道他们想要的小节的名称，那么这两个选项都比较合适。

另一方面，如果他们确实知道他们想要的小节的名称，那么最好为他们提供一个自动完成文本框，以便他们可以输入一些字符并直接进入该文本框。