Quick Tips for Accessible Forms

Here are some things to keep in mind, while designing form elements:

• Every field or group of fields should include a visual label (not only in placeholder)

• Labels should be descriptive. label should tell how it must be filled, like ”Card Number XXXX-XXXX-XXXX-XXXX” and mark the input if it's required.
• Labels for assistive technologies like screen readers. Required fields should not only marked as “required” in a visible label but also programmatically, by adding a “required” attribute, so a screen reader can announce the field as “required”

"aria-required" and HTML's "required" are actually different, they both help identify mandatory content with a screen reader, but HTML's 'required' will check when submitted whether the required field is filled or not, "aria-required" on other hand, doesn't check the field.

• Use live areas to notify changes in content. If live areas aren't used, a notification should be placed next to a control that causes a change, if a dialog is used it should be in focus and keyboard-accessible.
• If there is an error in an input — it should be easy to find out which input must be corrected.
• Errors should be meaningful of what is wrong. If the format is wrong, say that a phone number should start with “+” or include an extension number (but better to format it by code if other checks on the phone number are correct)

Additional sources

• About the "aria-required" attribute on MDN