Getting Started with iubenda’s Accessibility Widget: A Step-by-Step Guide

The European Accessibility Act (EAA) came into full force on June 28, 2025, bringing new requirements for website accessibility. For businesses operating within the EU, or serving EU customers, it is crucial to improve accessibility and align with these new standards. With iubenda’s Accessibility Widget, making your website more accessible has never been easier.

The new iubenda’s Accessibility Widget uses AI-powered adjustments to automatically make your website more accessible for users with various disabilities. The solution supports a range of accessibility features, making it easier for users to navigate and interact with your site.

What is iubenda’s Accessibility Widget?

iubenda’s Accessibility Widget is a fully automated widget designed to enhance your website’s accessibility. It adjusts your website in real-time to accommodate the needs of users with disabilities, including accessibility profiles, text resizing, high-contrast modes, readable fonts, and more. Key features include:

  • 🎧 AI alt text and page structure: Adds alt text to images and detects headings and landmarks as visitors browse, which helps people who use screen readers.
  • 🔳 Contrast and Text Resizing: Allows users to adjust the contrast and font size to suit their needs.
  • ⌨️ Keyboard shortcuts: Visitors press Alt+0 to open or close the panel, and Alt+9 to pause or restore the adjustments.
  • 🌀 Control Over Dynamic Content: Lets users with epilepsy or other conditions stop animations or dynamic content that might be harmful.

With a simple installation process, you can get started right away without having to overhaul your website’s code.

Step 1: Activating the Accessibility Widget

  1. Go to the iubenda Dashboard: From your iubenda Dashboard, find the Accessibility Widget tile under your available products.
  2. Activate the Widget: Click the Activate button to start using the Accessibility Widget.
  3. accessibility solution

Step 2: Customizing the Accessibility Widget

Once you’ve activated the Accessibility Widget, you can make it match your website’s look and feel by using the Accessibility Widget Configurator. This tool is available for both new pricing plans and legacy plans.

  1. Go to your iubenda Dashboard.
  2. Find the Accessibility Widget tile.
  3. Click on the Settings button to open the configurator.

The configurator will look like this:

Inside the configurator, you’ll find several options to make the widget your own:

  • Trigger Button Position: Choose where the widget’s button appears on the screen: Top-left, Bottom-left, Bottom-right, Top-right

👉 The main widget panel will always open from the bottom of the screen.

  • Panel colors: Choose a primary color for the panel to match your site’s design. On Standard, you can also pick a secondary color for selected items. If you don’t, the widget uses the primary color. You’ll see a warning if the contrast is too low, but you can still save.
  • Trigger Button Appearance: Adjust both the icon color and the background color of the trigger button.
  • Default language: The widget shows its panel in the language of each page. When a page’s language is missing or not available, it uses the language you set here.

💡 The widget panel doesn’t link to an accessibility statement. If you have one, link it from your site footer so visitors can find it on every page. Need to write one? Read our accessibility statement guide.

💡 Any changes you make in the configurator will be applied automatically to your Accessibility Widget, even if it’s already embedded on your website.

Step 3: Installing the Accessibility Widget on Your Website

Once you’ve activated and configured the widget, you can embed it on your site.

  1. Embed the Widget: Copy the provided snippet of code for the Accessibility Widget and paste it at the very beginning of the head section of your website (right after the <head> tag) to install the widget.
  2. accessibility solution
  3. Verify the Widget’s Functionality: After embedding, refresh your website to ensure the widget is visible and functional. You should now see a small accessibility icon:
  4. accessibility solution

How it Works for End Users

Once the Accessibility Widget is embedded and active on your website, end users will be able to interact with it to customize their browsing experience. As users change their settings through the widget, real-time adjustments are made to the website’s layout, ensuring that the content is instantly optimized based on the selected preferences. Here’s how the widget behaves and the features it provides:

  1. Widget Appearance: The Accessibility Widget appears as a small icon, when users click on the icon, it opens a menu of accessibility options, providing a seamless way to adjust the website’s layout.
  2. User Preferences: The widget lets users select their accessibility preferences, such as:
    • Text size: Users can adjust the size of the text for better readability.
    • Contrast settings: Adjust the contrast to make content stand out more clearly, especially for those with visual impairments.
    • Readable fonts: Visitors can switch to fonts designed for easier reading, including Atkinson Hyperlegible and OpenDyslexic.
    • Profiles (Standard plan): One-click presets for Low Vision, Seizure & Epileptic, Motor Impaired, Dyslexia, Cognitive & Learning, ADHD, Screen Reader and Color Blind. They change what the visitor sees, not your site’s code.
    • Text size and style: Enlarges or adjusts text in a way that makes it more readable without requiring a page reload.
    • Contrast: Applies changes to background and text colors to enhance visibility for users with color blindness or low vision.
  3. Dynamic Content Control: For users who may be sensitive to animations or flashing content, the widget gives them the option to turn off animations or modify the behavior of dynamic content. This is particularly beneficial for individuals with conditions like epilepsy.
  4. Page structure: A tab that lists the page’s headings, landmarks and links, so visitors can jump straight to the part they need. Visitors can also press Alt+0 to open or close the panel, and Alt+9 to pause or restore the adjustments.
  5. AI alt text and landmarks: The widget adds alt text to images and detects headings and landmarks as visitors browse, within your plan’s monthly limits. This helps people who use screen readers.
  6. Convenient and Accessible: The accessibility settings remain easily accessible at any time, with the widget floating in a fixed position on the site, allowing users to make changes whenever they need to.
  7. accessibility solution

With iubenda’s Accessibility Widget, you can improve your website accessibility and provide a better, more inclusive experience for all users.

Get started today and enhance the accessibility of your website!

Activate now

How can we help?