README

A Drupal custom module that improves the accessibility of Webform client-side validation errors by converting jQuery Validate error labels into a live region span, and ensuring the related input is described by the error message.

🚀 Why? Client-side validation often injects error labels that are not reliably announced by assistive technologies. This module makes the error message behave like an assertive alert and wires it into aria-describedby.

📦 Module Overview

Name: Extend Accessibility Webform
Package: Custom
Compatibility: Drupal 10, 11

This module:

Automatically attaches a small JavaScript library to all Webform submission forms.
Overrides jQuery Validate showErrors() to post-process error elements.
Replaces error <label class="error" ...> elements with:
- <span role="alert" aria-live="assertive" ...>
- the original error text
Ensures the related input includes the error element ID in aria-describedby.

Key features

Automatic attachment (no per-form configuration)
Accessibility-first output (role="alert", aria-live="assertive")
Safe against repeated replacements via a data-error-replaced flag

🛠 Installation

✅ Install with Composer (recommended) 🧰

From your Drupal project root:

composer require webfer/extend_accessibility_webform

Composer will install the module into your Drupal codebase (commonly under web/modules/contrib/ in standard Drupal Composer templates). 📦

Then enable the module:

📍 Admin > Extend → enable Extend Accessibility Webform, or
💻 drush en extend_accessibility_webform -y

🧩 Install without Composer (development only)

If you’re developing locally, you can still place the module folder under:

web/modules/custom/extend_accessibility_webform

✅ Requirements

Drupal

Drupal core 10/11

Dependencies

webform (Webform submission forms)
clientside_validation (provides the jQuery Validate integration)

Notes:

This module relies on the presence of jQuery Validate ($.validator). The attached library depends on clientside_validation/jquery.validate.
The module does not add any admin UI, permissions, or configuration schema.

⚙ Configuration

No configuration is required.

The module attaches its library to Webform submission forms by detecting:

form IDs that start with webform_submission_, or
the webform-submission-form CSS class on the rendered form.

🧩 Usage

What you’ll see

When a Webform submission form fails client-side validation, jQuery Validate normally renders an error label like:

<label id="edit-email-error" class="error" for="edit-email">Required</label>

This module replaces it with a <span> that is announced as an alert:

<span id="edit-email-error" class="error" role="alert" aria-live="assertive" data-error-replaced="true">
  Required
</span>

It also updates the related input so that it references the error element via aria-describedby.

🚨 Troubleshooting

Nothing changes on the form
- Confirm webform and clientside_validation are enabled.
- Confirm client-side validation is enabled for the Webform and that errors are being rendered by jQuery Validate (look for $.validator in the browser console).
- Rebuild caches (drush cr) after enabling the module.
Errors render, but no replacement happens
- Another script may be overriding $.validator.setDefaults() after this module runs.
- Ensure you don’t have another custom module doing a similar override (for example, the earlier extend_clientside_validation_webform clone).

📂 File Structure

extend_accessibility_webform/
├── README.md
├── extend_accessibility_webform.info.yml
├── extend_accessibility_webform.libraries.yml
├── extend_accessibility_webform.module
└── js/
    └── custom-error-wrap.js

📜 License

This project is licensed under the GNU General Public License, version 2 or (at your option) any later version.

SPDX identifier: GPL-2.0-or-later
Created by: WebFer

_Created and maintained by WebFer

webfer / extend_accessibility_webform

Maintainers

Package info

Statistics

Security