表单标签和输入元素位于单独的 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

\n

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

\n

\n\n

是的，这就是为什么存在该for属性的原因。

\n\n

当然，某些屏幕阅读器（版本）始终有可能不支持\xe2\x80\x99tfor，但这应该是少数，并且错误显然是在他们这边。

\n\n

forWCAG 2.0技术H44：使用标签元素将文本标签与表单控件关联起来也提到了该方法方法。请注意，此特定技术的测试会检查标签的位置：

\n\n

\n
• label 前 input（text，file，password），textarea，select
\n
• label 后 input（checkbox，radio）
\n

\n\n

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

\n