1

我有 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>
4

2 回答 2

0

我不确定如何针对您的确切用例执行此操作，但这是一个我需要添加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">
于 2022-02-15T19:10:10.030 回答
0

您可以像这样将其添加到验证器

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

生成的html看起来像这样

<span id="RequiredFieldValidator1" wai-aria="'role'='alert'">Please select .. </span>
于 2017-10-18T08:50:43.663 回答