asp:ValidationSummary and screenreadersRSS

• • Reply
  mharkare

  None

  0 Points

  1 Post

  asp:ValidationSummary and screenreaders

  Mar 30, 2018 06:34 PM|mharkare|LINK

  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>

• • Reply
  Brando ZWZ

  Star

  8931 Points

  2722 Posts

  Re: asp:ValidationSummary and screenreaders

  Apr 02, 2018 09:14 AM|Brando ZWZ|LINK

  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