Блог

Главная - Вопросы по программированию - Tabindex не в порядке

Tabindex не в порядке

#html #backbone.js #twitter-bootstrap-3 #accessibility

#HTML #backbone.js #twitter-bootstrap-3 #Специальные возможности

Вопрос:

С помощью следующей разметки я получаю доступ к первым трем элементам в порядке (кнопка удаления, описание и кнопка перехода).

Когда у меня есть две из этих строк, порядок после кнопки перехода к первой строке переходит к кнопке перехода к следующей строке.

У меня есть tabindex=»0″, поэтому он будет следовать порядку страницы. Я также пробовал много вариантов порядка табуляции, но безуспешно. Есть мысли?

 <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>

Комментарии:

1. у вас есть два tabindex="0" , может быть, в этом проблема

2. Почему вам нужно tabindex везде в первую очередь? Программы для чтения с экрана уже читают страницу сверху вниз, слева направо без использования этого атрибута, и их пользователи также могут выбирать вкладки по ссылкам и элементам формы, если они предпочитают, или даже получить доступ к списку всех заголовков и их содержимого. Или знаковые роли или таблицы или …

Ответ №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

Вы все равно не будете «видеть» фокус вкладки в браузере с этой разметкой. Я тестировал в Google Chrome, и на самом деле это никак не меняет результаты, но, возможно, программы чтения с экрана будут соблюдать настройку tab-index.

В качестве примечания, вам, вероятно, следует удалить tab-index="0" из ячеек таблицы. Это просто приведет к тому, что ячейка также будет находиться в порядке табуляции, и я думаю, что вам действительно нужны только кнопки. Кроме того, если вы решите использовать теги кнопок, по умолчанию они будут следовать порядку табуляции источника, поэтому вам не нужно добавлять к ним tab-index=0 .