大型信息树的无障碍导航答案

【问题标题】：Accessible navigation of large information trees大型信息树的无障碍导航
【发布时间】：2009-09-20 15:00:03
【问题描述】：

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

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

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

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

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

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

【问题讨论】：

【解决方案1】：

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

另一种选择是将所有内容放在侧栏菜单上。小节链接可以在其节链接下缩进显示。您还可以考虑将小节链接放在它们自己的列中，位于节列的右侧。这使得部分菜单稳定，但占用了大量可能更适合用于内容的水平空间。无论哪种情况，适当注意视觉设计都会显示当前部分、子部分以及它们之间的链接。

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

【讨论】：

关于交换标签和侧边栏链接的位置非常好，没有想到，但不幸的是它们也是相似长度的多词链接。我认为您的建议可以与手风琴结合使用：jquery.bassistance.de/accordion/demo 单击一个部分会显示子部分。

【解决方案2】：

只是集思广益：

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

【讨论】：

我不能指望它，但我认为组合框在这里不起作用，它们可能在另一个方向上有点太远了。他们没有显示所有页面链接（部分/子部分），而是将它们全部隐藏。介于两者之间的东西可能......面包屑肯定是一种选择。 Quince 是呈现 UI 模式的好方法。我将进行适当的调查，看看是否有任何事情发生在我身上。

【解决方案3】：

你可以试试：

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

或者正如大安所说：

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

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

【讨论】：

我以前看过 ipod 菜单，真的很不错。我认为它对我们的用户来说有点太聪明了，并且再次遭受隐藏太多信息的组合问题。而且我们必须支持 IE6 (Grrrrrr)。