Details

      Description

      Improvements in the accessibility for forms fields as so:

      1. Remove element label from title field paragraph, at the moment the structure looks like this 

      <div class="form-group" data-field-name="_com_liferay_dynamic_data_mapping_form_web_portlet_DDMFormPortlet_INSTANCE_Fc1m9OTykXVq_ddm$$Paragraph$u3uyt2KG$0$$en_US">
       <label>Title Paragraph </label>
       <div class="form-group liferay-ddm-form-field-paragraph" data-fieldname="_com_liferay_dynamic_data_mapping_form_web_portlet_DDMFormPortlet_INSTANCE_Fc1m9OTykXVq_ddm$$Paragraph$u3uyt2KG$0$$en_US">
       <div class="liferay-ddm-form-field-paragraph-text">
       <p>Body Text</p>
       </div>
       </div>
       </div>

      2. In order for the error notices in the forms, for example those that appear if a mandatory field has not been filled in, to make them accessible, it is necessary to make the assistive tools read them and relate them to the error fields. Using, for example, role = "alert" and aria-atomic = "true" and aria-invalid = "true" aria-describedBy = "xxx" in the fields that gave the error.
      Some links offered by the client: 
      https://www.w3.org/WAI/tutorials/forms/notifications/ 
      https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=411%2C412%2C246#input-assistance 
      https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=411%2C412%2C246#status-messages

      <input aria-describedby="helpMessage" aria-required="true" aria-errormessage="errorMessage" aria-invalid="true">
      <div id="errorMessage"> 
        <div role="alert" class="required">This field is required.</div> 
      </div> 
      <div id="helpMessage"> 
        <div class="info">This is a help message.</div> 
      </div>

      3. Inform people with vision of the required fields only through an icon, is not accessible, because you have to know the meaning of that icon also a legend should be added, at the beginning of the form, with the explanation (* required fields).

      Steps to reproduce:

      1. Use Chrome browser and go to: Control Panel -> Content & Data  -> Form -> add New Form 
      2. Add a paragraph field  
      3. Add a text field with option required 
      4. Go to the main page and add a Form widget and select to display the form added on step 1.
      5. Use ChromeVox Classic Extension and read the fields added

      Expected:

      User should easily read this fields and understand properly the form content 

        Attachments

          Issue Links

            Activity

              People

              Assignee:
              dereck.portela Dereck Portela
              Reporter:
              georgel.pop Georgel Vasile Pop
              Participants of an Issue:
              Recent user:
              Enterprise Release HU
              Engineering Assignee:
              Georgel Vasile Pop
              Votes:
              0 Vote for this issue
              Watchers:
              1 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved:
                Days since last comment:
                11 weeks, 2 days ago

                  Packages

                  Version Package
                  7.2.X
                  7.3.X
                  Master