Accessible elements in Webflow

Learn about screen reader and keyboard accessible Webflow elements.

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

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 power users or people with reduced mobility. 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.

Element Screen reader (ARIA) + keyboard accessible
Tabs Accessible*
Set focused state style on:
1. Tab link or All links
Dropdown Accessible*
Set focused state style on:
1. Dropdown toggle
2. Dropdown link or All links
Image Accessible
Button, Link block
Accessible
Section Accessible
Button, Link block
Accessible
List Accessible
Collection List Accessible
Navbar Accessible
Slider Accessible*
Set focused state style on:
1. Left arrow
2. Right arrow
3. Slider dot (set .w-slider-dot:focus CSS manually)
Search Accessible
Lightbox Accessible
Map Accessible
File Upload Accessible
Forms Accessible
Ecommerce (Cart, Add to Cart, Web Payments, PayPal, Checkout) Accessible

How to provide feedback

We welcome continued feedback on accessibility at Webflow. To share, please send our team an email at accessibility@webflow.com.

We also invite you to engage with us and others on the Webflow Forum. You can help us build a more accessible product for you and your site visitors by sharing your ideas in the Webflow Wishlist.

Table of contents

Continue learning

Hmm…we couldn’t find any results for “search query”. Try a different search term or check out our community forum.

Search the forumReset the filter
Load more

Filter

Reset
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Topics
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Back to top