某些用户浏览互联网使用键盘而不是鼠标。专业的“电源”用户更喜欢键盘命令,以提高效率,而有些残疾的用户别无选择,只能使用键盘。例如,有a的人运动障碍难以完成使用鼠标所需的精细运动;盲目的用户依赖于辅助技术,如屏幕阅读器,而无法看到点击鼠标的位置。

键盘和鼠标的最大区别在于,当用户通过键盘导航时,对屏幕上链接的访问是顺序:用户必须逐个浏览所有链接,才能找到感兴趣的链接。相比之下,鼠标用户可以检查屏幕上可用的链接,并将光标直接移动到他想单击的链接;因此,鼠标允许直接访问到屏幕上的链接。

即使是最花哨或美妙的网站,对于不能访问它的控制和与它互动的人来说也是完全无用的。键盘友好型网站为不会使用鼠标的用户提供了这些交互。

测试网站的键盘可访问性

如果你是在使用火狐、IE、Chrome或Safari浏览器的台式机或笔记本电脑上阅读这篇文章,请做这个练习。

  1. 单击浏览器地址栏。
  2. 把手从鼠标上移开,只用键盘。
  3. 使用选项卡按钮,导航,直到您到达下面的链接。(您可以使用Shift + Tab导航返回一步。)

测试链接,不去任何地方

你可能注意到4件事:

  1. 您可以跟随键盘焦点在页面上的位置。
  2. 您可以选择页面上的任何链接。
  3. Tabbing遵循与页面布局相同的顺序:在列中左转和顶部到底部。
  4. 在进入测试按钮之前,通过长导航列表标签有点令人讨厌。(但是你可以做到。)

这是在您的网站上运行的快速测试。进行测试时,请按照下一个3指南,使您的网站键盘可访问。

明显的键盘焦点

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

网站需要为键盘和鼠标用户提供相同的反馈。键盘焦点默认为所有公共Web浏览器进行编码。一些浏览器默认为薄灰色虚线,其他浏览器到蓝色纯边框。(这种差异无关紧要:用户会知道他们最喜欢的浏览器采用的公约。)

删除键盘焦点指示器对键盘用户来说是灾难性的。通常,焦点指示器被移除,因为它被认为是眼痛。如果你不喜欢浏览器提供的指示,不要把它全部删除;取而代之的是使用与站点外观一致的设计。这CSS教程如何添加一个新的焦点样式可能会有帮助。

MailChimp的特色页面上,在电子邮件设计者的链接周围有一个虚线框,表示视觉焦点
mail猩。com使用默认的浏览器视觉焦点。在上面的例子中,在IE11中,很明显用户是在链接“Email Designer”上。“打输入会把他们带到那一页。

StrideHealth主页有4个主导航菜单项和视觉焦点在第一个,找到你的计划
StrideHealth.com使用悬停状态设计替换默认的视觉焦点:通过右上角的主导航标签,键盘看起来与鼠标悬停在每个项目上时相同。非常清楚用户目前正在进行中找到你的计划

所有交互元素都是可访问的

键盘用户必须能够访问所有交互元素,而不仅仅是主导航或内联链接。这意味着表单元素、下拉菜单、按钮、对话框和其他小部件都必须通过选项卡通过界面进行访问。

最大的问题是由具有

元素的JavaScript小部件造成的。这些可以通过tabindex分配键盘焦点。或者,仅使用HTML链接,按钮和表单字段将确保可以将所有元素标记为。

SF动物园门票表单与键盘插入点在第一个名称字段
旧金山动物园的票务申请表格可以通过键盘访问。在屏幕截图上面的键盘焦点是第一个名字领域。击中选项卡键把焦点移到,允许所有用户完成并提交此表单。

床浴和超越主页与大中心旋转木马和点,视觉焦点,线围绕第二章指示
常见问题是媒体控制,例如旋转板中的媒体控制不是键盘可访问。但是,在床上,浴缸和超出您可以选中每个章节指示和击中输入查看旋转木马章。(注意这一点使用可识别的图标,carousel会更有效或缩略图,而不是点。)

反馈会在FDA的专业人员页面上弹出
联邦政府也通过键盘访问来实现对弹出窗口的导航。对于用户来说,关闭弹出窗口是非常重要的,否则他们会被卡在里面。

下拉菜单很难通过键盘使用,如果用户不能在进行选择时单独滚动列表的话。如果箭头向下按钮选择了列表中的第一项,而不是在列表选项中向下移动,就会发生这种情况。例如,在下面的下拉列表中将会导致选择苹果当按下箭头向下键一次时。相反,箭头向下键应该让用户在两者之间滚动苹果,香蕉,橙子和使用输入做出他们的选择。

扩展下拉菜单的草图与选项苹果,香蕉,和橘子

带有4个下拉菜单过滤器的Ted.com概览页面,扩展了事件过滤器,突出显示了TedGlobal 2013
通过键盘,Ted.com上的下拉列表很好用。用户可以点击这里选择他们的过滤器事件然后打了输入这就把它们带到了下拉列表中。然后,箭头键用于选择它们的项目和另一个项目输入使他们的选择。

考虑一个跳过导航链接

在大多数网站上,选项卡订单将被编码以反映页面布局;这是顶部到底部,左右。这有助于看到键盘用户播放页面。

伦敦金融城的主页,带有编号的箭头表示从左到右和从上到下的选项卡的流动
选项卡伦敦金融城网站的秩序遵循与页面布局相同的视觉流程。红色编号的圆圈表示通过页面的顺序和方向。

在页面布局中使用tab键的一个缺陷是,在传统的页面布局中导航排在第一位(我们强烈建议保持这种布局)利用用户的期望)。在某些页面上,这意味着键盘用户可能必须通过100多个导航元素来访问主要内容,这可能很困难(更不用说耗费时间了)。

鼠标用户可以忽略主导航,直接与主内容区中的任何链接交互。提供一个跳过导航链接为只使用键盘的用户提供部分好处。

加拿大政府跳到左上角的主要内容链接
加拿大政府网站提供a跳转至主要内容链接在页面的顶部。该链接仅在用户通过页面时可用,因此它不会影响鼠标用户的视觉设计。链接名称是描述性的和简洁的。打输入跳过导航链接将用户带到页面标题移民和国籍,允许他们继续使用tab键浏览页面主体内容中的链接。这最后一步经常被忽视,但却很重要。

结论

那些不能使用鼠标或看到屏幕的人需要通过他们的键盘访问所有的网站内容和功能。为了让你的网站可以访问键盘,允许用户:1)跟随键盘的焦点,2)导航到所有的交互元素,3)绕过导航,如果有很多链接。