Web程序員常見的5個錯誤及解決方案

我是那種脾氣暴躁的Web用戶，但我認為正是如此才驅使我成為一名良好的web開發人員。我會對那些會導致使用網站變得困難的事情惱火，我認為事情越簡單越方便越好。這裡有五個常見的可用性錯誤，以及如何避免它們的解決方案。

使用submit 代替 click 事件；使用<Form>標簽！

我自己也不知道有多少次我曾試著用 ENTER 鍵（或移動方向/enter鍵）提交表格，然後卻什麼都沒發生。然後我點擊或使用提交按鈕，表格才肯做一些事情。這是我對可用性這個領域的問題中最不滿的一個。跳格到提交按鈕，關閉移動鍵盤並滾動到提交按鈕，完全是不需要存在的令人煩不勝煩的多余步驟。因為只需使用submit，一切煩惱就煙消雲散：

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

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

	return false;
});

如果你曾在任何地方犯下這一暴行，請立即修復它。

點擊事件：當[CONTROL]或 [META] 也按下的時候，不要阻止

最近我正在網上找新房子，我習慣於打開一串新標簽。我看到一個列表頁面和命令點擊我想要浏覽照片的幾幢房子，然後會被重定向到在同一個標簽頁面：點擊監聽和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();
});

不要讓你的用戶在你的網站上玩點擊後退點擊後退的游戲！

給帶有text-overflow: ellipsis的元素添加標題屬性

新的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來動態地設置標題。不管你做什麼……請為你的用戶著想。

不要忘記:focus和:active！

很多人在樣式化元素和假設用戶有鼠標的時候，忘記了這些聲明。還得使用:focus和:active聲明：

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

請記住：下次你創建網站的時候，要給所有頁面添加tab鍵功能：如果你點擊tab鍵，卻不知道什麼元素會得到焦點，那就檢查你的樣式表，看看是否忘了添加這些聲明！

使用類型為search和email的input輸入框

當我嘔心瀝血地完成移動設備上的表格時，卻因為不得不在鍵盤屏幕之間切換以得到一個“@”，而感受到了令人難以置信的沮喪。請務必使用正確的輸入類型：

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

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

我們需要為移動用戶提供快速更新以及非常大的易用性。

但是，開發人員可能會犯數以百計的常見的可用性錯誤，因此期待以後會有更多關於可用性的文章。令人欣慰的是，大多數可用性問題糾正起來非常簡單，如果你閱讀了以上幾個可用性問題的話。如果你有任何關於有用性的問題和解決方案，也歡迎能和我們一起分享！