macOS Safari中Tab键无法聚焦按钮及自定义元素的WCAG合规方案咨询

我正在开发基于Webflow导出主题（future_of_fashion）的WordPress 6.x站点，要求满足WCAG 2AA可访问性标准。站点在Chrome和Firefox中表现正常：Tab键可遍历所有交互元素，且聚焦环清晰可见，但在macOS Sonoma系统的Safari 17+中，Tab键会跳过大多数交互元素。

环境信息 #

• WordPress 6.x
• Webflow导出主题：future_of_fashion
• 操作系统及浏览器：macOS Sonoma + Safari 17+
• 测试工具：pa11y（WCAG2AA标准）

非原生交互元素标记示例 #

主题中的汉堡菜单、滑块箭头等非原生交互元素采用如下标记模式：

<div class="menu-button w-nav-button"
     role="button"
     tabindex="0"
     aria-label="Open navigation menu"
     aria-expanded="false">
  <div class="w-icon-nav-menu" aria-hidden="true"></div>
</div>

所有滑块箭头均遵循相同模式：role="button" + tabindex="0"。

当前聚焦样式配置 #

我已移除主题样式表及Webflow CSS中所有outline: none/outline: 0的样式覆盖，当前聚焦样式如下：

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
.w-nav-button:focus-visible,
.w-slider-arrow-left:focus-visible,
.w-slider-arrow-right:focus-visible {
    outline: 3px solid #fff !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 5px #333 !important;
}

该聚焦指示器在Chrome和Firefox中正常生效。

已尝试的解决措施 #

• 移除所有outline: none和outline: 0的样式覆盖
• 为所有非原生控件添加tabindex="0"和role="button"属性
• 使用pa11y进行WCAG2AA合规测试，未检测到错误
• 验证Chrome和Firefox中的键盘导航功能正常

核心问题 #

在macOS Safari中，除非用户在系统设置中启用键盘导航，否则Tab键会跳过以下类型的元素：

• <button>原生按钮
• <div tabindex="0">设置了tabindex的div
• 带有[role="button"]属性的元素

由于这些元素无法获得焦点，:focus-visible样式永远不会触发，这看起来是Safari/macOS的键盘导航行为逻辑问题，而非CSS样式问题。

咨询内容 #

是否存在可靠的CSS或JavaScript解决方案，能够让macOS Safari默认将所有交互元素纳入Tab顺序，且无需用户修改系统或浏览器的可访问性设置？

我目前考虑了两种解决方案：

1. 将所有<div role="button">元素替换为原生<button>元素
2. 添加JavaScript fallback逻辑，在Tab键事件触发时手动控制焦点移动

但不确定哪种方法在可访问性合规性上是正确且可靠的，请问符合WCAG标准的推荐方案是什么？

内容的提问来源于stack exchange，提问作者Meghansh Cbetter