Web輔助功能：輸入中需要的表單標籤是語義/可訪問的嗎？

我正在建設一個web應用程序，我想利用表單輸入，但在某些情況下，我覺得表單標籤膨脹的HTML。我知道驗證或網站無法使用表單標籤。但關於可訪問性，表單標籤是否爲這些用戶提供了語義支持？

我有一個按鈕，將使用輸入字段中的數據，因此沒有用於提交表單。

此外，如果只存在一個輸入，然後通過按鈕的標籤索引都不會有問題..

<label> 
    Some Label: <input type="text" id="input"> 
</label>

<form> 
     <label> 
      Some Label: <input type="text" id="input"> 
     </label> 
</form>

來源

2015-09-09 floor

我能想到的唯一好處就是能夠添加''標籤（並且可能會將其隱藏於有遠見的用戶身上）。聽起來像這樣只會有一個輸入和一個按鈕，但如果不清楚按鈕和輸入是否相關，這可能會有所幫助。 –

@StephenThomas你提出了一個很好的觀點。但是這引出了一個問題，你需要一個輸入表單的圖例標籤。應該考慮的邊緣情況，但在大多數情況下是不必要的。 – floor

爲什麼你會發現'form'標籤如此「膨脹」？ Otherwidse，它可以幫助將它作爲本文的評論[鏈接]（http://www.bennadel.com/blog/2435-are-html-form-tags-required-to-display-form-input -controls.htm） – Michel

這不是需要。你可能想勾勒出你的表格，以便它可以很容易地導航到，即：

<form id="myform" role="form" aria-label="My greatest form">

如果你這樣做，那麼屏幕閱讀器用戶可以輕鬆地導航到與他/她的區域導航鍵的形式。而且他/她很容易知道表單的開始和結束位置。
我重申，這不是必需的，它對屏幕閱讀器用戶來說更加舒適。但是，如果你不想把他們的注意力吸引到整體形式上，那就讓我們單獨來做，不要聽從這個建議。

來源

2015-09-09 22:52:09

在我的評論中詳細地闡述了一下，忽略<form>標記可能很好。既然您提到頁面上同時存在<input>元素和<button>，但我可以想象可能的方案，其中<form>標籤可以提供幫助。據推測，有視力的用戶在<input>和<button>之間建立連接可能沒有問題，可能是因爲頁面的可視佈局。但是，如果除了可視佈局之外，它們之間的連接不清晰，那麼具有輔助技術的用戶可能會發現該頁面混淆。在這種情況下，可以通過將<input>和<button>包裝在一個<form>中，並將該格式設置爲<legend>，從而明確表示要素之間的連接。圖例的文字可以詳細說明或以其他方式澄清連接。由於有遠見的用戶不需要這個圖例，所以你可以隱藏他們的圖例（通過將其置於屏幕外，例如position: absolute; left: -999999px;）。這看起來像是一個非常罕見的邊緣案例，但也許它適用於你的情況。否則，我想不出有什麼好的理由來包含<form>。

來源

2015-09-10 00:01:28

是的，我同意你的意見。我沒有屏幕閱讀器，所以我不能肯定地說，但有下一個元素的按鈕，我認爲這意味着它的關聯。但你提出一個很好的觀點。 – floor

但是關於可訪問性，表單標籤是否爲這些用戶提供了語義支持？

它可以。

如果您在WCAG （http://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140916/G184）讀取的技術形式中的一種，你會看到，輔助技術可能使用戶能夠循環回在表單中的第一個文本請示需要的時候。

因此，如果用戶有這種可能性（雖然我認爲它沒有實現），但如果沒有form標籤，它將找不到任何東西。

來源

2015-09-10 14:14:20 Adam

偉大的一點。說得通。我想知道是否會有另一種方式來解決這個問題，而不使用表單標籤。感謝您的意見。 – floor

就像斯蒂芬說的，你可以使用'fieldset'和'legend'標籤，但它需要兩個標籤而不是一個標籤。我非常喜歡輔助技術能夠知道表單何時開始以及表單何時結束的想法。 – Adam

Web輔助功能：輸入中需要的表單標籤是語義/可訪問的嗎？

回答

相關問題