Code Studio: Fix an Inaccessible Form
This sign-up form looks fine but breaks most of the rules in Accessible Forms. A screen reader user would hear unlabelled fields and radio buttons with no question. Fix it without changing how much information it collects.
- Replace each
<div>used as a label with a real<label for="…">, and give each input a matchingid. - The phone field has only a placeholder. Give it a visible label; placeholders disappear, labels do not.
- Wrap the contact-method radio buttons in a
<fieldset>with a<legend>that asks the question. - The email field is required, but only the red asterisk says so. Add the
requiredattribute and put "(required)" in its label text, so it doesn't rely on color. - Replace the clickable
<div>"button" with a real<button type="submit">.
Check your work with only the keyboard: click into the preview, then press Tab. You should be able to reach every field and the button, in order, and clicking any label should move the cursor into its field.
This sign-up form looks fine but breaks most of the rules in Accessible Forms. A screen reader user would hear unlabelled fields and radio buttons with no question. Fix it without changing how much information it collects.
- Replace each
<div>used as a label with a real<label for="…">, and give each input a matchingid. - The phone field has only a placeholder. Give it a visible label; placeholders disappear, labels do not.
- Wrap the contact-method radio buttons in a
<fieldset>with a<legend>that asks the question. - The email field is required, but only the red asterisk says so. Add the
requiredattribute and put "(required)" in its label text, so it doesn't rely on color. - Replace the clickable
<div>"button" with a real<button type="submit">.
Check your work with only the keyboard: click into the preview, then press Tab. You should be able to reach every field and the button, in order, and clicking any label should move the cursor into its field.