2

我正在设计一个这样的表单，其中该行中标签的底部对齐为直线，该行中输入字段的顶部对齐为直线。

由于 CSS 中的一些限制（我们无法固定高度，因为它会有所不同），我必须将表单元素的标签放在第一行，然后将它们各自的输入字段放在下一行（这样输入字段位于其标签下方）。

我用这个 html 结构测试了键盘和 tab 顺序，它工作正常。我想知道 JAWS 或任何其他屏幕阅读器中的阅读顺序都不正确。

关于更改阅读顺序的任何方法的任何建议，或者是否可以继续使用此 html 结构，因为制表符顺序仍然有效？

4

2 回答 2

1

在 HTML 结构中，每个输入都应该在其标签之前，而不是在一行上有标签，在下一行有输入。

但是，您需要一个非常特殊的显示，并且您支持 IE7（没有display: table），所以我认为您最好还是使用表格。

如果你考虑到这些事情，你可以轻松地做到这一点：

为您的表单使用基本布局表格，并在表格标签上包含一个额外的属性：

<table role="presentation">

这意味着从可访问性的角度来看，该表格不是表格。（我只在支持 IE7 布局时才推荐这个！）也不要使用<th>标签。

屏幕阅读器在填写时的主要内容是明确的标签输入关系。

<label for="input_id">My label</label>
<input type="text" id="input_id">

您可以通过单击标签来判断这是否有效，它应该将光标放在输入中。

但是，您的阅读视图需要不同的方法。当您在顶部有一行项目与下面的一行项目相关时，这就是数据表的定义。因此，当页面被保存（或者它转换为阅读视图）时，使用数据表，例如：

<table>
 <tr>
   <th>Customer account number</th>
   [other <th>s]
 </tr>
 <tr>
 <tr>
   <td>023456353434</td>
 ...

当由屏幕阅读器读出时，它将在内容 (023...) 之前读取“标题”（例如客户帐号）。所以变化是：

  • 删除角色
  • 将顶行转换为<th>s

不得不说这是一个 hack，它不是特别健壮，我当然不会推荐它用于响应式站点。导致这种情况的纯粹是所需的布局和浏览器支持。

于 2013-10-09T12:13:02.543 回答
0

如果不查看您的标记，则无法准确判断，但听起来您有大量输入，然后是一排标签……这对于可访问性来说并不理想。

您可以将表单控件嵌套在标签元素中，将表单控件的显示设置为阻止以达到相同的效果，同时还增加了可用性和可点击性。

于 2013-10-04T20:39:16.877 回答