<input> with error message using aria-describedby and title

← Return to main list

This is a test case designed to determine how an error message, associated with an <input> via the aria-describedby attribute, and with the title attribute present, are announced by various screen readers.

In this case, the aria-describedby attribute should take precedence over the title attribute as the accessible description is defined in the following order:

• If present, use aria-describedby value (as per the "Cat" example below).
• Otherwise, if present, use title value.
• If none of the above are provided, there is no accessible description.

Example

Code

<div>
  <label for="name">Name</label>
  <input
    type="text"
    id="name"
    aria-describedby="error-message
    title="Error: Use a full name"
  >
  <span id="error-message">Error: Make sure to include full name</span>
</div>

Assistive technologies

← Return to main list