2

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

2 回答 2

4

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

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

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

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

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

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

于 2013-10-10T08:39:01.733 回答
0

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

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

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

希望对你有帮助！

于 2013-10-09T14:51:12.003 回答