2017-07-28 76 views
1

我有一些形式的使用提交butttons這樣的: <input type="button" onclick="validateAndSubmit()">無障礙網頁:輸入類型=「按鈕」即提交

它們工作得很好,但無障礙跳棋說沒有形式提交按鈕,因爲有ISN一個。我知道type =「button」明確表示它作爲一個按鈕,但我不知道如何指示輔助技術,它專門用作提交按鈕,而不實際使用type =「submit」 。 (我寧願不使用實際的提交按鈕,因爲意外的javascript錯誤會提交表單。當然,您可以捕獲錯誤,在這個意義上它只是不太健壯,我不知道是否有其他方法。)

是有一個ARIA角色或其他技術可以明確表示該按鈕是否提交表單(假設所有內容都是有效的)?

回答

0

Form元素不需要有一個submit按鈕。沒有這樣的義務。

您使用的可訪問性檢查器是錯誤的。

W3C使用的形式一些例子,而不提交按鈕在其文檔中:

Finally, to make the form submittable we use the button element:

+0

這就是我想,但我們的一些客戶使用SiteImprove,其報告和Chrome擴展標記與「缺少表單按鈕」錯誤「的頁面包含一個形式,但沒有提交按鈕。表單應該提供一個提交按鈕以最大化可預測性。'它看起來好像是一個

+0

但是,具有onclick的按鈕元素看起來與提交按鈕具有相同的行爲,因爲如果click處理程序引發錯誤(不執行),它會提交。 – enigment

+0

SiteImprove是錯誤的。你可以完美地擁有一個沒有'動作'做ajax其他東西的表單。如果你只想要滿足你的客戶盲目使用審計工具,只需添加一個提交按鈕,並用CSS隱藏它。 – Adam

3
<button type="submit" onclick="validateAndSubmit()">Submit</button> 

應該做的伎倆。在這種情況下,不需要ARIA角色(button),因爲在這裏按照HTML規範中的定義使用button

+0

參見[我的其他評論](https://stackoverflow.com/questions/45372598/web-accessibility-input-type-button-that-submits/45377720#評論-77717952)。 – enigment

0

我不同意現有的兩個答案。

確實,在表單中提交按鈕並不是一項義務。 但是,如果您的表格有意提交,必須有一個提交按鈕

你的按鈕<input type="button" onclick="validateAndSubmit()">的弱點是,你真的有義務點擊這個按鈕來觸發該功能並提交表單。

然而,在任何字段中按下回車鍵時(而不一定是提交按鈕),表單通常是有用的,並且大多數用戶期望。 典型用例:輸入您的電子郵件,選項卡,輸入您的密碼,並直接按Enter鍵登錄,而不是用鼠標點擊「登錄」或再次按下一次標籤並輸入。

您的假提交按鈕不允許這樣做。您應該用真正的提交按鈕<input type="submit" />替換它,並使用表單上的提交事件(<form onsubmit="...">)。

如果您的問題是意外的JavaScript錯誤導致表單提交時輸入錯誤,請不要忘記您必須再次檢查輸入服務器端。 爲了以防萬一,您完全可以使用try ... catch ... finally並在finally子句中執行event.preventDefault(),如果您通過AJAX提交,並且您不確定代碼是否永遠不會觸發錯誤;這不是一個糟糕的防守性編程解決方案。