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 code to remove the
aria-haspopupattribute by adding a script within the Page or Site settings in Webflow. - Inform the client about the removal of the
aria-haspopupattribute and discuss any potential accessibility implications.
The aria-haspopup attribute in Webflow's responsive menu component is automatically added by the platform to improve accessibility. However, if your accessibility audit team requests its removal, follow these steps:
1. Use Custom Code
- Add a Custom Code Embed: Place a small JavaScript snippet that removes the
aria-haspopupattribute on page load. - Script Example: Insert a script within a Custom Code block in the Page Settings or Site Settings.
- Use the following:
document.querySelectorAll('[aria-haspopup]').forEach(element => element.removeAttribute('aria-haspopup'));.
2. Page Settings
- Navigate to Page Settings: Go to the project dashboard, select the pages panel, and click on the settings wheel for the desired page.
- Insert Code: Place the custom script in the Footer Code section to ensure it executes after the page loads.
3. Document Changes
- Inform the Client: Let your client know about the change, including why the
aria-haspopupattribute was removed, and discuss any potential accessibility implications.
Summary
To remove the aria-haspopup attribute from a Webflow responsive menu component, you can use custom JavaScript code placed in the Page or Site settings. This solution complies with the audit request, but keep the client informed about any accessibility considerations.
