Accessible elements in Webflow

Learn about current screen reader and keyboard accessible Webflow elements, as well as future plans for more accessible elements.

This video features an old UI. Updated version coming soon!

You can find and add elements to your project (e.g., sections, buttons, images, etc.) from the Add Elements panel of the Designer. The elements marked as “Accessible” in the table below provide screen reader and keyboard navigation support without the need for custom code, though you will need to add focused state styles for some elements to make them fully keyboard accessible.

To make Tab, Dropdown, Slider, and Navbar elements fully keyboard accessible, you’ll need to set a focus style (known as “visual focus”) on the focused state so site visitors can better wayfind when using a keyboard to navigate. Visual focus adds a visible indicator on the active elements while navigating and is necessary for people who primarily use the keyboard to navigate, like those with reduced mobility or even power users. Learn more about styling the focused state

You can also ensure these elements are accessible by using sufficient color contrast between your element’s text and the element or page’s background colors. Learn more about contrast ratios.

We are continually updating our most highly used elements to be more accessible and will keep you updated as we push more improvements.

Element
Screen reader (ARIA) + Keyboard Accessible
Accessible*
Set focused state style on:
1. Tab link or All links
Accessible*
Set focused state style on:
1. Dropdown toggle
2. Dropdown link or All links
Accessible
Accessible
Accessible
Accessible
Accessible
Accessible
Accessible*
Set focused state style on:
1. Left arrow
2. Right arrow
3. Slider dot (set .w-slider-dot:focus CSS manually)
Accessible
Will be accessible in Q4 2021
Will be accessible in Q4 2021
Map
Will be accessible in Q4 2021
Will be accessible in Q4 2021
Will be accessible in Q4 2021
Will be accessible in Q4 2022
Will be accessible in Q4 2022

How to provide feedback

We welcome your feedback on accessibility. Please contact us by emailing accessibility@webflow.com.
We also invite you to engage with us and others on the Webflow Forum. And you can help us build a more accessible product for you and your site visitors by sharing your ideas in the Webflow Wishlist.

Try Webflow — it's free
No items found.
This video features an old UI. Updated version coming soon!