Issue Summary

The form control is not correctly associated with its visible label either explicitly or implicitly.

Element Name: search, Directory and status form fields.
Location of the element: located below the "Users" heading.

Problem that it causes: Intent of the form field is missing.

Steps to Reproduce

1. Step 1

Actual Results

Actual results

Expected Results

Expected Results

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

HOW TO FIX:
Fix this issue by using 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">

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 layout of a form to determine which labels go with which form elements. In order to be certain which label goes with which form element, the label and form element must be programmatically associated. When labels and form elements are programmatically associated, 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.

Screenshot

Screen Recording

screen recording

Workaround

workaround

Bug Ref: 359927