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 & Sanitization](/categories/validation) 4. / 5. webfer/extend\_accessibility\_webform ActiveDrupal-module[Validation & 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(1mo ago)020β€”0%GPL-2.0-or-laterJavaScript Since Mar 18Pushed 1mo 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 1mo ago 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 > 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 33 β€” LowBetter than 75% of packages Maintenance89 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 55d 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.3k489.6M672](/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.0k148.7M416](/packages/giggsey-libphonenumber-for-php)[respect/validation The most awesome validation engine ever created for PHP 5.9k37.4M383](/packages/respect-validation)[propaganistas/laravel-phone Adds phone number functionality to Laravel based on Google's libphonenumber API. 3.0k35.7M107](/packages/propaganistas-laravel-phone)[opis/json-schema Json Schema Validator for PHP 64236.9M186](/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 8412.9M47](/packages/giggsey-libphonenumber-for-php-lite) PHPackages Β© 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)