菜单 关闭

只使用键盘导航以提高可访问性

4月6日,二千零一十四

总结:对于不能使用鼠标的用户,可以通过选项卡和显示键盘焦点指示器轻松访问交互式和导航元素。


某些用户浏览互联网使用键盘而不是鼠标.专家级的“超级”用户更喜欢键盘命令以提高效率,而某些残障人士只能使用键盘。例如,有A的人运动障碍对使用鼠标所需的精细运动有困难;失明的用户依赖屏幕阅读器等辅助技术,看不到鼠标的点击位置。

键盘和鼠标的最大区别在于,当用户通过键盘导航时,访问屏幕上的链接是相继的:在到达感兴趣的链接之前,用户必须逐个浏览所有链接。相反,鼠标用户可以检查屏幕上可用的链接,并将光标直接移动到要单击的链接上;因此,鼠标允许直接存取到屏幕上的链接。

即使是最花哨、最精彩的网站,对于那些无法访问其控件并与之交互的人来说也是完全无用的。键盘友好的网站使这些交互对于无法使用鼠标的用户来说成为可能。

测试网站的键盘可访问性

对于在Firefox的台式机或笔记本上阅读本文的人来说,IE铬,或狩猎,请做这个练习。

  1. 在浏览器地址栏中单击。
  2. 把你的手从鼠标上拿开,只用键盘。
  3. 使用标签按钮,导航直到到达下面的链接。(可以使用)换档+制表符向后导航一步。)

测试链路哪儿都不去

你可能注意到4件事:

  1. 你可以跟随键盘焦点在页面上的位置。
  2. 您可以选择页面上的任何链接。
  3. 选项卡的顺序与页面布局相同:从左到右和从上到下。
  4. 在进入测试按钮之前,通过长的导航列表进行标签浏览有点烦人。(但你可以做到。)

这也是一个在你的网站上运行的快速测试。当你做测试的时候,遵循下面的3条准则,使您的网站键盘可以访问。

明显的键盘焦点

想象有人用鼠标浏览互联网,却看不到屏幕上的光标。不可能的,正确的?如果没有显示键盘焦点当前在页面上的位置的视觉指示器,则会出现这种情况。

网站需要为键盘和鼠标用户提供相同的反馈。默认情况下,键盘焦点被编码到所有常见的Web浏览器中。有些浏览器默认为灰色虚线,其他的以蓝色为实边界。(这一区别并不重要:用户将知道他们最喜欢的浏览器使用的约定。)

移除键盘焦点指示器对键盘用户来说是灾难性的。通常,焦点指示器被移除,因为它被认为是眼睛痛。如果您不喜欢浏览器提供的指示器,不要把它全部取下来;取而代之的是用一种与你的网站的外观和感觉一致的设计。manbetx官方网站手机版这个关于如何添加新焦点样式的CSS教程可能会有所帮助。

mailchimp功能页面,链接电子邮件设计器周围带有点框,指示视觉焦点manbetx官方网站手机版
mailchimp.com使用默认的浏览器视觉焦点。在上面的例子中,从IE11看,很明显,用户在“电子邮件设计器”链接上。点击manbetx官方网站手机版进入 会把他们带到那个页面。

StraimHealth主页,包含4个主要导航菜单项,第一个为视觉焦点,找到你的计划
steephealth.com将默认的视觉焦点替换为悬停状态设计:用键盘在右上角的主导航中切换,与用鼠标悬停在每个项目上时的效果相同。manbetx官方网站手机版很明显,用户当前正在找到你的计划 .

所有交互元素都可以访问

键盘用户必须能够访问所有交互元素,不仅仅是主导航或在线链接。这意味着构成元素,下拉菜单,按钮,对话框,其他的小部件都必须通过界面的选项卡来访问。

最大的问题是由

元素。这些可以通过tabindex分配键盘焦点。或者,只使用HTML链接,按钮,表单字段将确保所有元素都可以标记为。

sf-zoo票表单,名字字段中有键盘插入点
旧金山动物园门票申请表可通过键盘访问。在屏幕截图中,键盘上方的焦点是名字 字段。击中标签 键将焦点移动到,允许所有用户完成并提交此表单。

床上浴缸和主页以外的大型中心件旋转木马和点,视觉焦点,第二章指示灯周围的线条
一个常见的问题是媒体控制,比如旋转木马,无法使用键盘。然而,在床上,浴缸,除此之外,你还可以点击每个章节的指示符号进入 查看旋转木马章节。(注意这个旋转木马将更有效地与可识别的图标或缩略图,而不是圆点。)

FDA专业人员反馈页面弹出
fda.gov通过键盘的可访问性,可以导航到弹出窗口。对于用户来说,关闭弹出窗口是非常重要的,否则他们会被卡在弹出窗口中。

如果用户不能在列表中单独滚动来进行选择,键盘就很难使用下拉菜单。如果向下箭头按钮从列表中选择第一个项目,而不是在列表选项中向下移动。例如,在下面的下拉列表中,这将导致选择苹果按下向下箭头键一次。相反,向下箭头键应允许用户在苹果香焦,和橘子使用进入做出选择。

带选项苹果的扩展下拉菜单草图,香焦,橘子

Ted.com上的概述页面,带有4个下拉菜单过滤器,扩展事件过滤器,突出显示TedGlobal 2013
Ted.com上的下拉列表通过键盘工作得很好。用户可以选择其过滤器,在这里事件 ,然后击中进入 这使它们进入下拉列表。然后箭头键工作来选择它们的项目,另一个进入 进行选择。

考虑一下跳过导航链接

在大多数网站上,标签顺序将被编码以反映页面布局;从上到下,从左到右。这有助于有视力的键盘用户浏览页面。

伦敦城主页,带数字箭头,指示从左到右和从上到下的标签流
这个标签 伦敦城网站上的订单遵循与页面布局相同的视觉流。红色的圆圈表示翻页的顺序和方向。

页面布局中的一个陷阱是,在传统的页面布局中导航是第一位的(我们强烈建议保留到利用用户期望)在某些页面上,这意味着键盘用户可能需要通过100多个导航元素来切换到主要内容,这可能很困难(更不用说费时了)。

鼠标用户可以简单地忽略主导航,直接与主内容区域中的任何链接进行交互。提供一个跳过导航链接为只使用键盘的用户提供了一些好处。

加拿大政府跳到左上角的主要内容链接
加拿大政府网站提供跳转到主要内容 在页面顶部链接。只有当用户选项卡通过页面时,此链接才可用。所以它不会干扰鼠标用户的视觉设计。manbetx官方网站手机版链接名称具有描述性和简洁性。打进入 跳过导航 链接将用户带到页面标题移民和公民身份 ,允许他们继续在页面的正文内容中的链接中切换。最后一步经常被忽视,但重要的是。

结论

无法使用鼠标或看到屏幕的用户需要单独通过键盘访问所有网站内容和功能。要使您的网站键盘可访问,重要的是允许用户:1)跟随键盘焦点的位置,2)导航到所有交互元素,3)如果有多个链接,则绕过导航。