Øvelse 9: Tilføj ARIA-attributter

Opgavebeskrivelse

Navngiv din formular med aria-label og brug aria-describedby til at forbinde de respektive input-felter med hjælpe-/fejltekst og instruktioner/meddelelser.

id’erne på fejlbeskederne er allerede sat. Du skal derfor især fokusere på at koble de rigtige felter til de rigtige tekster.

<form>
  <div class="form-group">
    <label for="first_name">First name</label>
    <input type="text" id="first_name" name="first_name" required />
    <p class="error-message" id="first_name-error">Please enter a value</p>
  </div>

  <div class="form-group">
    <label for="last_name">Last name</label>
    <input type="text" id="last_name" name="last_name" required />
    <p class="error-message" id="last_name-error">Please enter a value</p>
  </div>

  <div class="form-group">
    <label for="email">Email</label>
    <input type="email" id="email" name="email" required />
    <p class="error-message" id="email-error">Please enter a value</p>
  </div>

  <div class="form-group">
    <label for="password">Password</label>
    <p id="password-instruction">Password must be at least 8 characters</p>
    <input type="password" id="password" name="password" minlength="8" required />
    <p class="error-message" id="password-error">Please enter a value</p>
  </div>

  <div class="form-group">
    <label for="terms">
      <input type="checkbox" id="terms" name="accept_terms" value="yes" required />
      Accept terms
    </label>
    <p class="error-message" id="accept_terms-error">Please tick the box</p>
  </div>
  
  <button>Sign up</button>
</form>

Preview

Hints

<form aria-label="Sign up form">
  <!-- ... -->
  <div>
    <!-- ... -->
    <input name="first_name" aria-describedby="first_name-error" />
    <p class="error-message" id="first_name-error">Please enter a value</p>
  </div>
  <div>
    <!-- ... -->
    <p id="password-instruction">Password must be at least 8 characters</p>
    <input aria-describedby="password-instruction password-error" />
    <p class="error-message" id="password-error">Please enter a value</p>
  </div>
  <!-- ... -->
</form>