Webflow 中可轻松触及的元素

了解屏幕阅读器和键盘可访问的 Webflow 元素。

您可以从设计器中的“添加元素”面板中发现并集成组件到您的项目中(例如,段、选项卡、视觉效果等)。标记为 无障碍 下表中的元素无需自定义代码即可支持屏幕阅读器和键盘导航。但是,您必须应用样式来指示将焦点放在某些元素上,这样它们才能完全通过键盘进行导航。

为了确保 Tab、Dropdown、Slider 和 Navbar 组件可以通过键盘完全访问,必须在聚焦状态下建立聚焦样式(称为“视觉聚焦”)。这样,使用键盘导航的用户(例如高级用户或行动不便的用户)就可以轻松找到网站中的路径。视觉聚焦包括在导航过程中对活动元素进行可见指示,这对于依赖键盘导航的用户至关重要。有关聚焦状态样式的更多信息,请参阅相关资源。

您还可以通过保持元素的文本内容与元素或页面的背景颜色之间的适当颜色对比度来保证这些组件的可访问性。有关对比度的更多见解可供参考。

成分屏幕阅读器(ARIA)+键盘可访问

标签

无障碍*
申请 专注状态 风格:
1. 标签链接或全部链接

落下

无障碍*
申请 专注状态 风格:
1. 下拉菜单切换
2. 下拉链接或所有链接

图片

无障碍

按钮、链接块

无障碍

部分

无障碍

按钮、链接块

无障碍

清单

无障碍

收藏品清单

无障碍

导航栏

无障碍

滑块

无障碍*
申请 专注状态 风格:
1. 左箭头
2. 向右箭头
3. 滑块点(手动设置 .w-slider-dot:focus CSS)

搜索

无障碍

灯箱

无障碍

视频、YouTube、背景视频

无障碍

地图

无障碍

上传文件

无障碍

结构

无障碍

网上购物(购物车、添加到购物车、在线支付、PayPal、结账)

无障碍

社交网络(Facebook、Twitter)

无障碍

提供反馈

我们欢迎您持续反馈有关 Webflow 无障碍设施的信息。如需提供反馈,请发送电子邮件至我们的团队 [email protected].

我们也鼓励您与我们以及 Webflow 论坛. 通过分享你的想法 Webflow 愿望清单,您可以为您自己和您的网站访问者创建更易于访问的产品做出贡献。

麦宜云
Ewan Mak 的最新帖子 (查看全部)