How to add WAI-ARIA dynamically in asp.net Validation controls?

Question

I have ASP.NET Web forms and there are a few asp.net validation controls like RequiredFieldValidator, RegularExpresionValidator etc. used. I have to make the form accessible so that screen readers can read the screen properly. I have to add WAI-ARIA attributes 'role'='alert' and 'aria-atomic':'true' to the respective validation control if there is any validation failure and those attribute shouldn't be there if validation is passed. But I am wondering how to add these attributes and I need some help to add WAI-ARIA into the validation controls. My Web Form HTML is as below:

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

VDWWD VDWWD · Accepted Answer · 2017-10-18T08:50:43

You can add it to a Validator like this

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

The generated html looks like this

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

How to add WAI-ARIA dynamically in asp.net Validation controls?

1 Answers