表格標籤和在單獨的div的

enter image description here

標籤文本和表格元素的所述第二行中的形式的3列輸入元件的尺寸可以變化，並鍵入，因此很難根據需要跨瀏覽器進行對齊。我們正在嘗試一些解決方案，一種可能性是爲標籤分開一行，爲輸入元素分開一行。然後，我們可以將標籤垂直對齊到底部，並將輸入元素對齊到頂部。

如果我們在標籤中包含必要的'for'和'aria'屬性以將其與輸入元素相關聯即使標籤和輸入元素在源代碼中並非彼此相鄰，屏幕閱讀器是否足夠？無障礙是我們必須考慮的事情。

謝謝你的任何建議。下面

http://jsfiddle.net/wYdZr/5/

<div class="container_12" style="background:green;"> 
    <div class="grid_4 lbl" > 
      <label for="firstName">TR 1 TD 1</label> 
    </div> 
    <div class="grid_4 lbl"> 
      <label for="lastName" >Bonorum Fermentum Tortor Adipiscing Pharetra</label> 
    </div> 
    <div class="grid_4 lbl"> 
      <label>Bonorum Fermentum Tortor Adipiscing Pharetra Bonorum Fermentum Tortor Adipiscing Pharetra</label> 

    </div> 
    <div class="clear"></div> 
</div> 
<div class="container_12" style="background:yellow;"> 
    <div class="grid_4"> 
      <input type="text" id="firstName"/> 
    </div> 
    <div class="grid_4"><textarea id="lastName"></textarea> 
    </div> 
    <div class="grid_4"> 
      <input type="text" id="phone" /> 
    </div> 
</div>

來源

2013-10-09 grimmus

http://jsfiddle.net/wYdZr/6/該小提琴會給你你想要的一部分，但我正在努力讓文本正確定位。 – Jacques

這個：http://jsfiddle.net/wYdZr/8/可以工作，但是你必須在'.lbl'上設置一個高度。 – Jacques

感謝您的回覆和更新小提琴，但我想知道的是，如果可以將標籤放置在與其相關的輸入元素的單獨div中，那麼該標籤是可以的！ – grimmus

如果我們在標籤中包含必要的'for'和'aria'屬性以將其與輸入元素相關聯，即使標籤和輸入元素彼此不相鄰，屏幕閱讀器是否足夠資源？

是的，這就是爲什麼首先有for attribute。

當然總有一些屏幕閱讀器（版本）不支持for的可能性，但這應該是少數，並且錯誤會明顯在他們身邊。

在WCAG 2.0技術H44: Using label elements to associate text labels with form controls中也提及for方法。注意，測試此特定技術檢查標籤的位置：

labelinput（text，file，password），textarea之前，select
label後input（checkbox，radio）

但這個我這只是這項特定技術的一個要求，所以你不一定非得遵守它，因爲還有其他技術和方法可以滿足相關的成功標準。

來源

2013-10-10 08:39:01 unor

謝謝你這個非常有用的信息:) – grimmus

小提琴你可以簡單的使用HTML表格，沒有申報單。

<table> 
<tr> 
<td></td> 
</tr> 
</table>

檢查：http://jsfiddle.net/wYdZr/7/

希望它可以幫助你！

來源

2013-10-09 14:51:12

謝謝你的回覆，但這並沒有回答我問的問題。表格當然是一個選項，但是基於網格的方法當然更適合無障礙和屏幕閱讀器？ – grimmus

不客氣！我認爲表格比網格查看效果更好，因爲它具有靈活的寬度。 –

表格如何比網格查看的div更好？ div也可以具有靈活的寬度。 – Jacques

表格標籤和在單獨的div的

回答

相關問題