html - 辅助功能:将焦点从按钮转移到嵌套范围——好主意吗？

Question

在响应式网站上，我有一个用于小屏幕的按钮，可以打开网站的主导航菜单。在那个按钮里面有一个 <span>使用 CSS 显示图标。

出于设计原因，我隐藏了按钮的文本内容，但让屏幕阅读器用户可以访问它:

<button class="menu-operator button">
    <span class="visuallyhidden">Open menu</span>
    <span class="icon"></span>
</button>

从设计的角度来看，按钮作为按钮是不可见的(没有背景色、边框或任何东西)。为了仍然通过视觉线索支持用户关注焦点，我正在考虑使按钮不可聚焦并将焦点转移到图标范围，然后我可以使用 CSS 对其进行样式设置 :focus .

所以基本上是这样的:

<button class="menu-operator button" tabindex="-1">
    <span class="visuallyhidden">Open menu</span>
    <span class="icon" tabindex="0"></span>
</button>

这样做是否明智？我引入的问题会比我用这个想法解决的问题多吗？

过去我听说过关于“窃取焦点”的坏话，但在使用 OS X Voice Over 测试我的想法时，我很惊讶它的效果如何，所以我有点不确定。

Answer 1

您的屏幕阅读器将读取“打开菜单”操作，您将无法点击。奇怪的行为。

您应该在按钮上使用 title 和 aria-label 属性为屏幕阅读器提供替代方案，并保持按钮可聚焦。