ShowtimeWhat you’re doing (the purpose)
You’re a contestant on Kitchen Command Live. The host is dramatic. The judges are picky. And the only way to win is to use form controls correctly to cook the secret dish.
Win condition: Complete every kitchen station by using the correct form control (picker, radio, checkboxes, slider, and text entry). When you finish, you earn a badge (this sets you up for the Images lesson next).
ProgressStation 1 of 5
VoiceOver practice: Try using the rotor to jump by headings or form controls. If you’re on a braille display, notice how labels, values, and hints show up.
Station 1The Pantry Picker (Select)
Form control: Picker (Select)
A picker (HTML <select>) is used when you choose one option from a list. VoiceOver will announce the control, its current value, and how to change it.
Goal: Pick the correct pantry item that matches the host’s clue.
Host clue:
Pick the item that best matches the clue, then press “Lock in choice.”
Station 2The Fridge Decision (Radio Buttons)
Form control: Radio Buttons
Radio buttons are for choosing exactly one option from a set. They’re usually grouped with <fieldset> and <legend>.
Goal: Choose the one “fridge choice” that follows the judge’s rule.
Judge rule:
Station 3The Spice Rack (Checkboxes)
Form control: Checkboxes
Checkboxes are for selecting multiple items. In real forms, checkboxes often have rules like “choose exactly 2” or “must include one from each group.”
Goal: Select the correct spice combo that satisfies the clue.
Spice challenge:
Station 4The Heat Dial (Slider)
Form control: Slider (Range)
A slider chooses a value along a scale. VoiceOver announces the current value. Swipe up/down to adjust.
Goal: Set the heat to the target range and lock it in.
Heat target: Set heat to a value between and (inclusive).
After adjusting, press “Lock heat.”
Station 5The Plating Pass (Text + Submit)
Form controls: Text input + validation + submit
Many real forms require a specific format (a code, username, or email). Good forms provide clear labels, help text, and error messages.
Goal: Enter the plating passphrase in the required format and submit to earn your badge.
Fix these issues
Plating rule:
Tip: Capital letters and punctuation matter.
Example: “Turbo Tater Surprise.”
This is optional—practice editing. It won’t block you.
You earned a badge!
Completion code:
Your dish name: Unnamed (still iconic)
Next up: Images. Badges are images too—alt text matters!