Texto de ajuda e campos obrigatórios anunciados

A field often needs more than a name. Hints and requirements must reach assistive tech, not just sighted eyes. 📝

Put help text in an element, then point the input's aria-describedby at its id. Now the hint reads after the label.

Screen readers speak the label first, then the described-by text. The user hears the name and the hint in a natural order.

aria-describedby can list several ids separated by spaces. Combine a hint and an error message on the same field.

Add the required attribute so the browser enforces it and tells assistive tech the field must be filled.

With required, a screen reader says required when focus lands. You get that for free, no extra ARIA needed.

A red asterisk alone is silent and easy to miss. Pair it with the required attribute or visible required text.

If you use an asterisk, add a legend near the form saying it marks required fields. Never leave the symbol unexplained.

For custom controls without native validation, aria-required equals true conveys the same state to screen readers.

When most fields are required, flag the few that are optional instead. Less clutter, and the pattern stays clear.

Show hints on screen, not just to screen readers. Everyone benefits from seeing the rules before they make a mistake.

How do you attach help text to a field for screen readers?

Wire hints with aria-describedby and mark must-fill fields with required. Now every user hears the name, the help, and the rules. ✅