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="" />

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

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