Elements that can be easily reached in Webflow

You have the option to discover and integrate components into your project (for instance, segments, tabs, visuals, etc.) from the Add Elements panel in the Designer. The elements labeled as Accessible in the chart provided below offer support for screen readers and keyboard navigation without requiring custom code. However, you will have to apply styles to indicate focus on certain elements for them to become entirely navigable via keyboard.

In order to ensure that Tab, Dropdown, Slider, and Navbar components are fully accessible via keyboard, it is essential to establish a focus style (referred to as “visual focus”) on the focused state. This way, users utilizing a keyboard for navigation, such as power users or individuals with limited mobility, can easily find their way around the site. Visual focus includes a visible indication on active elements during navigation and is crucial for users who rely on keyboard navigation. For additional information on styling the focused state, refer to the relevant resources.

You can also guarantee that these components are accessible by maintaining suitable color contrast between the textual content of your element and the background colors of the element or page. Further insights on contrast ratios are available.

Providing feedback

We appreciate ongoing feedback regarding accessibility at Webflow. To provide feedback, please email our team at [email protected].

We also encourage you to connect with us and other users on the Webflow Forum. By sharing your ideas in the Webflow Wishlist, you can contribute to the creation of a more accessible product for both you and your website visitors.