{"id":5122,"date":"2024-04-14T22:30:20","date_gmt":"2024-04-14T14:30:20","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=5122"},"modified":"2024-04-14T22:30:20","modified_gmt":"2024-04-14T14:30:20","slug":"elements-that-can-be-easily-reached-in-webflow","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/elements-that-can-be-easily-reached-in-webflow\/","title":{"rendered":"Elements that can be easily reached in Webflow"},"content":{"rendered":"\n
\n

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<\/strong> 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.<\/p>\n

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.<\/p>\n

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.<\/p>\n

\n
\n
\n
Component<\/span>Screen reader (ARIA) + keyboard accessible<\/span><\/div>\n<\/div>\n
\n

\n Tabs
\n <\/span>
\n Accessible*
Apply focused state<\/strong> style on:
1. Tab link or All links
\n <\/span><\/div>\n

\n Dropdown
\n <\/span>
\n Accessible*
Apply focused state<\/strong> style on:
1. Dropdown toggle
2. Dropdown link or All links
\n <\/span><\/div>\n

\n Picture
\n <\/span>
\n Accessible
\n <\/span><\/div>\n

\n Button, Link block
<\/span>
\n Accessible
\n <\/span><\/div>\n

\n Segment
\n <\/span>
\n Accessible
\n <\/span><\/div>\n

\n Button, Link block
<\/span>
\n Accessible
\n <\/span><\/div>\n<\/div>\n

\n Listing
\n <\/span>
\n Accessible
\n <\/span><\/div>\n

\n Collection Listing
\n <\/span>
\n Accessible
\n <\/span><\/div>\n

\n Navigation Bar
\n <\/span>
\n Accessible
\n <\/span><\/div>\n

\n Slider
\n <\/span>
\n Accessible*
Apply focused state<\/strong> style on:
1. Left arrow
2. Right arrow
3. Slider dot (manually set .w-slider-dot:focus CSS)
\n <\/span><\/div>\n

\n Search
\n <\/span>
\n Accessible
\n <\/span><\/div>\n

\n Lightbox
\n <\/span>
\n Accessible
\n <\/span><\/div>\n

\n Video, YouTube, Background Video
\n <\/span>
\n Accessible
\n <\/span><\/div>\n

\n Map
\n <\/span>
\n Accessible
\n <\/span><\/div>\n

\n File Upload
\n <\/span>
\n Accessible
\n <\/span><\/div>\n

\n Structures
\n <\/span>
\n Accessible
\n <\/span><\/div>\n

\n Online Shopping (Cart, Add to Cart, Online Payments, PayPal, Checkout) <\/span>
\n Accessible
\n <\/span><\/div>\n

\n Social Networks (Facebook, Twitter)
\n <\/span>
\n Accessible
\n <\/span><\/div>\n<\/div>\n<\/div>\n

Providing feedback<\/h2>\n

We appreciate ongoing feedback regarding accessibility at Webflow. To provide feedback, please email our team at accessibility@webflow.com<\/a>.<\/p>\n

We also encourage you to connect with us and other users on the Webflow Forum<\/a>. By sharing your ideas in the Webflow Wishlist<\/a>, you can contribute to the creation of a more accessible product for both you and your website visitors.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Learn about screen reader and keyboard accessible Webflow elements.","protected":false},"author":2,"featured_media":5239,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[302],"tags":[],"class_list":{"0":"post-5122","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-accessibility","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/5122","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/comments?post=5122"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/5122\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/5273"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=5122"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=5122"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=5122"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}