Can the aria-haspopup attribute be removed in the responsive menu component in Webflow? My client's hired Accessibility Audit company is requesting its removal, but it seems hardcoded. Is there a way to remove these attributes?

TL;DR
  • Use custom JavaScript in Webflow's Custom Code settings to remove the aria-haspopup attribute.
  • Contact Webflow support for guidance or request a feature update.
  • Manually remove the attribute after exporting HTML, noting the implications for CMS and hosting.

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.

Rate this answer

Other Webflow Questions