5个常见可用性错误和解决方案

5个常见可用性错误和解决方案

我是一个性情乖戾的WEB用户, 但是我认为这是促使我成为一个优秀的WEB开发人员的原因的一部分。网站使用的困难让我非常恼怒,我想这些应该是最基本的东西。下面列出了五个常见的可用性错误和解决方案来避免它们。帮助你自己和你的用户,确保你没有打破这些规则。

使用submit代替click事件;使用<Form>标签!

我曾经多次尝试使用enter键(或移动箭头/回车键)提交一个表单，但是并没有任何事情发生。然后我单击或点击提交按钮，表单终于做一些事情，这是我最讨厌的事了。Tab键切换到提交按钮，关闭手机键盘，滚动到提交按钮的位置，这些都是不必要存在的额外步骤。只需要使用submit，我们将再次成为朋友:

document.getElementById("myForm").addEventListener("submit", function(e) {
e.preventDefault();

// ... Do processing here.  Yay for "enter" key submission!

return false;
});

如果你在任何地方犯下这种错误，请立即修复。

点击事件：当[CONTROL] 或者 [META] 也被按下的时候不要阻止。

我喜欢在新标签页浏览网页。正好最近在找房子，所以浏览了一些网站。进入网站的列表页，准备通过Command+click打开我想浏览的房子照片时，本想在新标签页浏览该页，结果重定向在同一标签页中打开了这个页，成为了click事件监听和window.location改变的受害者。在你使用preventDefault阻止任何链接之前，一定要检查是否有meta和control 属性：

document.getElementById("myLink").addEventListener("click", function(e) {
// e.preventDefault();  (bad)

if(e.meta || e.ctrlKey) return; // Don't block user if they want to open a new tab
e.preventDefault();
});

我目前在做博客检查，以便用户可以打开新的标签没有问题。不要让你的用户在你的网站上玩"click-back-click-back"游戏！

在使用text-overflow: ellipsis的时候为元素添加title属性

（有点）新的css text-overflow: ellipsis属性值是很有用的。开发者们经常使用这个效果。我很赞同使用text-overflow: ellipsis，当我把鼠标悬停在这个元素上的时候，你最好添加一个title属性。这样我就可以很快的看到整个文本了。

<div class="ellipsizeMe" title="I am some really, really long text that's going to be ellipsized">
I am some really, really long text that's going to be ellipsized
</div>

如果你不想写两次这样的内容，你可以通过js动态地设置title属性。无论你做什么，请留住你的用户。

不要忘记:focus和:active

在给一个元素设置样式时，很多人忘记了这些状态（假如用户使用鼠标）。也设置:focus和:active状态：

a:hover, a:active, a:focus { /* change _all_ the pseudos! */
color: #900;
}

帮自己一个忙：下次创建一个站点，tab切换你的页面。如果你点击了tab键，但是不知道哪个元素获得了焦点。检查你的样式表，检查是否忘记添加这些状态中的一个。

使用输入类型search / email

当我尝试填写一个讨厌的移动设备上的表单的时候，我不得不需要切换屏幕键盘来得到一个@符号，这令我非常的沮丧。使用正确的输入类型：

<input type="search" value="" />
<input type="email" value="" />

一个快速更新，为你的移动端用户提高可用性。

这里有数以百计的常见实用性错误可供开发人员使用，所以期望在未来有更多的这样的职位。有前途的是这些可用性问题可以很简单的得到更正。正如你看到的上面的问题一样。如果你也有这样的问题和解决方案并且你也想让别人了解到这个问题，请让我知道。我会编辑另外一篇文章分享它。

原文链接: http://davidwalsh.name/common-usability-mistakes