我在构建 LWC 时遇到了可访问性要求,其中用户必须能够使用键盘在选项卡集中的选项卡之间进行切换(真是拗口!)。
我有一个闪电标签集,里面包裹着三个闪电标签。在每个选项卡中,我都有一个不同的 LWC,用于加载不同的内容。
我发现,当用户在屏幕上看到选项卡时,默认情况下会聚焦第一个选项卡,但当他们在键盘上单击选项卡时,它会直接转到内容,而不是选项卡集中的下一个选项卡。
有没有办法让用户按下 Tab 键时,直接进入下一个选项卡,而不是先进入内容?
有多种不同的方法可以在 HTML 中解决此问题,但由于 LWC lighting-tabset 是开箱即用的组件,因此您无法更改它生成的 HTML。 您必须向 Salesforce 报告此辅助功能问题,以便他们修复。
这可能是旧新闻了,因为原始帖子是很久以前的,但请查看有关 Tabs 组件键盘交互的 Lightning Design System 文档:https://www.lightningdesignsystem.com/components/tabs/ #键盘交互
其中注明以下内容:
- 箭头键,当焦点位于选定选项卡上时,循环选择到下一个或上一个选项卡
- Tab 键,当焦点位于选项卡列表之前时,将焦点移动到所选选项卡
- Tab 键,当焦点位于所选选项卡上时,将焦点移动到所选选项卡的关联选项卡面板或下一个可聚焦的选项卡 如果该面板没有可聚焦元素,则页面上的元素
- Shift+Tab 键,当焦点位于选项卡面板中的第一个元素时,将焦点移回所选选项卡
所以这意味着,您一定应该检查以确保它实际上以这种方式工作,即当第一个“活动”选项卡获得键盘焦点(通过 Tab 键)时,要访问下一个选项卡,请使用方向键。如果您有第一个选项卡处于活动状态,则按 Tab 键会将焦点转移到选项卡的内容(而不是下一个选项卡)。