`<input>` with error message using hidden `aria-describedby`

← Return to main list

This is a test case designed to determine how an error message, associated with an <input> via a hidden aria-describedby attribute, is announced by various screen readers. The element is hidden using display: none.

Example

Code

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

Assistive technologies

VoiceOver

Chrome: Name. Edit text. [Pause] Error: Make sure to include full name.
Firefox: Name. Edit text. [Pause] Error: Make sure to include full name.
Safari: Name. Edit text. [Pause] Error: Make sure to include full name.

NVDA

Chrome: Name. Edit. Error: Make sure to include full name. Blank.
Firefox: Name. Edit. Has autocomplete. Error: Make sure to include full name. Blank.
Edge: Name. Edit. Error: Make sure to include full name. Blank.

JAWS

Chrome: Name. Edit. Error. Colon. Make sure to include full name. Type in text.
Firefox: Name. Edit. Error. Colon. Make sure to include full name. Type in text.
Edge: Name. Edit. Error. Colon. Make sure to include full name. Type in text.