Role and semantics
Section titled “Role and semantics”Label is a native <label> element. It names the control through htmlFor or by containing it. The * carries aria-hidden; the necessity is read through the hidden “zorunlu” or “required” text.
Keyboard
Section titled “Keyboard”| Key | Behaviour |
|---|---|
| Tab | Label takes no focus; focus goes to the control. |
Label takes no focus. Clicking the label focuses the control.
Screen reader output
Section titled “Screen reader output”| Example | Output |
|---|---|
<Label htmlFor="name" required>Field label</Label> |
The control is read with the name “Field label required” |
necessityIndicator="optional" |
The control is read with the name “Field label (optional)” |
Contrast
Section titled “Contrast”The label text and the * have at least 4.5:1 contrast on the background. Disabled text is exempt from the WCAG contrast requirement.
WCAG 2.2
Section titled “WCAG 2.2”| Criterion | How Label meets it | What the product team does |
|---|---|---|
| 1.3.1 Info and relationships | <label for> or a wrapping label. |
Match htmlFor with the id. |
| 2.5.3 Label in name | The visible text starts the name. | Do not give the control a separate aria-label. |
| 3.3.2 Labels or instructions | Visible label and necessity marker. | Use one marking convention in a form. |