asp:ValidationSummary and screenreaders

Question

User565553202 posted

Hello all,

I have a few web pages with validation summary control and I need to make the web pages ADA compliant(accessible).

Currently, when there is a validation failure, the screen reader just says alert and does not read out the list of errors displayed by the validationSummary control 

Currently I have the code as below:

<asp:ValidationSummary ID="LoginValidationSummary" runat="server" aria-live="assertive" aria-atomic="true"  CssClass="validationsummary" ValidationGroup="LoginGroup1" ClientIDMode="Static"/>

Inspected Code:
<div id="LoginValidationSummary" class="validationsummary" aria-live="assertive" aria-atomic="true" role="list" style="color:Red;">
 <ul><li>First name is required.</li>
<li>Last name is required.</li></ul>
 </div>

Answer 1

User283571144 posted

Hi mharkare,

As far as I know, if you used Validation groups in your page, you need set the "CausesValidation" attribute to true in the button.

From the MSDN:

Validation groups allow you to assign validation controls on a page to a specific category. Each validation group can be validated independently of other validation groups on the page. Use the ValidationGroup property to specify the name of the validation group for which the Button control causes validation when it posts back to the server.

This property has an effect only when the value of the CausesValidation property is set to true. When you specify a value for the ValidationGroup property, only the validation controls that are part of the specified group are validated when the Button control posts back to the server. If you do not specify a value for this property and the CausesValidation property is set to true, all validation controls on the page that are not assigned to a validation group are validated when the control posts back to the server.

More details, you could refer to below test demo:

            <asp:RadioButtonList ID="RadioButtonList1"
                RepeatLayout="Flow"
                runat="server"  >
                <asp:ListItem>MasterCard</asp:ListItem>
                <asp:ListItem>Visa</asp:ListItem>
            </asp:RadioButtonList>

            <asp:RequiredFieldValidator
                ID="RequiredFieldValidator1"
                ControlToValidate="RadioButtonList1" ValidationGroup="LoginGroup1"
                ErrorMessage="Card Type. "
                Display="Static"  
                InitialValue="" Width="100%" runat="server">
                        
            </asp:RequiredFieldValidator>
            <asp:TextBox ID="TextBox1" runat="server" />
            <asp:RequiredFieldValidator
                ID="RequiredFieldValidator2" ValidationGroup="LoginGroup1"
                ControlToValidate="TextBox1"
                ErrorMessage="Card Number. "
                Display="Static"
                Width="100%" runat="server"   >
                       
            </asp:RequiredFieldValidator>

    
            <asp:ValidationSummary ID="LoginValidationSummary" runat="server" aria-live="assertive" aria-atomic="true"  CssClass="validationsummary" ValidationGroup="LoginGroup1" ClientIDMode="Static"/>

            <asp:Button
                ID="Button1"
                Text="Validate"
                runat="server"  CausesValidation="true" ValidationGroup="LoginGroup1"/>

Resut:

Besides, if you need to validate ALL groups on the page, the easiest way is of course to not use validation groups at all. If you however want to validate only some (but more than one) groups, you can do it on the server (in the click handler of the button) by calling:

Validate("groupOne");
Validate("groupTwo");

Best Regards,

Brando