Question

使用以下标记，我可以正常访问前三个元素（删除按钮，说明和＆amp; go按钮）。

当我有两行时，第一行go按钮后的顺序会跳到下一行的go按钮。

我有tabindex =＆＃34; 0＆＃34;所以它会遵循页面的顺序。我也试过很多变化的Tab顺序没有运气。有什么想法吗？

<table class="table table-striped bookmarkListContainer">
    <tbody>
        <tr>
            <td class="removeButton" data-bookmarkid="120" tabindex="0" aria-label="Remove Test module">
                <button><span class="fa fa-times-circle-o"></span></button></td>
            <td tabindex="0">Overview<br><span class="greyText">Foundations</span></td>
            <td tabindex="0"><a data-bypass="true" href="/test/section/1/module/1/page/overview" class="openBookmark"><button type="button" class="btn btn-primary btn-small pull-right">Go</button></a></td>
        </tr>
        <tr>
            <td class="removeButton" data-bookmarkid="121" tabindex="0" aria-label="Remove Test module">
                <span class="fa fa-times-circle-o"></span></td>
            <td tabindex="0">Delivery Method - Tabs<br><span class="greyText">Foundations</span></td>
            <td tabindex="0"><a data-bypass="true" href="/test/section/1/module/1/page/1" class="openBookmark"><button type="button" class="btn btn-primary btn-small pull-right">Go</button></a></td>
        </tr>
    </tbody>
</table>

Answer 1

您似乎在第二个“删除按钮”上缺少按钮标记。因此，请将您的商标更改为：

<button><span class="fa fa-times-circle-o"></span></button>

如果由于某种原因你不想使用按钮标记，我建议使用以下标记：

<span role="button" tab-index="0" class="fa fa-times-circle-o"></span>

有关详情，请点击此处：https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role

您仍然不会在带有此标记的浏览器中“看到”标签焦点。我在谷歌浏览器中进行过测试，但它并没有真正改变结果，但也许屏幕阅读器会尊重标签索引设置。

作为旁注，您应该从表格单元格中删除tab-index="0"。这只会导致单元格也处于Tab键顺序中，而我认为你真正想要的只是按钮。此外，如果您选择使用按钮标签，默认情况下，它们将遵循源的Tab键顺序，因此您不必将tab-index = 0添加到它们。

Tabindex不按顺序排列

1 个答案: