iDevMeet

Web Development · module 2 of 13

Forms & Accessibility

Create accessible forms with labels, useful input types, validation attributes, landmarks, and meaningful alternative text.

Course map
UNLINKED — a caption floating near a box<span>Email</span>screen reader says only: "edit text, blank"LINKED — for matches id<label for="email">Email</label>reader says: "Email, edit text"…and clicking the word focuses the fieldThe link is what turns a caption into a name for the control. Without it the field has no accessiblename, and the label stops being a bigger tap target — which matters most on a phone.Wrapping the input inside the label works too, and needs no matching id.
Forms & Accessibility — the idea in one picture

What this module covers

5 steps · Web Development

  1. Step 1. Lesson: Forms & Accessibility

    Create accessible forms with labels, useful input types, validation attributes, landmarks, and meaningful alternative text. Learning objectives - Recognize when forms & accessibility is the right tool. - Explain the role of label, input, required. - Build a small working example before combining it with a larger interface. - Identify one accessibility, maintainability, or error-handling improvement. Read the example, predict what it will do, then complete the small change described in the check question.

    Create accessible forms with labels, useful input types, validation attributes, landmarks, and meaningful alternative text. In HTML + CSS, make the state/interaction visible in the UI so completion is easy to verify.

    Check yourself: [HTML + CSS] Use the example to demonstrate forms & accessibility.

  2. Step 2. Quiz: Forms & Accessibility

    Check your understanding of Forms & Accessibility.

    A label for value should match the input id so assistive technology can identify the field. In HTML + CSS, make the state/interaction visible in the UI so completion is easy to verify.

    Check yourself: [HTML + CSS] Complete the knowledge check.

  3. Step 3. Exercise: Forms & Accessibility

    Build a signup form with name, email, password, labels, autocomplete hints, and required validation.

    This exercise turns the Forms & Accessibility lesson into a working code change. In HTML + CSS, make the state/interaction visible in the UI so completion is easy to verify.

    Check yourself: [HTML + CSS] Does the solution use label and input and required?

  4. Step 4. Review lab: Explain & improve Forms & Accessibility

    Rebuild the exercise without copying the solution. Then improve it in two ways: make the code easier to understand and add one useful edge case, responsive behavior, accessibility improvement, or error state. Finally, write a short explanation of how label, input, required work together.

    Rebuilding from memory and improving an edge case turns recognition into durable skill. In HTML + CSS, make the state/interaction visible in the UI so completion is easy to verify.

    Check yourself: [HTML + CSS] Does the improved version still use label, input, required clearly?

  5. Step 5. Mini project: Forms & Accessibility

    Create an accessible event registration form with fieldsets, radio buttons, a select menu, helper text, and a submit button.

    The mini project combines the module lesson, quiz, and exercise into one portfolio-ready result. In HTML + CSS, make the state/interaction visible in the UI so completion is easy to verify.

    Check yourself: [HTML + CSS] Does the project apply the module's forms & accessibility skills?

Loading code lab...