ASP.NET 验证器布局以实现可访问性。需要 CSS 帮助！

Question

我想知道是否有人可以帮助我解决最近一直困扰我的问题。它是关于表单上可访问的错误消息，我花了很长时间研究这个问题，但没有找到任何有用的东西或任何相关的示例。

我在这里上传了布局问题的模拟页面。我刚刚使用 html 制作了它，就像 asp.net 渲染它一样。我无法上传图像，因为我必须先在这个论坛上建立积分，所以我刚刚链接到这里，以获取我以相同风格构建的示例 http://hbtester.chickenkiller.com/ValidationLayoutTest.htm 。

在我之前工作的网站上，我们所有的错误消息都像底部的红色错误消息。带有 asp.net 验证器的单独文件被呈现为 .但作为我们进行的可访问性审核的一部分，我必须将所有验证器移至与每个文本框/表单控件关联的标签中（经过多次讨论）。代码看起来像这样

 <tr>
                <td>
                    <asp:Label ID="parentLabel" AssociatedControlID="input" runat="server">
                        <asp:Label ID="childLabel" AssociatedControlID="input" runat="server" Text="Enter number here" />
                        <asp:CustomValidator ID="errorValidator" runat="server" CssClass="error" ControlToValidate="sharesWithDrp"
                            ErrorMessage="Error message"></asp:CustomValidator>
                    </asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="input" runat="server"></asp:TextBox>
                </td>
            </tr>

（我已经使用可访问性验证器检查了它并且它通过了，并且屏幕阅读器在表单模式下转到有问题的字段时读出错误消息）

如您所见，旧样式的底部消息看起来很比上面的更好，我希望它看起来像这样。有谁知道这是否可能？花了很多时间摆弄 CSS，但没有成功。

有谁有在 ASP.NET 中做这些事情的经验吗？看起来这应该是很常见的事情，但我找不到任何东西。如果我完全错误地处理了这个问题，请告诉我！

干杯， 巴斯韦尔

Answer 1

我在该网站上看到的两条错误消息之间的唯一区别是底部的一条跨越表格中的两列。如果您需要将错误消息框嵌套在标签内，我能想到的唯一解决方案就是放弃表格布局。

您可以在这里查看一些替代方法； http://www.websiteoptimization.com/speed/tweak/forms/

当您不受表格单元格的限制，按照您喜欢的方式定位错误消息应该是一个小任务。