在单独的 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' 属性以将其与输入元素相关联，即使标签和输入元素在源中不彼此相邻，屏幕阅读器是否就足够了？

是的，这就是为什么首先出现for attribute。

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

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

• label 之前 input (text, file, password), textarea, select
• label 之后 input (checkbox, radio)

但这只是此特定技术的要求，因此您不一定必须遵守它，因为还有其他技术和方法可以满足相关的成功标准。

Answer 2

您可以简单地使用 HTML 表格，无需 div。

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

检查这个：http://jsfiddle.net/wYdZr/7/

希望对你有帮助！