ASP.NET 驗證器布局以實現可訪問性。 在 CSS 方面需要幫助！

Question

我想知道是否有人可以幫助我解決我最近一直在撓頭的問題。 它是關於 forms 上的可訪問錯誤消息的，我花了很長時間研究這個問題，但沒有找到任何有用的信息或任何相關示例。

我在這里上傳了布局問題的模擬頁面。 我剛剛使用 html 制作了它，就像 asp.net 渲染它一樣。 我無法上傳圖片，因為我必須先在這個論壇上建立積分，所以我只是鏈接到這里以獲取我以相同樣式構建的示例http://hbtester.chickenkiller.com/ValidationLayoutTest.htm .

在我之前工作的網站上，我們所有的錯誤消息都像底部的紅色錯誤消息。 一個帶有 asp.net 驗證器的單獨的被呈現給一個。 但作為我們進行的可訪問性審核的一部分，我不得不將所有驗證器移動到與每個文本框/表單控件相關聯的 label（經過多次討論）。 代碼看起來像這樣

 <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>

（我用可訪問性驗證器對其進行了檢查，它通過了，屏幕閱讀器在 forms 模式進入違規字段時讀出錯誤消息）

如您所見，舊樣式的底部消息看起來比頂部的要好得多，我希望它看起來像這樣。 有誰知道這是否可能？ 花了很多時間搞亂 CSS 沒有運氣。

有沒有人在 ASP.NET 做這件事的經驗？ 似乎這應該是很常見的事情，但我找不到任何東西。 如果我完全走錯了路，請告訴我！

干杯，巴斯韋爾

Answer 1

我在該站點上看到的兩條錯誤消息之間的唯一區別是底部一條跨越了表格中的兩列。 如果您需要將錯誤消息框嵌套在 label 中，我能想到的唯一解決方案就是遠離您的表格布局。

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

當您不受表格單元的限制時，position 錯誤消息應該是您喜歡的一項小任務。