Code examples

Adding hint/help text

<label for="favorite">
  My favorite NATO letter is:
</label>
<input type="text" id="favorite" aria-describedby="hint">
<div class="hint" id="hint">
  Example: Alpha, Bravo, Charlie
</div>
Example: Alpha, Bravo, Charlie

Adding an error

<label for="favorite-error">
  What is your favorite NATO letter?
  <span>Required</span>
</label>

<input type="text"
       id="favorite-error"
       aria-describedby="alert"
       required>

<div id="alert" 
     class="inert"
     role="alert">
  <!--- Use JS to inject the alert here -->
</div>

<button id="show-alert">
  Toggle error
</button>

Developer notes

Name

  • Inner text describes the hint

Role

  • May have role="alert" if serving as an input error message

Group

  • Use aria-describedby="hint-id" to associate an input with a hint.

Focus

  • Hints should not receive focus