Serious About Accessibility
Accessibility-friendly websites ensure everyone, regardless of ability, can easily access and use your site, fostering inclusivity and expanding your audience.
Unfortunately, many websites, including those built on Webflow, fall short. While there are other accessibility widgets available, they often miss the mark when it comes to being fully native to Webflow.
FlowBuddy’s Accessibility Widget has been tried and tested over the past two years to assist your site in accessibility standards.
Discover why it stands out.
Explore the range of how our accessibility widget can help your Webflow site.
FlowBuddy Accessibility Widget moves all of your page content inside one wrapper.
Applies a visible outline and box-shadow to focused elements.
Toggles the visibility of different accordion panels (Keyboard, Reading, Visual, etc.) based on specific keyboard shortcuts.
Detects domain and browser language, and adds the language meta tag.
This function dynamically sets or updates the <meta title> tag using the URL's last segment as the title if no meta title exists.
Ensures the page has a <main> element by converting the first <section> into <main> if needed and assigns it an id="main" if missing.
Adds a "Skip to Content" link for keyboard users, improving accessibility by allowing quick navigation to the main content.
Converts text-only <div> elements and Webflow-rich text <div> into semantic <p> tags, improving document structure and accessibility.
This script ensures a consistent default font size by setting the <body> text to 100%, improving readability and accessibility.
Limits the maximum width of paragraphs and text-containing divs outside .panel to 80ch, preventing overly wide text blocks and improving readability.
FeIdentifies and fixes duplicate IDs by appending a number to them, ensuring unique IDs for better accessibility and functionality.tch, organise and display your sitemap within your website.
This script updates heading tags within a specified wrapper, ensuring headings are numbered from h1 to h6, and preserves their existing styles and content.
Converts empty <a> tags into <div> elements, improving semantic structure and preventing invalid HTML.
Updates buttons with the text "Send" to "Send Message," improving clarity for users, including those using screen readers.
Ensures interactive elements (like buttons and links) meet the minimum size requirement of 44x44 pixels for better accessibility.
Creates a modal to confirm when users click links that open in a new tab or self, improving user control and accessibility.
Adds role and aria-label attributes to logo images and navigation links, improving accessibility for screen readers.
Adds role="img", alt, and aria-label attributes to <div> elements with background images, improving accessibility for screen readers.
Ensures all <img> tags have an alt attribute, using the filename if no alt text is provided, improving accessibility for screen readers.
Adds aria-label and alt text to links and buttons opening in a new window, improving accessibility for screen readers.
Adds labels to inputs that have a placeholder but no associated <label> element, improving accessibility for screen readers.
Adds autocomplete="on" to fields like email, first name, last name, and full name, helping users complete forms faster.
Adds aria-required="true" to all required input fields, making them accessible to assistive technologies.
Removes autofocus="true" attribute and the standard autofocus attribute to field elements.
Sets the placeholder attribute based on the input’s name if no placeholder exists, providing a visual hint for users.
Adds a play/pause overlay button to Lottie animations, allowing users to control the playback of animations.
Prevents Lottie animations from autoplaying by setting data-autoplay="0" and stopping active animations if Lottie.js is used.
Replaces animated GIFs with a static first frame (JPG) and provides a play/pause button overlay to control the animation playback.
Provides play/pause controls for WebP animations by showing a static preview and toggling the animation on click.
Disables autoplay on Webflow background videos and adds a play/pause button overlay to control the playback. It also ensures videos do not autoplay when the page loads.
Disables autoplay for Rive animations, adds a play button overlay, and manages play/pause functionality manually.
This script disables autoplay on slideshows and pauses them using Webflow's internal API, with a fallback for delayed initialization.
This script scans all <video> elements, disabling autoplay and adding controls if not already present. It ensures videos can be manually controlled and do not autoplay.
Ensuring the viewport zoom isn't disabled.
Translate your website to many languages.
Increase the cursor size.
Focus on a part of the website.
Increase the font size on the page.
Change the alignment on the page.
Increase the text spacing on the page.
Increase the line height on the page.
Dyslexia Font
Highlight text on the page.
Change the font text on the page to a Dyslexia font.
Change the font text on the page to a friendly font.
Underline all the links on the page.
Highlight all the available links on the page.
Underline all the available <h> titles on the page.
Highlight all the available <h> titles on the page.
Change the colour of all <h> titles on the page.
Display the avialable tooltips on certain elements.
Show the links available on the page.
Toggles the background color of page elements between a set of predefined colors or resets it to the original color.
Toggles the visibility of a virtual keyboard on the screen, allowing users to interact with text inputs.
Toggles the visibility of images, background images, videos, sliders, animations, and overlay play buttons within the page.
Adds a magnification feature with a magnifying glass effect that follows the cursor to zoom in on content.
Zooms in on content in the wrapper while excluding the panel
Applies grayscale to reduce colour intensity.
Reduces colour intensity to improve readability
Display the Order Number within the confirmation page.
Display the Order Number within the confirmation page.
Boosts brightness and contrast for better readability.
Applies a full-page colour inversion for higher contrast.
Darkens backgrounds, lightens text, and adjusts links. Restores styles when toggled off.
Let's answer some FAQ's
Interested in FlowBuddy?
FlowBuddy is provided 'as is' without warranties, is still under development, and a community project.
We are not liable for any damages or legal claims related to accessibility compliance.