你不能创造一个按钮 已翻译 100%

ShaoFantasy 投递于 2013/01/30 14:46 (共 6 段, 翻译完成于 01-30)
阅读 6288
收藏 35
8
加载中

无障碍的最重要方面之一是管理焦点和用户交互。默认情况下,所有的链接和表单控件可以获得焦点。这样您就可以使用Tab键在这些焦点之间切换,并且当其中一个元素获取了焦点时,在按下回车键后开始产生作用。这种范式工作得非常好,无论您的Web应用程序的复杂性。只要键盘的用户能够链接和表单之间的导航控制,那么就可以浏览应用程序。

不幸的是,有时Web开发人员在创建它们的接口时耍点小聪明。如果我想要一个看起来像链接的东西实现一个按钮的行为呢?然后,你最终看到了很多像这样的的代码:


<a href="#" onclick="doSomething()">I'm a button</a>
这段代码写的有可能会令你感到恶心。 这是一个哪也不能去而且什么也不能做的链接。 他所能做的是给单击事件处理加上一个意图。重点是 目前这个元素希望外观是和链接类似的,使用链接和JavaScript 标记 。
斑駁儿
斑駁儿
翻译于 2013/01/30 19:21
2

那些熟悉ARIA的人也许会像下面这样解决问:

<a href="#" role="button" onclick="doSomething()">I'm a button</a>
通过设置ARIA角色给按钮,你现在可以让浏览器和屏幕前的读者看到这个链接应该被解释成一个按钮(在页面上执行一个动作)而不是一个链接(引导你离开)。这依然有着和前面代码一样的问题,除了你试着欺骗让浏览器去把链接当成一个按钮。事实上,最恰当的是使用按钮:
<button onclick="doSomething()">I'm a button</button>
使用的标记应该永远不建立在一个UI元素的样子上。取而代之,你应该试着去构造哪个元素的真正用途并使用最合适的标记。你总能让一个按钮看起来像链接或者让一个链接看起来像按钮,但是这些只是纯粹的视觉区别,却并不改变动作。
肥肥的爱
肥肥的爱
翻译于 2013/01/30 19:59
2

如果以上是我在Web程序中遇到的最糟糕的情况的话,我可能还高兴点。然而,我一直都看到一些更加令人不安的趋势。一些Web应用程序实际上通过混合或匹配HTML,CSS和JavaScript中不同的部分,来试着创建他们自己的buttons.例如:

<div tabindex="0" role="button" onclick="doSomething()">I'm a button</div>
这是一个通过<div>来创建button的大胆尝试。通过设置tabindex属性,开发者已经确认使用键盘的用户可以通过tab键来导航到这个button。这个0值将元素添加到了正常的tab序列,在没有影响全部的移动顺序前提下,它可以像其他任何链接或按钮一样接受焦点。role属性告诉浏览器和屏幕阅读器,这个元素应该当做button,并且onclick描述了button的行为。
big军
big军
翻译于 2013/01/30 20:29
2

对于任何使用鼠标的人来说,这种样式的假设是正确的,该元素和实际的button没有任何区别。你移动鼠标到元素上,点击,触发一个动作。但是如果你正在使用的是键盘,则在该元素和常规的button之间会存在一个微小但十分重要的不同点:在该元素获得焦点并且enter键按下后,几乎所有的浏览器都不会触发click事件。IE,Chrome,FireFox以及Safari在这种情况下会忽略enter键(Opera是唯一会触发click事件的浏览器)。

默认情况下在使用links和buttons时,enter键会触发click事件。如果尝试着创建自己的button,如之前的例子那样,enter键不会有任何效果,因此用户无法执行那个动作。

big军
big军
翻译于 2013/01/30 20:39
3

这种恐怖的模式在Google的产品中十分常见。可能最讽刺的用例是在Gmail中。在你按下?键后,会弹出一个对话框,向你展示可用的键盘快捷键,允许你启动更多高级的快捷键。



似乎单词"Enable"是一个链接,所以你按了几次tab键来放置焦点到它上面并按enter键。没发生任何事。为什么?因为这个链接实际上没有链接页面也不是按钮。它是一个<span>.以下是实际的代码:

<span id=":s7.pl" role="link" class="aoy" tabindex="1">Enable</span>
几乎和本篇之前提到的问题是一样的。所以基本上为了要开启键盘快捷键,你需要能使用鼠标。事实上,Gmail上的许多按钮都是以这种方式做的。没有鼠标的话,键盘快捷键基本上是无法使用的。
big军
big军
翻译于 2013/01/30 20:52
2

Gmail不是唯一使用这种模式的Google站点。通过网络访问到Google站点,包括Google Groups和Google Analytics(同样隐藏了焦点矩形框),都存在这种模式。单单这就使得Google的产品,给那些不使用定位装置的存在视力障碍的用户带来了极大的挑战。

如果希望用户通过某些装置来进行交互,那么你需要使用链接或按钮。在获取焦点和点击enter键激活的操作方式上,这两者都会表现正常。当动作是一个导航行为(改变URL)时,应该用链接,按钮则在其它所有情况下使用。可以轻松设计这些元素的样式来创建想要的效果,但是任何都不能代替原生链接和按钮的可访问性。

big军
big军
翻译于 2013/01/30 21:08
3
本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接。
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。
加载中

评论(23)

Tobyee
Tobyee

引用来自“梁耿斌”的评论

这货不了解天朝,你要是来这边做web前端非被IE6折腾死不可

这年头如果还有企业去兼容IE6就是找死,客户都是宠坏的
MYCOIN
MYCOIN

引用来自“柴俊堃”的评论

这个2B难道不知道用a标签很容易做到鼠标移上去之后的样式么?你用button或者div都得加js才能做到。目测此人做前端是相当垃圾

a标记需要href,影响性能
太孟浪

引用来自“柴俊堃”的评论

这个2B难道不知道用a标签很容易做到鼠标移上去之后的样式么?你用button或者div都得加js才能做到。目测此人做前端是相当垃圾

从语义角度来说他说的确实没错,而且没必要a来代替button
徐迎龙
徐迎龙
写的不错,本人赞同
O油菜
O油菜
Warning : No keyboard.
Press Enter to continue ..
了墨
了墨

引用来自“Jony.Z”的评论

引用来自“wenjing”的评论

<button>样式不好调整啊,蛋疼的要死

如果用原生button样式,确实各浏览器很难统一,但我们只要能够放开思维,不统一有影响体验吗?就豁达了
如果愿意美化一下button提高体验度,写样式和用a标记是一个道理,没有不好调整

也就标签语义化好点,平时习惯性地哪个用起来方便用哪个,反正又不专职写代码
Jony.Z
Jony.Z

引用来自“wenjing”的评论

<button>样式不好调整啊,蛋疼的要死

如果用原生button样式,确实各浏览器很难统一,但我们只要能够放开思维,不统一有影响体验吗?就豁达了
如果愿意美化一下button提高体验度,写样式和用a标记是一个道理,没有不好调整
Jony.Z
Jony.Z

引用来自“柴俊堃”的评论

这个2B难道不知道用a标签很容易做到鼠标移上去之后的样式么?你用button或者div都得加js才能做到。目测此人做前端是相当垃圾

你是为了兼容IE6,人家国外很多连IE7都不考虑兼容,从语义的角度我是支持按钮用button,不支持input、a、span、div。
对于IE6如果需要兼容,适当的js是可以的,这个工作可以全局来做,目前我们的项目就是这样
一品光猪
一品光猪
什么情况?
一品光猪
一品光猪
什么情况?
返回顶部
顶部