可访问性：将焦点从按钮转移到嵌套跨度——好主意吗？答案

【问题标题】：Accessibility: Shifting focus from button to nested span – good idea?可访问性：将焦点从按钮转移到嵌套跨度——好主意吗？
【发布时间】：2015-12-29 08:17:36
【问题描述】：

在响应式网站上，我有一个用于打开网站主导航菜单的小屏幕按钮。在该按钮内有一个<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 测试我的想法时，我很惊讶它的效果如何，所以我有点不确定。

【问题讨论】：

标签： html focus accessibility

【解决方案1】：

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

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

【讨论】：

感谢您的回答！