虽然我的 CSS 样式成功地将焦点边框应用于表单元素，但在启用 VoiceOver 时，此行为不一致。 VoiceOver 似乎在元素的默认焦点边框顶部创建了自己的附加边框，从而导致“双焦点”效果在视觉上分散注意力。看起来，当激活 VoiceOver 时，除了组件的默认边框之外，还会出现一个黑色边框。此问题似乎在表单元素中更为普遍，但也可能在其他组件中出现。
未打开语音：
[画外音关闭时的搜索表单] (https://i.sstatic.net/JxJhMK2C.png)
打开语音：
（https://i.sstatic.net/Qsyzgvwn.png）
VoiceOver 的双重焦点问题是一个重要的可访问性问题，需要优先考虑。 VoiceOver 实用程序中是否有任何设置可以缓解此问题？或者，是否有已知的解决方法或最佳实践来确保我们的组件在 VoiceOver 处于活动状态时显示单个清晰的焦点指示器？
希望在打开语音时只有一个焦点
不幸的是，这个问题没有直接的解决方案，因为它与 VoiceOver 如何与浏览器中 CSS 的渲染交互有关。不过我有一些建议可能会有所帮助。
CSS 样式： 您可以尝试调整 CSS 以考虑 VoiceOver 的额外边框。这可能涉及在 VoiceOver 处于活动状态时更改边框样式或颜色，以使双焦点不那么明显。
Aria 属性： 在 HTML 中使用 ARIA 属性可以提高网站的可访问性。某些 ARIA 角色和属性可以帮助管理焦点并可能缓解双重焦点问题。
VoiceOver 设置： 您可以发布一个消息框，让用户知道检查其设备上的 VoiceOver 实用程序设置。可能有一些与焦点和选择相关的选项可以调整以改善情况。
就像我之前提到的，这些不是直接的解决方案，因此这些仅涵盖双焦点影响。
