Webflow Integration Guide

Webflow gives designers incredible power, but “no-code” does not mean “no-liability.” To ensure your site functions as a WCAG 2.1 compliance tool, you need to provide an interface for users with different visual and motor needs.

Step-by-Step Instructions

1. Open Project Settings

Go to your Webflow Dashboard and click on the Settings of the project you want to protect.

2. Navigate to Custom Code

Click on the Custom Code tab in the top navigation bar.

3. Add the Script to the Footer

Scroll down to the Footer Code section. This ensures the widget loads without slowing down your site’s initial paint (critical for SEO).

1. Paste your Sienna script into the text area.
2. Click Save Changes.

4. Publish

You must Publish your site to the selected domains for the changes to take effect.

Webflow-Specific Tips

• Screen Reader Support: Webflow allows you to set custom attributes. Use this to ensure your buttons have proper aria-label tags, as a widget alone cannot fix missing labels.
• Combo Classes: Sienna’s high-contrast mode works seamlessly with Webflow’s CSS structure without breaking your layout.

Need a Compliance Review?

If you are building sites for clients in Canada, ensure you are meeting the Accessible Canada Act (ACA) requirements.

Configure your Webflow widget settings