如何在 asp.net 验证控件中动态添加 WAI-ARIA？答案

【问题标题】：How to add WAI-ARIA dynamically in asp.net Validation controls?如何在 asp.net 验证控件中动态添加 WAI-ARIA？
【发布时间】：2017-10-18 08:10:28
【问题描述】：

我有 ASP.NET Web 表单，并且使用了一些 asp.net 验证控件，例如 RequiredFieldValidator、RegularExpresionValidator 等。我必须使表单可访问，以便屏幕阅读器可以正确阅读屏幕。如果有任何验证失败，我必须将 WAI-ARIA 属性 'role'='alert' 和 'aria-atomic':'true' 添加到相应的验证控件中如果通过验证，这些属性不应该存在。但我想知道如何添加这些属性，我需要一些帮助才能将 WAI-ARIA 添加到验证控件中。我的 Web 表单 HTML 如下：

<asp:FileUpload ID="Fileupload" runat="server" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
 ErrorMessage="Please select a zip file to upload!!!"
 ControlToValidate="Fileupload" ForeColor="Red" Display="Dynamic" >
</asp:RequiredFieldValidator>

<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" 
  ErrorMessage="Only zip file is allowed!!!" ForeColor="Red" 
  ValidationExpression="^.+(.zip|.ZIP)$" ControlToValidate="Fileupload" 
   Display="Dynamic"> </asp:RegularExpressionValidator>

【问题讨论】：

标签： asp.net webforms wai-aria web-accessibility

【解决方案1】：

你可以像这样将它添加到验证器中

<asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" WAI-ARIA="'role'='alert'"

生成的html是这样的

<span id="RequiredFieldValidator1" wai-aria="'role'='alert'">Please select .. </span>

【讨论】：

我正在使用 NVDA 屏幕阅读器，您使用的方法对我不起作用，因为屏幕阅读器无法读取验证错误消息。
那么你应该弄清楚为什么它不读取它们，因为 HTML 中存在 wai-aria 属性。它不能读跨度吗？还是用 javascript 显示的元素？
当我单击提交按钮时，我可以看到验证消息，但 NVDA 没有读取任何内容。如果有工作样本，那将有很大帮助。谢谢。

【解决方案2】：

我不确定如何针对您的确切用例执行此操作，但这里有一个示例，我需要将 aria-describedby 添加到自定义控件（在我的示例中是单选按钮）。我创建了一个新类并添加了一个设置属性的属性：

public class Bootstrap4RadioButton : RadioButton
{
    public Bootstrap4RadioButton()
    {
        this.InputAttributes.Add("class", "form-check-input");
        this.LabelAttributes.Add("class", "form-check-label");
        this.Attributes.Add("class", "form-check");
        this.AutoPostBack = true;
    }

    public string AriaDescribedBy
    {
        set
        {
            this.InputAttributes["aria-describedby"] = value;
        }
    }
}

然后在创建控件时，我像普通控件属性一样添加AriaDescribedBy="feedback"：

<mc:Bootstrap4RadioButton ID="other" runat="server"
    Text="Other issue/question"
    GroupName="reason"
    OnCheckedChanged="other_CheckedChanged"
    AriaDescribedBy="feedback"></mc:Bootstrap4RadioButton>

这是它在浏览器中的呈现方式：

<input id="MainContent_other" 
    type="radio" 
    name="ctl00$MainContent$reason" 
    value="other" onclick="javascript:setTimeout('__doPostBack(\'ctl00$MainContent$other\',\'\')', 0)" 
    class="form-check-input" 
    aria-describedby="feedback">

【讨论】：