jquery-ui 選項卡“不得嵌套交互式控件”

Question

我使用 jquery-ui 選項卡。 示例代碼：

<ul role="tablist">
 <li role="tab"><a class="label" href="#tabs-1" aria-label="Description tab">Description</a></li>
 <li role="tab"><a class="label" href="#tabs-2" aria-label="Reviews tab">Reviews</a></li>
 <li role="tab"><a class="label" href="#tabs-3" aria-label="Credits tab">Credits</a></li>
 <li role="tab"><a class="label" href="#tabs-4" aria-label="Cataloging tab">Cataloging</a></li>
</ul>

axe-core DevTools 可訪問性檢查器將此代碼標記為“嚴重”問題：“不得嵌套交互式控件”，並說明“交互式控件元素不得具有可聚焦的后代”並參考 WCAG 4.1.2 指南。

據我了解，問題在於列表項中有一個鏈接。 從關於 axe-core ( https://github.com/dequelabs/axe-core/issues/601 ) 的 Github 討論中，列表項中的可單擊鏈接會導致屏幕閱讀器出現問題。

但這似乎是 jquery-ui 選項卡小部件的標准用法。 jquery-ui 選項卡小部件是否無法訪問？ 或者 axeTools 是否標記了非問題？

Answer 1

<ul role="tablist">的項目將添加tabindex="0"等以使它們具有焦點（實際li ，而不是鏈接），然后錨點應該有tabindex="-1"添加到它。

這個想法是，如果 JS 失敗，鏈接是一個后備，這就是為什么它首先被包含，而不僅僅是純文本。

但是，這確實會導致交互元素的嵌套，因為您現在在列表項上有tabindex="0" （使其“交互”/可聚焦），然后是其中的鏈接。

他們將tabindex="-1"添加到鏈接以將其從焦點順序中刪除，但某些屏幕閱讀器/瀏覽器組合仍會選擇此鏈接，這就是它被標記的原因。

所以有一個解決方法，但你需要自己實現它。

首先，將role="presentation none"添加到鏈接中：

<li role="tab"><a class="label" href="#tabs-1" role="presentation none">Description</a></li>

這樣做的信號是，就輔助技術而言，這個錨點應該被視為<div>或<span> （它刪除了所有語義含義）。

其次，（但您必須檢查它是否適用於 jQuery-UI）是通過 JS從鏈接中刪除href屬性（因此只有在 Tab 組件初始化后才會刪除它）。

如果您在執行此操作后檢查元素（忽略添加的任何類等），您應該最終得到以下結果：

<li role="tab"><a class="label" role="presentation none">Description</a></li>

如果 JS 工作並正確加載，這將阻止它成為可聚焦的項目，但如果 JS 加載失敗，它將優雅地退回。

另請注意，我刪除了您的aria-label ，因為您使用role="tab"的事實已經告訴屏幕閱讀器它是一個選項卡，因此不需要您的 label。

總而言之：

• 將role="presentation none"添加到<li>中的鏈接
• 通過 JavaScript 從鏈接中刪除href屬性。
• 刪除aria-label （與問題無關）

這應該使 jQuery-UI 中的選項卡盡可能可訪問，但它可能存在其他問題，所以我不能說它是否可以訪問！