Skip to content

Input with aria-required, aria-invalid, and aria-describedby error message

What it sounds like

Username, edit text, required, invalid entry. Please enter a value.

The aria-describedby message is read after a short pause. It be can before or after the input in the DOM.

What it looks like

Please enter a value.

<label for="sle-5">Username</label>
<input id="sle-5" aria-invalid="true" aria-required="true" aria-describedby="sle-5-2" class="has-error" />
<p id="sle-5-2" class="error-message">Please enter a value.</p>