Labels for Input Elements

See the examples below for examples of labels applied to HTML input elements

Problem: Input elements need properly associated labels.

Solution: Input elements may use a label, or aria tags.

Input and Label Examples

Below we explore various coding techniques for how to associate a label with an input HTML element. There are several variations of how to implement input text elements, including the use of value and placeholder tags. Right click on any element and select 'Inpect' to view the code.

Input with Label associated, required field

This is the ideal coding technique. The label is associated to the input by the matching for="id" in the label to the id="id" in the input tag. This field is required, aria-required="true". and the asterisk is hidden to screen readers.

Label with id associated:

Input with aria-label only

This technique can be useful when the text label is outside the form, or to meet other possible layout or framework requirements. The text associated with the aria-label="" will be read by the screen reader.

Input with Label associated, and aria-label

This techique demonstates that JAWS will reads the label only once. JAWS detects the duplication and does not announce the second label.

Label and aria-label

Input with aria-label, and value="aria-label"

This techique is often used to give the user a hint about what is expected in the input. JAWS will read the aria-label and the value text. See the notes below for a discussion on the diference between a placeholder and a value attribute.

Input with Label associated, placeholder="aria-label with placeholder"

This technique demonstrates using an aria label and a placeholder, JAWS will read both. See the notes below for a discussion on the diference between a placeholder and a value attribute.

Input with no label or aria-label

This techniques demonstrates how JAWS will read an unlabeled edit.

Notes

Value or Placeholder: What is the difference?
The value attribute defines the default value of input. If user does not give any input then this default value would be considered as input while the placeholder is just the dummy text which shows or depicts that what type of text is to be input in the field.
JAWS display of edit boxes (Ins-Ctrl-e)
JAWS will only read Edit box, but when displaying textboxes on the page (Ins-Ctrl-e), JAWS displays the nearest text as the label. This may change in different frameworks or browsers.