在单独的div中表单标签和输入元素

Question

我们正在尝试布局表格的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>

Answer 1

  

如果我们在标签上包含必要的'for'和'aria'属性以将它与输入元素相关联，即使标签和输入元素在源中不在彼此旁边，它对于屏幕阅读器是否足够？ / p>

是的，这就是为什么首先有for attribute的原因。

当然，某些屏幕阅读器（版本）总是有可能不支持for，但这应该是少数，错误很明显就在他们一边。

WCAG 2.0技术H44: Using label elements to associate text labels with form controls中也提到了for方法。请注意，此特定技术的测试会检查标签的位置：

• label 之前 input（text，file，password），textarea，{{1 }}
• select 之后 label（input，checkbox）

但这只是这种特殊技术的要求，因此您不一定要遵守它，因为还有其他技术和方法来完善相关的成功标准。

Answer 2

你可以简单地使用HTML表格，没有div。

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

请检查：http://jsfiddle.net/wYdZr/7/

希望它可以帮到你！