WebAIM -考虑网页的可访问性

站点搜索、索引和站点地图

网站搜索

一个好的网站搜索能够让人绕过网站的无关结构和内容,直接进入到想要的内容。网站搜索功能本身应该容易找到和操作简单。可以提供一个高级或复杂的搜索表单作为额外功能,但它不应该是默认选项。搜索表单应该在页面上易于区分,并通过具有清晰标记的搜索文本框和/或按钮来区别于其他表单。

如果站点搜索功能出现在每个页面上,那么它通常是最有用的,尽管没有要求这样做。至少它应该出现在主页上,而不强迫用户点击搜索页面的链接。搜索功能的字符宽度应该在25到35个字符之间,这样用户可以轻松地输入和编辑他们的查询。

站点搜索可以用“search”ARIA地标角色进行标记(例如,<形式作用= "搜索" >),让屏幕阅读器及键盘使用者更容易使用。此角色将搜索表单与页面上的所有其他表单区分开来。

网站地图或索引

有三种主要类型的网站地图或索引:

  1. 字母顺序排列
  2. 结构
  3. 图形化的

字母的网站索引

网站索引按字母顺序列出网站上所有重要的内容区域,很像一本书后面的索引。这对于非常小的站点可能是不必要的,对于非常大的站点可能是不切实际的,因为这些列表可能会变得太长而无法有效使用,但这也是用户在站点上查找信息的最有用的方法之一。

一个按字母顺序排列的索引的截图,顶部的字母链接到相应的字母部分,这些部分有以这些字母开头的链接列表

精心设计的按字母顺序排列的网站索引包括用户可能想要搜索的单词和概念的同义词。例如,在一个网站对古典作曲家,字母的网站索引应该解释,用户可能会试图找出信息下的作曲家德彪西一样通过名字,姓氏,甚至“法国作曲家”等术语“印象派音乐,甚至他的作品如的名字克莱尔·德·弓形幻想。下面的示例交叉引用了有关web技术的术语。

按字母顺序排列的索引显示大量交叉引用的链接,显示“看”或“也看”

按字母顺序排列的索引越全面,它就越有用,只要它不变得笨拙。开发人员可能需要为长索引创建多个页面,可能需要为字母表中的每个字母创建一个页面。

结构(局部)站点索引

结构型网站地图是按主题或类别组织的到网站内容的链接列表。

亚马逊网站的地图,显示了主要内容区域与子类别的链接。

通常,结构化站点地图反映站点的组织结构。例如,如果一个站点有3个主要的“标签”,或者在每个页面的顶部有类别链接,这3个类别可以作为组织结构化站点地图内容的方法。一般来说,站点地图组织应该反映站点本身的导航或结构组织。

google。com的站点地图

图形化的站点地图

尽管图形网站地图不太常见,或许也不太有用,但它是更常见的基于文本的版本的一种替代品。这些图形通常看起来类似于企业通常用来描述主管及其下属之间的等级关系的组织图。下面是一个虚拟公司的结构图截图:

结构地图的截图-最上层是家,下面有3个级别(产品,服务和关于我们)-产品有两个子级别(超级老鼠陷阱和蝙蝠陷阱专业)-服务有两个级别(鸟粪去除和标本制作)。万博体育苹果

上面的例子可能过于简单,但是对于更复杂的站点,其思想是相同的。然而,复杂站点的图形站点地图的一个问题是,它们需要大的结构地图——可能比容易理解的大。

有许多方法可以图形化地表示站点的组织。标题中可以使用照片或图形来分组和说明概念。可以在相关页面周围画圆圈或方框。家具店可以利用房子的平面图来组织不同类型家具的名称或照片。所有到厨房项目的链接都可以放在图表的厨房中,等等。如果谨慎使用,并进行可用性测试,这种类型的概念会非常强大。不过,这样的创意很容易产生事与愿违的效果,造成混乱的局面。要有创造力,但要测试解决方案以确保它们有效。

如果网站导航的视觉设计为整个网站的结构提供了明显的视觉线索,那么图形化的网站地图可能是不必要的。另一个主要问题是屏幕阅读器的可访问性。将这样的图形化站点地图图像提供适当的描述性替代文本是不可行的和不可用的。如果使用,可能需要其他机制来提供对站点结构的访问。