PHPackages                             webfer/extend\_accessibility\_webform - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Validation &amp; Sanitization](/categories/validation)
4. /
5. webfer/extend\_accessibility\_webform

ActiveDrupal-module[Validation &amp; Sanitization](/categories/validation)

webfer/extend\_accessibility\_webform
=====================================

Improves Webform client-side validation errors by replacing error labels with an accessible span (role=alert) and wiring it to aria-describedby.

0.2.2(3d ago)020—0%GPL-2.0-or-laterJavaScript

Since Mar 18Pushed 3d agoCompare

[ Source](https://github.com/webfer/extend_accessibility_webform)[ Packagist](https://packagist.org/packages/webfer/extend_accessibility_webform)[ Docs](https://github.com/webfer/extend_accessibility_webform)[ RSS](/packages/webfer-extend-accessibility-webform/feed)WikiDiscussions main Synced today

READMEChangelogDependencies (1)Versions (6)Used By (0)

Extend Accessibility Webform (Clientside Validation + Webform) for Drupal
=========================================================================

[](#extend-accessibility-webform-clientside-validation--webform-for-drupal)

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
-----------------

[](#-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 `` elements with:
    - ``
    - the original error text
- Ensures the related input includes the error element ID in `aria-describedby`.

### Key features

[](#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
--------------

[](#-installation)

### ✅ Install with Composer (recommended) 🧰

[](#-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 &gt; Extend** → enable **Extend Accessibility Webform**, or
- 💻 `drush en extend_accessibility_webform -y`

### 🧩 Install without Composer (development only)

[](#-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
--------------

[](#-requirements)

### Drupal

[](#drupal)

- Drupal core 10/11

### Dependencies

[](#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
---------------

[](#-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
-------

[](#-usage)

### What you’ll see

[](#what-youll-see)

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

```
Required
```

This module replaces it with a `` that is announced as an alert:

```

  Required

```

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

---

🚨 Troubleshooting
-----------------

[](#-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
----------------

[](#-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
---------

[](#-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](https://www.linkedin.com/in/webfer/)

###  Health Score

36

—

LowBetter than 83% of packages

Maintenance99

Actively maintained with recent releases

Popularity9

Limited adoption so far

Community2

Small or concentrated contributor base

Maturity27

Early-stage or recently created project

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~0 days

Total

5

Last Release

3d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/f49cee4bc55d0961424e647398c602b6a34fcb2c1430f46dcb268e3b66b26100?d=identicon)[WebFer](/maintainers/WebFer)

---

Tags

validationdrupalaccessibilityARIAa11ywebformdrupal-moduleclientside-validation

### Embed Badge

![Health badge](/badges/webfer-extend-accessibility-webform/health.svg)

```
[![Health](https://phpackages.com/badges/webfer-extend-accessibility-webform/health.svg)](https://phpackages.com/packages/webfer-extend-accessibility-webform)
```

###  Alternatives

[composer/semver

Version comparison library that offers utilities, version constraint parsing and validation.

3.3k479.5M567](/packages/composer-semver)[giggsey/libphonenumber-for-php

A library for parsing, formatting, storing and validating international phone numbers, a PHP Port of Google's libphonenumber.

5.0k145.4M364](/packages/giggsey-libphonenumber-for-php)[respect/validation

The most awesome validation engine ever created for PHP

5.9k36.6M349](/packages/respect-validation)[propaganistas/laravel-phone

Adds phone number functionality to Laravel based on Google's libphonenumber API.

3.0k34.5M83](/packages/propaganistas-laravel-phone)[opis/json-schema

Json Schema Validator for PHP

64135.0M145](/packages/opis-json-schema)[giggsey/libphonenumber-for-php-lite

A lite version of giggsey/libphonenumber-for-php, which is a PHP Port of Google's libphonenumber

7911.8M31](/packages/giggsey-libphonenumber-for-php-lite)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)
