html - 表单标签和输入元素位于单独的 div 中

Question

我们正在尝试布局表单的 3 列，如下图第二行所示

标签文本和表单元素的大小和类型可能有所不同，因此很难根据跨浏览器的要求进行对齐。我们正在尝试多种解决方案，一种可能性是为标签设置单独的行，为输入元素设置单独的行。然后我们可以将标签垂直对齐到底部并将输入元素对齐到顶部。

如果我们在标签上包含必要的“for”和“aria”属性以将其与输入元素关联起来，即使标签和输入元素在源中并不相邻，对于屏幕阅读器来说是否足够？可访问性是我们必须考虑的事情。

感谢您的任何建议。下面 fiddle

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

Would it be enough for screen readers if we included the necessary 'for' and 'aria' attributes on the label to associate it to the input element even though the label and input element are not beside each other in the source ?

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

当然，某些屏幕阅读器(版本)总是有可能不支持 for，但这应该是少数，并且错误显然是在他们这边。

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

• 标签 之前 输入 (文本, 文件, 密码), 文本区域, 选择
• 标签 之后 输入(复选框、单选)

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