👀 Views: 0 💬 Answers: 1 📅 Created: 2025-09-27

regex accessibility WCAG javascript

This might be a silly question, but Does anyone know how to I keep running into Currently developing an application that prioritizes accessibility and adheres to WCAG standards... As part of this effort, I'm trying to implement a regex pattern that will validate ARIA attributes in dynamically generated HTML elements. The goal is to ensure that all ARIA attributes follow the correct naming conventions and values, especially when these can be generated by user input or external APIs. I’ve tried a few approaches but hit a wall when it comes to matching the various ARIA attributes. For instance, valid ARIA roles should be prefixed with `aria-`, followed by the role name. Here's a regex pattern I initially created: ```javascript const ariaRegex = /^(aria-[a-zA-Z]+)$/; ``` Unfortunately, this doesn't account for valid attribute values, which can be more complex, especially for `aria-checked`, where valid values are `true`, `false`, or `mixed`. To handle this, I modified my regex: ```javascript const ariaValueRegex = /^(aria-checked="(true|false|mixed)")$/; ``` However, I’m still unsure how to combine these patterns for comprehensive validation. Moreover, how can I ensure that all attributes are consistently formatted without running into issues with case sensitivity or incorrect hyphenations? I want my regex to be robust enough to handle this dynamically, as the attributes will be generated based on user interactions. Additionally, I’ve read about the potential performance implications of using regex with large DOM structures. Does anyone have best practices or strategies to mitigate this while still enforcing strict validation? Any insights or code snippets that could help refine my approach would be greatly appreciated! My development environment is Ubuntu 22.04. Thanks for any help you can provide! Am I missing something obvious? How would you solve this?