Made with
by

Accessible Components
for Webflow. Ready to use.

Use components with your keyboard:
Tab
to navigate
forward
Tab + Shift
to navigate
backward
Space
to select checkboxes
and radio buttons
Enter
to activate links
and buttons
Components:

Accordion

Accordion component with accessibility attributes and custom code.

Accordion 1 - IX2

Accessibility Attributes
Webflow Interactions

This component uses custom JavaScript to open and close. Custom attributes and additional custom JavaScript is added to this component to make it accessible.

Inside this component, there is an embed block that contains all of the custom code needed for this accordion to function.

We have full documentation for this accordion component here. You can use it to edit this component —or to build your own accessible accordion from scratch.

Full documentation in Finsweet's Attributes docs.

Accordion 2 - JS

Accessibility Attributes
Vanilla Javascript

This component uses custom JavaScript to open and close. Custom attributes and additional custom JavaScript is added to this component to make it accessible.

Inside this component, there is an embed block that contains all of the custom code needed for this accordion to function.

We have full documentation for this accordion component here. You can use it to edit this component —or to build your own accessible accordion from scratch.

This component will only work on the published/exported site. Full documentation in Finsweet's Attributes docs.
Go to Accordion documentation

Range Slider

Range sliders with accessibility attributes and custom code.

Range Slider 1 - One Handle

Accessibility Attributes
Vanilla Javascript
$0
This component will only work on the published/exported site. Full documentation in Finsweet's Attributes docs.

Range Slider 2 - Two Handles

Accessibility Attributes
Vanilla Javascript
$0
$0
This component will only work on the published/exported site. Full documentation in Finsweet's Attributes docs.

Range Slider 3 - Two Handles

Accessibility Attributes
Vanilla Javascript
0
100
This component will only work on the published/exported site. Full documentation in Finsweet's Attributes docs.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Go to Range Slider documentation

Star Rating

Star rating radio buttons with accessibility attributes and custom code.

Star Rating 1 - Default

Accessibility Attributes
Vanilla Javascript
This component will only work on the published/exported site. Full documentation in Finsweet's Attributes docs.

Star Rating 2 - Emojis

Accessibility Attributes
Vanilla Javascript
This component will only work on the published/exported site. Full documentation in Finsweet's Attributes docs.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Go to Star Rating documentation

Date Picker

Date picker integration with accessibility attributes and custom code.

Date Picker 1 - Default

Accessibility Attributes
Vanilla Javascript
Full documentation in Finsweet's Attributes docs.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Go to Date Picker documentation

Checkbox

Checkboxes with accessibility attributes and custom code.

Checkbox 1 - With Checkbox

Accessibility Attributes
This component will only work on the published/exported site. Full documentation in Finsweet's Attributes docs.

Checkbox 2 - Button Style

Accessibility Attributes
This component will only work on the published/exported site. Full documentation in Finsweet's Attributes docs.

Checkbox 3 - Description

Accessibility Attributes
Full documentation in Finsweet's Attributes docs.

Checkbox 4 - Unique Icon

Accessibility Attributes
Webflow Interactions
Full documentation in Finsweet's Attributes docs.

Checkbox 5 - Toggle

Accessibility Attributes
Webflow Interactions
Full documentation in Finsweet's Attributes docs.

Checkbox 6 - Toggle

Accessibility Attributes
Webflow Interactions
Full documentation in Finsweet's Attributes docs.

Checkbox 7 - Toggle

Accessibility Attributes
Webflow Interactions
Full documentation in Finsweet's Attributes docs.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Go to Checkbox documentation

Radio Button

Radio buttons with accessibility attributes and custom code.

Radio 1 - With Radio

Accessibility Attributes
This component will only work on the published/exported site. Full documentation in Finsweet's Attributes docs.

Radio 2 - Button Style

Accessibility Attributes
This component will only work on the published/exported site. Full documentation in Finsweet's Attributes docs.

Radio 3 - Description

Accessibility Attributes
Full documentation in Finsweet's Attributes docs.

Radio 4 - Unique Icon

Accessibility Attributes
Webflow Interactions
Full documentation in Finsweet's Attributes docs.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
No items found.
Go to Radio Button documentation

Select Custom

Custom selects with accessibility attributes and custom code.

Select 1 - Default

Accessibility Attributes
Webflow Interactions
Select option
This component will only work on the published/exported site. Full documentation in Finsweet's Attributes docs.

Select 2 - Label

Accessibility Attributes
Webflow Interactions
Sort by
Select option
This component will only work on the published/exported site. Full documentation in Finsweet's Attributes docs.

Select 3 - Reset Option

Accessibility Attributes
Webflow Interactions
Select option
This component will only work on the published/exported site. Full documentation in Finsweet's Attributes docs.

Select 4 - On Hover

Accessibility Attributes
Webflow Interactions
Select option
This component will only work on the published/exported site. Full documentation in Finsweet's Attributes docs.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Go to Select Custom documentation

Input Counter

Input counter with accessibility attributes and custom code.

Input Counter 1 - Default

Accessibility Attributes
Vanilla Javascript
-
+
This component will only work on the published/exported site. Full documentation in Finsweet's Attributes docs.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Go to Input Counter documentation

Number Count

Number Count with accessibility attributes and custom code.

Number Count 1 - Default

Accessibility Attributes
Vanilla Javascript
240
Hours of work
16
Cups of coffee
4
Projects created
This component will only work on the published/exported site. Full documentation in Finsweet's Attributes docs.
Go to Number Count documentation