大型信息树的无障碍导航
我正在开发一个公共网站，它是有关医疗状况信息的前端。
用户进行搜索（基于调查问卷）后，他们会看到按部分和子部分分类的结果。
信息项可以分配给部分和子部分。
目前，部分由顶部和屏幕上的选项卡表示，子部分由侧栏中的链接表示。 侧边栏中的链接会根据选择的部分而变化。
问题是部分名称非常长（几个单词），因此选项卡的组合长度对于标准屏幕分辨率（1024 x 768）来说太宽。 因此它们会换行并破坏页面布局。 将来我们还必须添加其他选项卡。
考虑到这个问题，而且我们的目标受众相当广泛，这是一个公共医疗网站，有什么选择可以以普通用户可访问且易于导航的方式呈现此类信息。
I am developing a public website which is the front end to information about medical conditions.
After the user does a search (questionnaire based) they are presented with the results which are categorised in to sections and sub-sections.
Information items can be assigned to both sections and sub-sections.
At the moment sections are represented by tabs across the top and the screen and sub-sections by links in a sidebar. The links in the sidebar change depending on which section is selected.
The problem is the section names are quite long (several words) and as a result the combined length of the tabs is too wide for a standard screen resolution (1024 x 768). Therefore they wrap and break the page layout. We will also have to add additional tabs in the future.
With this problem in mind and the fact our target audience is quite wide, this is a public medical website, what options are there for presenting this kind of information in a way which is accessible and easy to navigate for an average user.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
小节名称有多长？ 它们适合选项卡的空间吗？ 如果将部分链接放在侧边栏菜单上并将小节链接放在选项卡中，而不是相反，则可能会获得更好的用户性能。 请参阅http://www.usability.gov/pubs/040106news.html。
另一种选择是将所有内容都放在侧边栏菜单上。 小节链接可以在其节链接下方缩进显示。 您还可以考虑将小节链接放在小节列右侧的单独一列中。 这使得部分菜单稳定，但占用了大量的水平空间，这些空间可能更适合用于内容。 无论哪种情况，对视觉设计的适当关注都会显示当前的部分、小节以及它们之间的链接。
只要您使用链接导航到每个部分/小节（可能是基于与页面链接相关的数据库以编程方式为每个页面生成的），就不应该存在可访问性问题。
How long are the subsection names? Will they fit in the space for tabs? You’re likely to get better user performance if you put the section links on the side bar menu and the subsection links in the tabs, rather than the other way around. See http://www.usability.gov/pubs/040106news.html.
The other alternative is to put everything on the side bar menu. Subsection links can appear indented under their section links. You can also consider putting the subsection links in a column of their own to the right of the section column. This makes the section menu stable, but takes a lot of horizontal space that’s perhaps better used for content. In either case, proper attention to visual design will show the current section, subsection, and the link between them.
There shouldn’t be a problem with accessibility as long as you’re using links to navigate to each section/subsection (perhaps generated programmatically for each page based on a database relating links to pages).
只是集思广益一些想法：
在关于SO的另一个问题中，我发现了一个指向 Quince 的链接，也许你可以找到那里也有一些灵感。
Just brainstorming some ideas:
In another question on SO, I came across a link to Quince, perhaps you can find some inspiration there as well.
您可以尝试：
或者正如 Daan 所说：
这两者的缺点（相对于传统的树视图）的一个缺点是，在您选择一个部分之前，子部分是不可见的。 如果您的用户不知道他们想要的小节的名称，那么这两个选项都比较合适。
另一方面，如果他们确实知道他们想要的小节的名称，那么最好为他们提供一个自动完成文本框，以便他们可以输入一些字符并直接进入该文本框。
You could try:
Or as Daan has said:
The downside with both of these (over a traditional tree view) is that the subsections aren't visible until you choose a section. If your users don't know the name of the subsection they're after, then either of these will be a good fit.
If, on the other hand, they do know the name of the subsection they're after, it's probably better to give them an auto-complete textbox so they can type a few characters and go directly to it.