Accessible account form

Loading problem workspace…

Accessible account form · UIHero

Accessible account form

Create a signup form whose labels, guidance, and errors work without placeholders.

MediumHTML Forms

30 min69.4% acceptance

Description

Mark up an account form for email, password, and terms acceptance. Every control must have an explicit label, password requirements must be programmatically associated with the field, native input semantics should support validation, and the submit action must be unambiguous.

Requirements

Email, password, and terms controls each have a visible label associated through for and id.
The email control uses type email, the password control uses type password, and terms acceptance uses a checkbox.
Email and password controls expose the email and new-password autocomplete tokens.
The password input references the visible 12-character guidance through aria-describedby.
The terms checkbox is required before the form can be submitted.
The form contains a submit button with the accessible name Create account.

Password guidance

Input

Focus the password input with assistive technology

Expected output

The field label and the 12-character requirement are both announced

Constraints

Associate labels with controls using for and id
Use the email and password input types with appropriate autocomplete values
Associate password guidance through aria-describedby and make terms acceptance required

Hints

Hint 1

List each control's visible name, native input purpose, and validation requirement before writing the markup.

Hint 2

Connect every label to a unique control id and supply autocomplete values that describe the expected data.

Hint 3

Reference the existing password guidance from its input, and make consent part of native form validation.

formslabelsvalidation

Loading problem workspace…