WCAG 2.1 – Criterion 3.3.2 – Labels and Instructions (Level A)

Hints… Do they have any connection to WCAG?

Yes, indeed. Labels and hints (or instructions) are described by the WCAG 3.3.2 criterion at level A, which is the most basic level.

WCAG 3.3.2 Labels and Instructions

The rule is that every form field on our website must have a properly assigned label or an implemented hint.

Why?

Thanks to labels and hints, our users can input their data much more quickly and easily, and we, as the creators of the website, can collect this data without any major issues. Sounds like a win-win, right?

How to properly implement a label or instruction?

Assign a visible label to each form field using the `<label>` tag, which you should correctly link to the field (remember to match the `for` and `id` attribute values) – other ways to implement labels can be found on the W3C website.
If hints are visible in the form, link them properly to the appropriate field using the `aria-describedby` attribute – example.
In complex forms, remember to group them properly and provide appropriate descriptions using the `<fieldset>` and `<legend>` elements – for example: “Residential Address,” “Delivery Address,” and “Billing Address.” This technique is explained by W3C.
Indicate whether a form field is required or optional (not just for assistive technology) – description of how to do this.