使用.focus（）专注于span标记（）

此处的目标是关注搜索后的查询结果。这是因为我们希望我们的网站可以访问，并且屏幕阅读器可以读取结果。使用.focus（）专注于span标记（）

结果具有以下结构：

<div class="result-container"> 
    <p> 
     <span class="selected-solution" tabindex="-1" aria-live="polite"> 
      Text to be read 
     </span> 
     <button type="button" title="Delete selected solution"> 
      <span class="icon icon-close" aria-hidden="true"></span> 
      <span class="sr-only">Delete selected solution</span> 
     </button> 
    </p> 
</div>

我想设置与类“中选择的解决方案，”跨度焦点，使用jquery。因为“结果容器”可以包含其他类型的结果（在没有结果的情况下，或内部错误），我使用了一个通用的解决方案：

$selector.find(':focusable').first().focus();

但这种方法无法专注于我以前的跨度... 如果我用div替换我的span，它可以正常工作，但这不是一个好的解决方案（它将按钮放在下一行）。

如果我在本地运行网站时尝试此命令，则选择我的跨度。

你有什么想法为什么跨度不能集中？

感谢您的帮助！

编辑：

进一步测试后，似乎jQuery代码使用范围时跨度但是相关联的茉莉花测试失败，.toBeFocused标准（工作）。

仍然奇怪，但另一件探索。

来源

2017-02-09 Acedrin

我有同样的问题（这也是由于需要支持辅助功能并将焦点设置为跨度，以供屏幕阅读器使用）。我的修复程序是tabindex = 0。 <跨度类=“选择的解决方案”的tabindex =“0”咏叹调活=“礼貌”>要读取文本这使聚焦我。然而，我对Accessibility支持相当陌生，所以这个tabindex = 0是否会影响可访问性？ –

它不会混乱这个元素的顺序。但它变得可以聚焦。因此，用户通过键盘浏览您的页面会绊倒它，如果您不想要它，可能会成为问题。就我而言，问题只在于我的茉莉花测试，代码在页面上正常工作。所以可能你可以忘记这次测试并使用tabindex = -1？包含jQueryUI的 – Acedrin

:focusable是jQueryUI选择器（不是jQuery） - 确保包含jQueryUI。

来源

2017-02-09 18:10:07

。值得注意的是，当我们使用一个div时：focusable作品。我们的问题是使用跨度。：/ – Acedrin

使用.focus（）专注于span标记（）

回答

相关问题