你不应该创造按钮(Nicholas C. Zakas)

Author : lovecicy

易用性的一个重要方面就是管理焦点和用户交互。默认情况下,所有的链接和表单控件都能获得焦点。这使你可以使用键盘的Tab键导航,当一个元素获得焦点以后,可以按下Enter键激活。不管你的web应用有多复杂,这个范例都能很好地工作。只要让使用键盘的用户能够在链接和表单控件之间导航,那么他就可以轻松的使用这个web应用。

不幸的是,有时候web开发者在创建界面的时候过于“聪明”了。当我需要某些看起来像一个链接但是表现的像一个按钮改怎么做呢?你会看到很多像这样的代码:

<a href="#" onclick="doSomething()">I'm a button</a>

这段代码应该有点倒你胃口。这是一个不会跳转也不做任何事的链接。它做到仅仅是通过给onclick事件添加了一个处理函数来达到某种意图。因为期待的样式是类链接样式,所以使用了锚点标记并添加了一些JavaScript。

那些熟悉ARIA的开发者可能会这样“解决”这个问题:

<a href="#" role="button" onclick="doSomething()">I'm a button</a>

通过将标记的ARIA role属性设置为“button”,告诉浏览器和读屏软件将这个链接解释为按钮(在页面上处理事件)而不是一个链接(将你带离页面)。上面的代码除了可以骗过浏览器,让它们将链接当做按钮外,和之前的代码有一样的问题。事实上,最合适的方法是使用按钮:

<button onclick="doSomething()">I'm a button</button>

标记的使用绝不应该基于UI元素的样式,而应该明确使用这个元素的真正意图并使用合适的标记。你可以通过修改样式,让一个按钮看起来像一个链接,反之亦然,但这仅仅是视觉上的却别,并不能改变元素的行为。

如果你以为这是我见过的最变态的web应用的话,你就太天真了。我发现现在还有一张更加令人不安的趋势。有些web应用试图通过混合HTML,CSS和JavaScript来创造他们自己的按钮。见下例:

<div tabindex="0" role="button" onclick="doSomething()">I'm a button</div>

使用div标签来创建一个按钮真是一种勇敢的尝试。通过设置tabindex属性,开发者保证了键盘用户可以通过Tab键导航,其值0把元素加入到正常的Tab序列中,因此这个div可以像其他链接和按钮一样被focus,而不影响整体的Tab索引序列。role属性通知浏览器和读屏软件将此div元素当做按钮,onclick属性描述了按钮被点击时的行为。

对于使用鼠标的用户而言,在样式正确的情况下,此div元素与使用button元素没有什么区别。你可以将鼠标放到div上,点击,然后就触发了行为。但是如果你使用键盘,那么此div元素与使用button元素有一个细微但是重要的区别:当你把焦点放在div元素上然后点击Enter键,几乎所有的浏览器都不会触发click事件。IE,Chrome,Firefox和Safari都会忽略Enter键(只有Opera会触发click事件)。

默认情况下,按下Enter键会触发按钮的click事件。如果你尝试着创造自己的按钮——正如前面的div元素——按下Enter键不会有效果,因此用户就不能执行正确的操作。

这种让人讨厌的模式经常可以再Google的产品中发现。最讽刺的要书Gmail了。当你按下“?”键,会弹出一个对话框,你可以查看可用的键盘快捷键并允许你设置使用更多高级的快捷键。

Gmail

Gmail

看起来“Enable”是一个链接,所以你使用Tab键将焦点放在它上面后,点击Enter键。毫无反应。为什么呢?因为这个“链接”既不是一个链接元素也不是一个按钮元素,他是一个行内元素“<span>”。这是它的实际代码:

<span id=":s7.pl" role="link" tabindex="1">Enable</span>

几乎就是上面提到的有问题的代码模式。所以基本上,如果你想打开键盘快捷键,你必须使用鼠标。事实上,Gmail里的很多按钮都是用这种方式写的。要不是有键盘快捷键,你根本不能在没有鼠标的情况下操作。

Gmail并不是唯一的一个使用这种写法的Google产品。你可以再所以的Google产品种发现这种写法,比如Google Group和Google Analytics(连焦点的提示框都隐藏了)。仅仅这个问题就使得Google的产品对那些因为视觉障碍而不能使用鼠标的用户造成了很大的挑战。

如果你希望和用户交互,那么你就应该使用链接元素或按钮元素。就获得焦点与激活事件方面,这些元素有正确的行为。当元素的行为是导航(改变URL)的时候,就应该使用链接元素,其他时候都应该使用按钮元素。你可以很容易地通过修改样式来达到你想要的效果,但是没有什么比原生的链接元素和按钮元素有更好的易用性。

——EOF——

原文:You can’t create a button

首次翻译,有出入或不足的地方,敬请指正。

standard
  1. luckygirl - 2013 年 1 月 31 日 2:08 下午

    I’m a button

    这不是你之前的写法喽?这应该属于WEB无障碍设计的一个部分,标签语义化~ 翻译滴不错, A ZA A ZA

    回复
    • lovecicy - 2013 年 1 月 31 日 2:12 下午

      应该是吧,不过好像google的写法只是在标签的onclick属性里面的代码在按下Enter键不会执行,放在js里面的代码还是会执行的。

      回复

Have your say