如何製作表格標籤鍵盤？

我有一個收集一些信息並在用戶提交表單時處理它的HTML5表單。它使用jQuery驗證插件來驗證輸入，並且如果有錯誤，它會在屏幕頂部顯示一個包含錯誤列表的錯誤消息容器div，然後給出焦點，以便屏幕閱讀器讀取它們全部出。這是通過使用<label for="input id with error">來實現的，所以當用戶用鼠標點擊標籤時，帶有錯誤的輸入變得焦點。像這樣：如何製作表格標籤鍵盤？

<form id="ts-qqw-form" action="#" method="post"> 
    <div tabindex="-1" class="error-message-container ts-hidden" id="error-message-container"> 
     <p>The following errors have occurred:</p> 
     <ul> 
      <li><label for="TravellerAge_1">Please provide the age of the travellers.</label></li> 
     </ul> 
     <!-- ... --> 
    </div> 
    <div class="ts-qqw-section clearfix"> 
     <h4>Who</h4> 

     <div class="ts-qqw-question"> 
      <label for="ts-travellers-num">Number of travellers</label> 
     </div> 
     <!-- traveller number selection --> 
     <div class="ts-qqw-input"> 
      <select name="InsuranceStepA_PeopleCount" id="ts-travellers-num"> 
       <option selected="selected" value="1">1</option> 
       <option value="2">2</option> 
       <option value="3">3</option> 
      </select> 
     </div> 
     <div class="ts-qqw-question"> 
      <span>Age of travellers</span> 
     </div> 
     <!-- traveller ages inputs --> 
     <div class="ts-qqw-input ts-age" id="ts-age-container"> 
      <input name="TravellerAge_1" class="ts-hidden ts-numeric field-error" id="TravellerAge_1" type="text" maxlength="2" data-validation-group="age"> 
      <input name="TravellerAge_2" class="ts-numeric" id="TravellerAge_2" type="text" maxlength="2" data-validation-group="age"> 
      <input name="TravellerAge_3" class="ts-hidden ts-numeric" id="TravellerAge_3" style="display: none;" type="text" maxlength="2" data-validation-group="age"> 
     </div> 
     <!-- ... --> 
    </div> 
    <div class="ts-qqw-section clearfix"> 
     <div class="ts-qqw-box clearfix"> 
      <div class="submitButton right"> 
       <button class="primary-cta ts-qqw-submit" type="submit">Get a quote</button> 
      </div> 
     </div> 
    </div> 
</form>

它可以完美地與鼠標配合使用，但不能使用鍵盤訪問（即使用tab鍵）！這是HTML5標籤元素無法獲得焦點的問題。我可以使用jQuery爲每個標籤賦予一個tabindex =「0」，但我認爲我錯過了一些東西。我怎樣才能得到它，所以我不必使用鼠標？錯誤消息容器div中的代碼是由jQuery驗證插件生成的，因此使用<a>標籤重寫它可能太困難了。

我在SO搜索了一個答案，並檢查可能的重複，但沒有任何運氣。任何建議將不勝感激。

謝謝，邁克爾。

來源

2015-05-14 Michael

試試[''tabindex''屬性]（https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex） –

我用'$（「＃error-message- （）函數（）{$（this）.attr（'tabindex'，0）}）;'當我按下tab鍵時，他們在MSIE和FF中都獲得一個輪廓，但[Enter]和[空格鍵]選擇元素。有趣的是，我打開了帶有MSIE的JAWS屏幕閱讀器，JAWS攔截了按鍵，只用鍵盤就可以按需要工作。我試圖添加一個JS onclick處理程序，但它也是一個失敗。 :-( – Michael

你的方法是完全有缺陷的。你應該改變你現在的樣子這完全做：

標籤需要在視覺上接近他們標籤，
可見標籤需要在任何時候，不僅要提供對所有輸入的輸入字段當出現錯誤並且這些標籤必須與其輸入字段在語義上相關聯
標籤是點擊行爲的錯誤語義元素，正確的元素是鏈接。只需使用鏈接。

看看下面的實現標籤和錯誤

http://dylanb.github.io/bower_components/a11yfy/examples/form-validation.html

您也可以看看這個演示的技術使用

http://www.slideshare.net/dylanbarrell/accessible-dynamic-forms-27169766

來源

2015-05-14 12:05:58 unobf

注意：我不是作者（他已經離開了），我是維護者。儘管jQuery驗證插件用於實現驗證，但是事實證明jQuery代碼創建了一個標籤並將其放入錯誤的div在我試圖維護的代碼中，所以我改變它來創建一個鏈接，現在可以通過鍵盤訪問。 – Michael

良好標記

標籤位於一個帶有tabindex -1的div內，這意味着它只能通過腳本而不能通過鍵盤達到。同樣，每個輸入都應該有一個標籤，它們的目的是將輸入描述爲不作爲錯誤的展示容器。請參閱http://simplyaccessible.com/article/error-messages-in-labels/以更好地標記錯誤和標籤。

來源

2015-05-15 08:14:59 stringy

如何製作表格標籤鍵盤？

回答

相關問題