Ensuring Accessibility - HTML5 Foundations - page 174

</div>
<div class="field">
<label for="bookingTime">Booking Time*:</label>
<input type="datetime-local" name="bookingTime"
id="bookingTime" tabindex="7"
placeholder="e.g. 2012-09-06 12:14" required>
</div>
<div class="field">
<label for="guests">Number of Guests*:</label>
<input type="number" name="guests" id="guests" value="2"
required min="1" max="12" tabindex="6" >
</div>
<div class="field">
<label for="marketing">Please tick this box if you
would like to receive special offers from Joe's
Pizza Co.</label>
<input type="checkbox" name="marketing" id="marketing"
value="1" tabindex="5" >
</div>
<div class="field">
<label for="message">Special Requests:</label>
<textarea name="message" id="message" cols="50" rows="10"
placeholder="Type your message..."
maxlength="250" tabindex="4" ></textarea>
</div>
</fieldset>
<div class="field">
<button type="submit" tabindex="9" >Request Booking</button>
</div>
</form>
3. Save the bookings.html file.
4. Open the bookings.html file in your web browser and use the Tab key to cycle through the form fields.
You should encounter the following order: Name, Phone, Email, Message, Marketing, Guests, Booking
Time, Restaurant, and Submit.
5. Now go back to your text editor and update the tabindex attributes so that the values are in a sequential
order from 1 to 9.
6. Save the bookings.html file.
Check out this video on Treehouse for a quick recap on making your web forms accessible: ht-
tp://teamtreehouse.com/library/websites/accessibility/web-apps/forms .
Making Tables Accessible