Add Accessibility Link / Trigger to Main Menu

Hi,
I am also interested in this way of working.

Hi there, if you’re still looking for a solution:

It looks like this issue is (partly) solved in the latest update. They added a widget for Gutenberg en Elementor, to insert a link to trigger the Ally accessibility Widget (info: https://elementor.com/help/trigger-ally-from-a-webpage/)

Well, I don’t use the Gutenberg Editor or Elementor Editor for my website but I found a workaround to use this feature anyway. The Gutenberg widget inserts this code:

<div class="wp-block-ally-custom-link">
  <a class="ally-widget-trigger" href="#">Open Ally Widget</a>
</div>

In my theme’s code I just added a button with the class ‘ally-widget-trigger‘ . I can position and style it anyway I want 🙂 . Adding a custom link to your menu with url: # and class: ‘ally-widget-trigger‘ also works (info: https://themesharbor.com/adding-a-custom-class-to-a-wordpress-menu-link/ )

This button only functions properly on Gutenberg pages (and probably on Elementor pages, didn’t test this). On all the other pages, it does NOT open the widget. But there seems to be a workaround:

On Gutenberg pages, this script is loaded in the footer:

<script src="https://wordpresswebsite.com/wp-content/plugins/pojo-accessibility/modules/widget/assets/js/frontend.js?ver=3.3.0" id="ea11y-gutenberg-custom-link-js"></script>

Manually adding this script to my theme (using the wp_register_script function in functions.php ) solved the issue for me. The button is working on all pages now.

Another option is to add the JS content of that script directly to the JS code of your theme:

document.addEventListener('DOMContentLoaded', () => {
	const customLinks = document.querySelectorAll('.ally-widget-trigger');

	customLinks.forEach((link) => {
		link.addEventListener('click', () => {
			if (window?.ea11yWidget?.widget?.open) {
				return window.ea11yWidget.widget.isOpen()
					? window.ea11yWidget.widget.close()
					: window.ea11yWidget.widget.open();
			}
		});
	});
});

Both options seems to work fine (allthough I realize it’s a kind of a tricky workaround).

As long as there is no better/official option to trigger the Ally Widget from your menu or theme, this solution might help some of you out?

• This reply was modified 3 weeks, 5 days ago by kimvl.
• This reply was modified 3 weeks, 5 days ago by kimvl.