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

Question

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

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

<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>

这样做合适吗？我引入的问题会多于我用这个想法解决的问题吗？

过去我听说过关于 "stealing focus" 的坏消息，但在使用 OS X Voice Over 测试我的想法时，我很惊讶它的效果如何，所以我有点不确定。

Answer 1

您的屏幕 reader 将读取一个操作 "open menu"，您将无法点击。奇怪的行为。

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

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

Accessibility: Shifting focus from button to nested span – good idea?

html

accessibility

focus