Implementing Accessible Forms & Interactive Elements – 6 Best Practices according to BFSG & WCAG 2.1

With the Accessibility Strengthening Act (BFSG) becoming mandatory from June 28, 2025, pressure is increasing on companies to implement digital accessibility. Especially forms and interactive web elements must be designed so that they are operable by everyone – including those with visual impairments, motor disabilities, or cognitive barriers.

Why accessible web forms & interactive content are crucial:

✅ Legal requirement: Accessibility according to WCAG 2.1 and DIN EN 301 549 is mandatory.

✅ More reach: People with disabilities are a large target group – tap into new customers.

✅ Better usability & conversion rate: Accessible forms lead to more completed contact forms, registrations & purchases.

✅ SEO boost: Google favors user-friendly, accessible content.

1. Label Form Fields Clearly and Understandably

🔹 Place labels directly above input fields, not just as placeholders.

🔹 Provide example texts or explanations for required fields & format requirements.

🔹 Enable autocomplete to facilitate user input.

📌 Example of accessible form fields:

• ❌ Bad: "Phone number" as a placeholder in the field that disappears after entry.

<input placeholder="Phone number" />

• ✅ Good: Label: "Phone number (please use format: +49 123 4567890)"

<label for="tel">Phone number (Format: +49 123 4567890)</label>
<input id="tel" name="tel" type="tel" />

2. Ensure Keyboard Navigation and Screen Reader Compatibility according to WCAG

🔹 All forms must be fully operable with the keyboard (set tab order logically).

🔹 Add ARIA labels for screen readers so users with visual impairments understand the fields.

🔹 Error messages & confirmations must be readable by screen readers.

📌 Example of keyboard navigation & screen reader compatibility:

• ❌ Bad: "Error: Please enter a valid email address." (without ARIA label)

• ✅ Good: "Error: The entered email address is invalid. Please use the format [email protected]." (with ARIA label aria-live="assertive" or aria-describedby for screen readers)

3. Use High Color Contrast and Sufficiently Large Font for Better Readability

🔹 High color contrast for input fields and buttons (min. 4.5:1 according to WCAG 2.1).

🔹 Form texts and placeholders at least 16 px large to be easily readable.

🔹 Clearly recognizable, clickable buttons & checkboxes for easy operation.

📌 Example of color contrast & font size:

• ❌ Bad: Light gray text on white background (#aaa on #fff) → hard to read.

• ✅ Good: Dark blue text on white background (#003366 on #ffffff) → high contrast.

4. Integrate Intuitive Error Detection and Helpful Error Messages

🔹 Real-time validation of inputs with clear, understandable hints (e.g., invalid email address is detected immediately).

🔹 Error messages must be user-centered, clear, and simple, so users know what to do – no cryptic codes.

🔹 Provide correction suggestions & alternative input aids.

🔹 Combine visual & auditory feedback (screen reader feedback).

📌 Example of intuitive error detection & helpful error messages:

• ❌ Bad: "Error!" (no explanation of what is wrong)

• ✅ Good: "Please enter a valid email address in the format [email protected]."

5. Design Captchas and Security Queries Accessibly

🔹 Provide alternatives to image captchas, e.g., simple calculation tasks ("What is 5 + 3?") or checkbox solutions ("I am not a robot").

🔹 Audio captchas or text-based security queries for people with visual impairments.

🔹 Pay attention to keyboard accessibility and compatibility with screen readers.

📌 Example of accessible captchas:

• ❌ Bad: A distorted text image as a security query without an alternative.

• ✅ Good: A question like "What is 5 + 3?" or a simple checkbox.

<label for="captcha">What is 5 + 3?</label>
<input id="captcha" name="captcha" type="text" />

6. Design Interactive Web Elements (Buttons, Dropdowns, Sliders) Accessibly

🔹 Dropdowns, sliders, buttons, and menus must be keyboard operable.

🔹 No purely mouse-based control – arrow keys, Enter, and Escape must also work.

🔹 Large, clickable buttons & links for easy operation.

🔹 Make focus indicators visible and implement focus management.

📌 Example of making interactive web elements accessible:

• ❌ Bad: Menu opens only on hover (mouse movement).

• ✅ Good: Menu can be navigated with Tab + Enter + Arrow keys.

❗ Don't know if the forms and web elements on your website are accessible?

6 Best Practices for Accessible Forms & Elements

1. ✅ Clear Labels (<label>): Every form field needs an explicitly linked <label>.

2. ✅ Error Messages: Display clearly, understandably, and directly at the error location (not just with color).

3. ✅ Mark Required Fields: Visually and for screen readers (e.g., with aria-required="true").

4. ✅ Keyboard Accessibility: All elements must be reachable and operable via keyboard.

5. ✅ Sufficient Time: No unnecessarily short time limits for input.

6. ✅ Grouping & Structure: Organize long forms with fieldsets and legends.