Accessible error messages and hints

Home | Full results | Github page

Introduction

Inline error messages are messages that are presented to the user if a form field has been incorrectly filled in by the user.

Inline hints are additional pieces of information associated with form fields. They are designed to help users fill in the form field correctly.

Our two goals are:

• Make sure all inline error messages and hints are available to keyboard only users.
• Make that all inline error messages and hints are explicitly associated with form controls - for screen reader users.

Inline error messages

• Inline error method 1: Wrapped label
• Inline error method 2: The aria-describedby attribute
• Inline error method 3: The aria-describedby attribute with role for IE
• Inline error method 4: The aria-errormessage attribute
• Inline error method 5: The aria-labelledby attribute
• Inline error method 6: The aria-labelledby attribute with multiple values

Inline error messages with alerts

• Inline error alert method 1: alert
• Inline error alert method 2: polite
• Inline error alert method 3: assertive

Inline hints

• Inline hints method 1: The placeholder attribute
• Inline hints method 2: Wrapped label
• Inline hints method 3: The aria-describedby attribute
• Inline hints method 4: The aria-describedby attribute with role for IE
• Inline hints method 5: The aria-labelledy attribute
• Inline hints method 6: The aria-labelledy attribute with multiple values

More detailed inline hints

• Tooltip method 1: Additional information before the form control, but inside label
• Tooltip method 2: Additional information before the label and form control

Home | Full results | Github page