The aria-haspopup attribute is automatically included in Webflow’s responsive menu component and primarily serves accessibility purposes by indicating that an element controls the activation of a menu or submenu. While this attribute might seem hardcoded in Webflow, there are a few approaches you can consider to modify or remove it.
1. Custom Code Solution
- Access Custom Code Options: In your Webflow project, navigate to Project Settings and access the Custom Code tab.
- Add JavaScript: Consider adding a small JavaScript snippet in the Before </body> tag section that targets and removes the
aria-haspopup attribute.
2. Contact Webflow Support
- Explain the Accessibility Requirement: Reach out to Webflow support or via their forums, explaining the audit requirement and seeking official guidance.
- Feature Requests: If this is a common need, suggest the ability to modify or remove such attributes in future Webflow updates.
3. Manual HTML Export
- Use Caution: After designing in Webflow, export the HTML code. You can manually remove the
aria-haspopup attribute in the exported files. - Understand Limitations: Be aware that this approach means you’ll not be able to take advantage of Webflow’s CMS and hosting features and will need to manage updates manually.
Summary
Removing the aria-haspopup attribute directly within Webflow's responsive menu component isn't straightforward because it's part of the platform's accessibility features. Consider using custom JavaScript or contact Webflow for support. Alternatively, adjustments can be made when exporting the code, but this requires handling outside Webflow's ecosystem.