c# - 用于辅助功能的 ASP.NET 验证器布局。需要 CSS 方面的帮助!

Question

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

我已经在此处上传了布局问题的模拟页面。我刚刚以与 asp.net 呈现它相同的方式使用 html 制作它。我无法上传图片，因为我必须先在这个论坛上积累点数，所以我只是链接到这里以获取我以相同风格构建的示例 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/

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