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

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>

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

过去我曾经听过关于＆＃34;窃取焦点的不好的事情，但是在用OS X Voice Over测试我的想法时，我很惊讶它有多好用，所以我有点不确定。

Answer 1

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

您应该使用按钮上的title和aria-label属性为屏幕阅读器提供替代选项，并使按钮保持可对焦状态。