表格标签和在单独的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的

回答

相关问题