Sikau

Project: Your first website · Day 2 · about 35 min

Images, forms and accessibility

Alt text, labelled inputs, validation attributes and a keyboard check.

Everyone can book a table

A beautiful site that a screen-reader user can't use, or a form that silently accepts nonsense, isn't finished. Give images text alternatives, give every input a label, and let the browser validate before anything is sent.

The booking form

<img src="momo.jpg" alt="A plate of steamed momo">

<form>
  <label for="name">Your name</label>
  <input id="name" name="name" required>

  <label for="guests">Guests</label>
  <input id="guests" name="guests" type="number" min="1" max="12" value="2">

  <label for="date">Date</label>
  <input id="date" name="date" type="date" required>

  <button type="submit">Request booking</button>
</form>

The rest of this lesson

  • Designing the booking formexplain
  • The keyboard checkexplain
  • Good alt text?predict
  • Right input for each fieldmatch
  • Make it accessiblewrite code
  • Badge quizquiz
  • What you builtrecap

Continue this lesson free — run real code in your browser

Continue with Google

See all 5 lessons of Project: Your first website