我正在开发一个使用Webflow导出主题的WordPress站点。该站点需要通过WCAG 2AA无障碍标准。

在Chrome和 Firefox中一切正常——按Tab键可以遍历所有可交互元素，聚焦环也能看到。

但在macOS上的Safari中，Tab键会跳过大部分元素。

环境：

• WordPress 6.x
• Webflow导出的主题（future_of_fashion）
• Safari 17+在 macOS Sonoma上
• 使用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似乎会跳过：

• <button>
• <div tabindex="0">
• [role="button"]

除非在系统设置中启用macOS键盘导航。

因为该元素从未获得焦点，:focus-visible 也就永远不会触发。

所以这似乎是Safari/macOS的键盘导航行为，而不是一个CSS问题。

是否有可靠的CSS或 JavaScript解决方案，可以在不要求用户更改OS/浏览器无障碍设置的情况下，让Safari/macOS将所有可交互元素包含在Tab顺序中？

我考虑过：

1. 将所有 <div role="button"> 元素替换为原生的 <button> 元素
2. 添加一个JavaScript回退机制，在Tab键事件时手动移动焦点

但我不确定这两种方法在无障碍方面是否被视为正确或可靠。

在这里，推荐的符合WCAG的做法是什么？

解决方案

没有可靠的CSS解决方法，因为根本没有让该元素获得焦点。

macOS上的Safari会遵循用户的键盘导航设置。如果该设置关闭，Tab将不会遍历每个控件，因此 :focus / :focus-visible 无法帮助，因为这些元素根本不会获得焦点。

从页面端来看，最好的做法是改进标记，避免依赖ARIA将非交互元素转化为控件：

<button
  type="button"
  class="menu-button w-nav-button"
  aria-label="Open navigation menu"
  aria-expanded="false">
  <span class="w-icon-nav-menu" aria-hidden="true"></span>
</button>

然后把聚焦样式保持在原生控件上：

button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
  box-shadow: 0 0 0 5px #333;
}

我不会添加一个手动捕获或重新实现Tab导航的JavaScript回退。这通常会引入新的无障碍问题，尤其是对屏幕阅读器和键盘用户。

因此，推荐的做法是：尽可能使用原生元素，在不可避免时让自定义控件可通过键盘操作，并保留可见的聚焦样式。当用户的操作系统/浏览器设置另有规定时，你无法强制Safari/macOS将所有可聚焦元素都包含在Tab顺序中。