使用.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標記（）

回答

相關問題