Form Registration

Password must be minimum 8 letters and mix of uppercase and lowercase letters, numbers, and special characters.

Dietary Preference
What topics are you interested in? (Choose at least one)

Guide to Building an Accessible Website Form with Error Validation (WCAG 2.2)

This guide breaks down the features according to the four core principles of WCAG: Perceivable, Operable, Understandable, and Robust (POUR).

1. Design and Visuals (Perceivable)

Before writing any code, the visual design must be accessible.

Color Contrast (WCAG 1.4.3, 1.4.11)

  • Text vs background contrast ratio ≥ 4.5:1 (normal text) or ≥ 3:1 (large text)
  • Focus indicators for form fields and contols(e.g., outline, underline, background change) must meet 3:1 contrast ratio
  • Don’t rely on color alone as red indicates an error — provide the error as text with red color

Touch Targets (WCAG 2.5.5)

  • Interactive elements (buttons, form fields, form controls) must have ≥ 24px by 24px touch area for mobile version

Labels and Grouping (WCAG 3.3.2, 1.3.1)

  • Labels or Instructions: Ensures all user input fields have clear, always visible labels.
  • Info and Relationships: The <fieldset> programmatically groups the related controls for radio button and checkbox, this will help screen reader to read the question

2. Keyboard Usability (Operable)

All forms controls must be operable with a keyboard alone. Users must be able to perform every action a mouse user can.

Forms navigation (2.4.3, 2.4.7)

  • Focus Order: Provides a logical navigate to all form controls and errors in correct order.
  • Focus Visible: The keyboard focus indicator is always visible.

3. Screen Reader & Assistive Technology (Understandable & Robust)

Correct HTML and ARIA attributes are essential for screen reader users to understand the menu's structure and state.

ARIA Roles, Properties, and States

  • aria-required="true": Ensure required fields are marked with the required attribute for assistive technologies. A visual asterisk * is also included
  • role="alert": This ARIA role is a "live region." It tells screen readers to immediately interrupt whatever they are doing and announce the content inside this
    as soon as it appears on the page. This ensures a screen reader user is instantly aware that errors occurred upon submission
  • aria-invalid="true": To indicate that the value entered into an input field is not in a format or a value the application will accept.
  • aria-describedby: creates a programmatic link between the input and its error message. When a screen reader user focuses on the invalid field, it will announce the field's label and then immediately announce the full error message linked via aria-describedby
  • aria-hidden="true": To hide content for screen reader and Assistive Technology

Clear and Specific Error Messages (3.3.1, 3.3.3)

  • Error Identification: The error is clearly identified in text
  • Error Suggestion: The message provides a suggestion for correction