如何仅在VoiceOver(可访问性)模式中提供选项卡焦点按钮

发布于 2025-01-21 21:21:54 字数 1163 浏览 4 评论 0原文

我正在使用ReactJ,并且我的代码中有很多<。我注意到我可以使用 tab 键在按钮上移动,并且会在类似的焦点按钮上进行概述:

但是在这个网站试图复制,它们使用的按钮不会在正常情况下以标签为目标,而是在我们打开VoiceOver可访问性模式时。 标签焦点的边界也不同。

我想知道我们如何在React中实现这一目标?

Tabindex更改为0-1不起作用。

谢谢大家!


我问更新

,因为这会导致问题:

  • 如果我首先使用UI键盘(UIKB),然后尝试使用真实的键盘键盘事件键入。标签焦点只会卡在UIKB字母上,并将其返回两次。
  • 这不会在Wordle游戏上发生,因为它们只允许在可访问性模式下使用选项卡焦点。
  • TabIndex = -1不起作用,因为我想允许用户仅在诸如Wordle之类的A11Y模式下使用Tab focus,我不想完全禁用它。

I'm using ReactJS and I have a lot of <button> in my code. I notice that I can use the Tab key to move over the button and there will be an outline on focused button like this:
enter image description here

But on this website which I'm trying to replicate, the buttons they use do not get Tab-focused on normal but just when we turn on the VoiceOver accessibility mode.
And the border of the Tab focus is also different.

enter image description here

I wonder how can we implement this in React?

Changing tabIndex to 0 or -1 doesn't work.

Thanks everyone!


Update

I ask because this leads to a problem:

  • If I use the UI Keyboard (UIKB) first and then try to type with the real keyboard keydown event. The tab focus would just stuck on the UIKB letter and return it twice.
  • This doesn't happen on the Wordle game because they just allow using tab focus when in accessibility mode.
  • tabIndex = -1 doesn't work because I want to allow the user use the tab focus just in a11y mode like Wordle, I don't want to totally disable it.

enter image description here

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文