更改 html 表单元素的阅读顺序答案

【问题标题】：Change reading order of html form elements更改 html 表单元素的阅读顺序
【发布时间】：2013-10-04 13:46:25
【问题描述】：

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

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

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

任何改变阅读顺序的方法的建议要么是否可以继续使用此 html 结构，因为 tab 顺序仍然有效？

【问题讨论】：

【解决方案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...) 之前读取“标题”（例如客户帐号）。所以变化是：

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

【讨论】：

虽然回答了页面的编辑模式，但我现在无法以相同的布局显示表单字段名称和提交的值。我不确定当名称和值显示在不同的行中时如何关联它们？
你能发布HTML源代码吗？或者至少显示行/列/输入/标签的 sn-p。
请找到更新的小提琴fiddle.jshell.net/YwMEu/7/show，它同时显示了表单（编辑）模式和表单提交（只读）模式。
我正在阅读一些 aria 属性，如 aria-flowto/aria-flowfrom 、 aria- describeby / aria-labelledby ，想知道是否可以使用这些属性将 1s 行中的标签与其各自的值相关联在第 2 行中，使只读布局具有逻辑性和可访问性。
我还在努力找出为什么你不能使用源顺序，就像这个例子； jsfiddle.net/46QaQ/1/show我不确定是否有其他方法可以将标签与内容相关联。

【解决方案2】：

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

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

【讨论】：