How to add an Accessibility tool to your HubSpot website

In today’s digital age, ensuring that everyone can easily access and interact with your online content is more important than ever. Accessibility isn’t just about meeting legal requirements; it’s about creating an inclusive environment where all users can navigate and benefit from your website. This means designing websites and tools that are easy to use and understand, even for those using assistive technologies.

Web accessibility is important for several reasons:

• It ensures equal access to online information and functionalities for people with disabilities, promoting inclusivity and preventing discrimination.
• Compliance with laws like the ADA and WCAG helps organisations avoid legal penalties and demonstrate a commitment to equality.
• Accessible websites improve the overall user experience and enhance SEO.

Currently, HubSpot Content Hub does not provide a built-in widget for accessibility. A solution for this is to use third-party tools like accessiBe. The accessiBe widget provides an accessibility interface for UI adjustments and uses AI to optimise for screen readers and keyboard navigation. 

In this blog, we’ll show you how easy it is to add the accessiBe widget to your HubSpot website.

How to add the accessiBe widget to your HubSpot website

1. Visit the accessiBe website and click the Start Free Trial button on the top right side to create an account and register your website.
   
   Note: You can register multiple websites. You can also upgrade to a paid subscription after completing the registration process.
   
   
2. In your accessiBe account, go to Installation
   
   
   
3. On the Installation page, you'll find the default code to the widget in the Quick installation section. Copy this code by clicking the Copy to Clipboard button.
   
   
   
4. But if you want to customise the look of your widget to match your website's branding, you can adjust the settings in the Customized installation section. When you're done, click the Generate Custom Script button at the bottom to get the code, then copy it.
   
   
   
   
   
5. To make the widget available across all the pages on your website, follow these steps:
   
   
   1. In your HubSpot portal, click the gear icon on the top right side to go to Settings
      
      
   2. On the left menu panel, go to Pages (under Tools > Content)
      
   3. In Pages, click the blue text Default settings for all domains and select the correct domain
      
   4. In the Templates tab, scroll down to the Site Footer HTML section, paste your code in the field, and then click Save
      
      
   5. Open your website in a new tab. You should see a small button icon at the bottom right corner of the browser. Click this to open the accessiBe widget.
      
      
      
      
      Note: The icon may look different on your end if you customised your widget.
      
      
6. To make the widget available only on a specific page, follow these steps:
   
   
   1. In your HubSpot portal, go to Content > Websites Pages or Landing Pages and select the page to open it in the editor
      
   2. In the page editor, go to Settings > Advanced
      
      
   3. Paste your code in the Footer HTML field
      
   4. Close the Settings window and Update or Publish the page
   5. Open the page in a new tab. You should see a button icon at the bottom right corner of the browser. Click this to open the accessiBe widget.
      
      
      
      
      Note: The icon may look different on your end if you customised your widget.

Incorporating web accessibility in your process ensures that your digital content is inclusive and usable for everyone. Tools like accessiBe simplify the enhancement of accessibility on your HubSpot website, making it user-friendly for individuals with disabilities.

If you want to learn more about the ins and outs of HubSpot Content Hub, download our HubSpot Content Hub Overview Guide today!

You can also find this guide, along with our other invaluable resources, on our Resources page.