How to Trigger the Allyway Toolbar with a Custom Button

How to Trigger the allyWay Toolbar with a Custom Button

In today’s fast-evolving digital landscape, providing equal access to content is no longer a luxury—it’s a necessity. Building inclusive digital experiences isn’t just a moral responsibility; it’s becoming a business imperative. With global web accessibility regulations such as WCAG, ADA, EN 301 549, and the European Accessibility Act (EAA) gaining traction, businesses of all sizes face growing pressure to improve website accessibility.

That’s where solutions like allyWay come in. Designed as an accessibility support and optimization tool, allyWay helps organizations enhance user experiences by offering over 30 accessibility features, 5 specialized accessibility profiles, AI-powered accessibility audits, and support in more than 35 languages. It’s scalable, efficient, and reduces barriers to entry for both users and developers.

One powerful but often overlooked capability of allyWay is the ability to trigger the accessibility toolbar with a custom button. This feature expands the flexibility and user-friendliness of your website’s interface. In this article, we’ll walk you through:

✓ Why you should enable a custom button trigger
✓ How to integrate the feature
✓ Best practices for accessible custom UI design
✓ How allyWay complements your accessibility initiatives
✓ FAQs and tips for optimizing integration

Let’s explore how to take control over your accessibility options with a custom button configured to launch allyWay’s powerful toolbar.

What is the allyWay Toolbar?

The allyWay toolbar is a compact, user-activated widget that provides a suite of accessibility tools. It’s designed to reduce accessibility barriers and empower users with various disabilities to personalize their browsing experience.

Key Features of the Toolbar

• ✓ Text resizing and contrast adjustment
• ✓ Keyboard navigation support
• ✓ Voice commands and screen reader assistance
• ✓ Motion reduction for cognitive accessibility
• ✓ Readable fonts and tooltip enhancements
• ✓ Adjustable cursor settings
• ✓ Five accessibility profiles suited for visual, ADHD, cognitive, and motor impairments

By default, the toolbar activates with a floating icon typically placed in the corner of your website. However, allyWay supports deeper integration so you can trigger this toolbar from any button or interface element—perfect for aligning with your brand or layout needs.

Why Trigger the Toolbar with a Custom Button?

Using a custom button to trigger the accessibility toolbar offers both strategic and usability advantages.

Benefits for Usability

• Increased Visibility: Placing your accessibility trigger in your site’s header or main menu raises awareness and ease of access.
• Better Brand Integration: Customize the button to match your website’s design and tone.
• Reduce Distraction: Some users may find floating widgets distracting or intrusive. A custom button offers cleaner design integration.
• Enhanced Mobility Support: Users relying on keyboard navigation or voice input benefit from an integrated, focusable control.

Benefits for Strategy

• Improved UX in Multi-language Sites: Customize button labels per language set via allyWay’s multilingual support.
• Greater Control Across Templates: Trigger the toolbar from different components or templates across your CMS (e.g., WordPress, Shopify).
• Fine-grained UI Placement: Use A/B testing to determine the best position for user engagement.

Remember, offering an accessible experience is not one-size-fits-all. Giving users intuitive tools in locations they expect increases usability and satisfaction.

Technical Overview: How to Trigger allyWay Toolbar with a Custom Button

Adding a custom button to launch the allyWay accessibility widget is simple and flexible. Whether you're using HTML, WordPress, or web application frameworks, the core implementation is straightforward.

Basic HTML Integration

Here's a basic example of how you can trigger the widget from any custom button:

<button id="custom-accessibility-button">Accessibility Options</button>

<script>
  document.getElementById('custom-accessibility-button').addEventListener('click', function() {
    if (typeof allyway_widget !== 'undefined') {
      allyway_widget.toggle();
    }
  });
</script>

Breakdown of the Code

• Button Element: Create a semantically correct <button> with a descriptive label (for accessibility).
• Event Listener: When clicked, the button checks for allyway_widget—allyWay’s global JS object—and then toggles the toolbox.
• Safe Fallback: You can optionally check if the script has loaded before calling .toggle() to avoid errors.

Enhancing Button Accessibility

To ensure your button is fully accessible:

• Use a clear, descriptive label (e.g., "Open Accessibility Tools")
• Add aria-pressed, aria-label, or aria-controls where needed
• Ensure visible focus styles
• Add tabindex="0" if it's inside non-focusable elements

Integrating with WordPress and CMS Platforms

If you're using WordPress or a website builder, the process is nearly identical. Most modern page builders and WordPress themes support custom HTML/JS blocks or custom theme editing.

WordPress Shortcode Example

You can include the same <button> and JavaScript sample inside a WordPress HTML block or using a child theme’s footer.

Example via functions.php:

function custom_allyway_button() {
  echo '<button id="custom-accessibility-button">Accessibility Options</button>';
  echo '<script>
    document.getElementById("custom-accessibility-button").addEventListener("click", function() {
      if (typeof allyway_widget !== "undefined") {
        allyway_widget.toggle();
      }
    });
  </script>';
}
add_action('wp_footer', 'custom_allyway_button');

Note: Each CMS may implement asset loading differently. Be sure allyWay’s embed script is loaded on your page before triggering the widget.

Best Practices for Custom Accessibility Buttons

When implementing a custom button that triggers accessibility features, ensure the UI adheres to accessibility best practices. Here are some proven guidelines:

Do:

• ✓ Use proper semantic HTML
• ✓ Follow WCAG color contrast ratios for button text
• ✓ Add useful alt text or ARIA labels if using icons
• ✓ Place the button within predictable screen locations
• ✓ Make it reachable by keyboard and screen readers

Don’t:

• × Use vague labels like “Click here”
• × Rely solely on color for instructions
• × Create non-focusable triggers (e.g., pure <div> elements)
• × Hide the button under dynamic or collapsing content

By building the button for robust accessibility, you increase both compliance readiness and user satisfaction.

allyWay as Your Accessibility Optimization Companion

Triggering the toolbar via a custom button is just one customizable feature from a long list of powerful support functions allyWay offers.

Feature Table: allyWay Capabilities

How Using allyWay Reduces Accessibility Barriers

allyWay isn’t just another plugin—it’s a full-featured accessibility layer for websites and digital experiences. Here's why it's the smart choice for businesses, agencies, and developers:

allyWay Helps You:

• ✓ Improve your site's accessibility posture without overhauling designs
• ✓ Empower users to tailor their own experiences based on need
• ✓ Save developer time with built-in logic and UI
• ✓ Make your site more user-friendly for all demographics
• ✓ Support internal DE&I (Diversity, Equity & Inclusion) goals

While allyWay doesn’t guarantee legal compliance, it supports the process of aligning your website with accessibility guidelines like WCAG, ADA, and EAA. It's an optimization ally—not a substitute for human expertise.

When paired with manual audits and ongoing updates, tools like allyWay strengthen your accessibility foundations while letting dev teams focus on strategic work.

Comparison Table: Default Widget v/s Custom Button Trigger

Implementing a custom trigger doesn't replace the default UI—it enhances it. You can still offer both, providing users with multiple ways to activate accessibility tools based on preference and interface behavior.

FAQ: Triggering the allyWay Toolbar

Q1: Can I use an icon instead of a text button?
Absolutely. Just use a button element that includes an <img> or icon font and add appropriate aria-label for screen readers.

Q2: What happens if the toolbar script hasn’t loaded yet?
Use a conditional check like if (typeof allyway_widget !== 'undefined') to ensure your code doesn’t break if the script is not ready.

Q3: Is this feature compatible with screen readers?
Yes. Make sure your button uses semantic HTML and accessible labeling. allyWay is screen-reader friendly and respects ARIA roles.

Q4: Can I trigger different profiles directly (e.g., ADHD mode)?
Currently,