使用<button>或<a>打開/關閉模式更方便嗎？

Question

根據我的理解，按鈕用於執行功能，鏈接用於將用戶導航到不同的頁面。但是打開和關閉模式的最佳做法是什麼？

<a id="testModal" href="#">Open Modal</a> 

或

<button id="testModal">Open Modal</button> 

Answer 1

<button>

更改<a href="#">到<button>，把你的事件處理程序就可以了。

一些更多的上下文上的哪些元素所屬的地方....

是否控制帶我到另一頁？使用錨點

如果點擊，點擊或通過鍵盤或語音（或在此插入新穎的交互方法）激活用戶，則會將用戶提交給另一個URL（包括同一頁面上的錨點），然後使用<a href="[URL]"> 。確保你使用href屬性，並且它有一個真實的URL，而不是一個「＃」（否則你可能依靠JavaScript，這對超鏈接來說並不是必需的）。如果一個href指向一個「＃」，那麼你可能做錯了。如果它指向一個已命名的錨點作爲漸進增強工作的一部分，那麼這是完全有效的。

控件是否改變當前頁面上的某些東西？使用按鈕

如果激活時用戶沒有從頁面（或頁面內的錨點）移動，而是顯示新視圖（消息框，佈局等的變化） ，然後使用<button>。雖然您可以使用<input type="button">，但您很可能會與預先存在的樣式和後續開發人員（如我）發生衝突。

控件是否提交表單域？使用提交

如果啓動時，信息的用戶輸入（通過手動鍵入或選擇屏幕上的項目）被髮送回服務器，然後使用<input type="submit">。這最好住在<form>之內。如果您需要更多樣式控制或不得不嵌入更多簡單的文本字符串，請改用<button type="submit">。

鍵盤注意事項

鍵盤用戶片刻的思考。超級鏈接可以通過按回車鍵來觸發。但是按下回車鍵或空格鍵可以觸發一個真正的按鈕。當超鏈接具有焦點並且用戶按下空格鍵時，頁面將滾動一個屏幕。如果沒有更多的滾動，那麼用戶只是無所事事。給定一組看起來相同的界面元素，如果某些界面元素使用空格鍵，而有些界面元素不使用，則不能指望用戶對頁面的行爲方式有很大的信心。

我認爲值得一提的是，當釋放按鍵時，由空格鍵觸發的事件只會觸發，而使用Enter鍵會在您按下按鍵（釋放按鍵之前）時立即觸發事件。

Answer 2

我認爲有兩種可能的情況。

1. 你的內容僅在視覺上隱藏在頁面或頁面可見（可以通過屏幕閱讀器讀取），並且可以散列連接，然後一個錨標記可能是適當的（這種情況下是不那麼常見，如：使用情況是，如果您將頁面上的段落或圖像突出顯示爲模式）。

2. 在幾乎所有其他情況下，你的模態被加載到同一頁面，並且不會使用url鏈接進行導航（除非通過ajax訪問可能不計數據的數據）。因此它是一種自定義功能，而按鈕是合適的選擇。

Answer 3

按照定義排序，對話框會彈出當前窗口。你並沒有真的離開窗戶，它暫時不可用。一旦你完成了對話，你通常會回到窗口。所以在這方面，你不想使用鏈接，因爲你不會去另一個頁面。你正在對當前頁面進行一些操作。使用一個按鈕。

當使用屏幕閱讀器時，我會經常提出鏈接列表（JAWS中的Ins + F7），以查看我可以鏈接的頁面。我還會顯示一個按鈕列表（Ctrl + Ins + B），以查看頁面上的可用操作。我期望這個動作能夠打開一個模式對話框，並將其放在我的按鈕列表中。