Uploaded image for project: 'Confluence Data Center'
  1. Confluence Data Center
  2. CONFSERVER-77280

Edit inline comment: Form field is not labeled

    XMLWordPrintable

Details

    Description

      Issue Summary

      The form field does not have an explicit or implicit <label> relationship, nor a title, aria-labelledby, or aria-label attribute.

      Element:
      1) Edit text area field

      Location:
      Content appears after activating the "edit" link within the "add inline comment"

      Actual Results

      Issue 731949: https://axeauditor.dequecloud.com/api/v1/file/94ad9244-527e-11ec-9b55-5b6abb5d2fb1 

      Expected Results

      RULE : 
      Labels MUST be programmatically associated with their corresponding elements.

      HOW TO FIX: 
      Fix this issue by using ONE of the following techniques:
      1. Explicit label: Under most circumstances, the best technique is to use the <label> element with the for attribute. The value of the for attribute is the id attribute value of the <input> element.

      <label for="fname">First Name:</label> 
      <input type="text" name="fn" id="fname">

      2. Use an aria-label attribute or title attribute on the <input> to provide a label when there is no visible label.

      <input type="text" aria-label="search">
       <input type="submit" value="Search">

      3. Use an aria-labelledby attribute on the <input> to reference a visible label. The value of the aria-labelledby attribute is the id attribute value of the visible text label.

      <span id="nickname">Nickname:</span>
      <input type="text" aria-labelledby="nickname">

      4. Implicit label (explicit label method is strongly preferred): Wrap the form element within the <label> element.

      <label>First Name: <input type="text" name="fn"></label>

      REFERENCE: 
      Deque University: https://dequeuniversity.com/class/forms2/labels/semantic-labels
      W3C-WAI tutorial: https://www.w3.org/WAI/tutorials/forms/

      BACKGROUND: 
      People who are blind cannot use the visual presentation of a form to determine the label for a form element. In order for screen reader users to be certain of a form field's label, every form input and control needs a label, also known as an "accessible name." When form elements have a programmatically determinable accessible name, a screen reader user can put focus on a form element and the screen reader will automatically read the label and element type together. In addition, some coding methods will create a larger clickable area for the form element which benefits people with motor disabilities.

      Workaround

      Currently there is no known workaround for this behavior. A workaround will be added here when available

      Attachments

        Issue Links

          Activity

            People

              2541dfd4068c Yurii Shevchuk (Inactive)
              4b5b126a48d0 ssuryavanshi
              Votes:
              0 Vote for this issue
              Watchers:
              7 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved: