可访问的大型信息树导航

Question

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

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

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

目前，部分由顶部的标签和屏幕以及子部分中的链接按侧边栏中的链接表示。侧栏中的链接会根据选择的部分而变化。

问题是部分名称很长（几个单词），因此标签的组合长度对于标准屏幕分辨率（1024 x 768）而言太宽。因此，它们包装并破坏页面布局。我们还将在未来添加其他标签。

考虑到这个问题以及我们的目标受众相当广泛的事实，这是一个公共医疗网站，有哪些选项以便于普通用户访问和轻松导航的方式呈现此类信息。

Answer 1

只是头脑风暴一些想法：

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

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

Answer 2

你可以尝试：

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

或者正如Daan所说：

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

这两个方面（在传统树视图中）的缺点是，在您选择一个部分之前，子部分是不可见的。如果您的用户不知道他们所关注的小节的名称，那么其中任何一个都是合适的。

另一方面，如果他们确实知道他们所追求的小节的名称，那么最好给他们一个自动完成的文本框，这样他们就可以键入几个字符并直接转到它。

Answer 3

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

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

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