无障碍选项卡（Tabs）生成器

无障碍选项卡（Tabs）生成器: 用途

选项卡能在小空间里组织产品的描述、尺寸和配送等内容。如果做得不细致，键盘和屏幕阅读器就无法使用。

生成器遵循 WAI-ARIA Authoring Practices 的 Tabs 规范：tablist、带 aria-selected 的 tab，以及通过 aria-controls 和 aria-labelledby 关联的 tabpanel，Tab 键只停在当前选项卡上，并支持方向键、Home 和 End 导航。面板只有在脚本加载后才会隐藏。你可以选择下划线或胶囊样式以及颜色。

使用方法

1. 填写每个选项卡的标题和内容。
2. 选择样式和颜色。
3. 在预览中测试并复制代码。

使用场景

• 网店中的商品详情。
• 并排展示套餐或服务。
• 活动信息。

常见问题

是什么让选项卡具备无障碍性？

遵循 WAI-ARIA 的 Tabs 规范：列表带有 role=tablist，每个选项卡是带有 role=tab 和 aria-selected 的按钮，每块内容带有 role=tabpanel，并通过 aria-controls 和 aria-labelledby 与选项卡关联。Tab 键只会停在当前选项卡上，选项卡之间用方向键切换。

如果 JavaScript 没有加载呢？

代码只有在脚本运行之后才会隐藏面板。没有 JavaScript 时，所有内容会上下依次显示，不会有任何内容无法访问。

选项卡还是手风琴？

在电脑上，标题少且简短时选项卡效果很好。条目多或文字较长时，尤其在手机上，手风琴（可展开收起的问题）通常更合适。

真的免费吗？

是的，100%免费。无需注册，无需订阅，不限使用次数。所有工具：Tools123是免费的。

相似工具