Где разместить атрибут aria-controls в разметке моих вкладок

Я настраиваю раздел содержимого с вкладками на своей странице с помощью скрипта, который следует следующему синтаксису: 

<!-- Clickable tab links -->
<ul class="js-tablist">
    <li id="tab1" class="js-tab active"><a href="#tabpanel1">Tab 1</a></li>
    <li id="tab2" class="js-tab"><a href="#tabpanel2">Tab 2</a></li>
    <li id="tab3" class="js-tab"><a href="#tabpanel3">Tab 3</a></li>
</ul>

<!-- Tab panels -->
<div id="tab-set" class="js-tabpanel-group">
    <section id="tabpanel1" class="js-tabpanel">__CONTENT__</section>
    <section id="tabpanel2" class="js-tabpanel">__CONTENT__</section>
    <section id="tabpanel3" class="js-tabpanel">__CONTENT__</section>
</div>

Я буду устанавливать различные роли Арии(role="tablist", role="tab", role="tabpanel", и т. д.) На этой структурной разметке с помощью javascript (поскольку если нет сценариев, то нет и вкладок), но я не уверен, где разместить мои атрибуты "Aria-controls". Должны ли они идти на элемент <li> или на его дочерний элемент <a>? Или это не имеет значения? Действительно, тот же вопрос можно было бы задать и о role="tab" и tabindex="0" - должны ли эти вещи идти в пункт списка или якорь?

2 9
html tabs accessibility

2 ответа:

Поместите aria-controls на элемент, который получает role="tab".

aria-controls это то, что создает связь между вкладкой и ее панелью. Смотрите третий маркер в описании для aria-controls из спецификации: https://www.w3.org/TR/wai-aria/states_and_properties#aria-controls

Чтобы ответить на ваш следующий вопрос, поместите role="tab" на <a href>, так как он уже настроен для получения фокуса клавиатуры и может быть использован браузером. Это также означает, что вам не нужно будет использовать tabindex на все.

Рассмотрим также бросание role="presentation" на элементы <li> и role="tablist" на элементы <ul> (тем более, что вы делаете <li> инертным с role="presentation").

Будьте готовы также управлять навигацией по клавишам со стрелками, поскольку с помощью ролей вкладок вы, по сути, говорите опытному пользователю, что эти вкладки будут вести себя как вкладки в ОС, которые используют клавиши со стрелками для переключения между вкладками.

Дополнительные ресурсы, которые стоит проверить выход:

После всего этого, пожалуйста, протестируйте его в программе чтения с экрана, чтобы убедиться, что он ведет себя так, как вы ожидаете.
5

Это демо показывает используете tabpanels с арией. Программа чтения с экрана Jaws предоставляет ярлык для перехода от вкладки к соответствующей панели вкладок на основе отношения, созданного атрибутом Aria-controls.

Если вам интересно, это демо показывает используете tabpanels без Ария.

Когда вы создаете набор панелей вкладок, вы хотите, чтобы виджет представлял одну точку табуляции в порядке клавиатуры. Когда кто - то использует клавишу tab для перемещения на наборе вкладок фокус должен перейти на текущую выбранную вкладку, а следующее нажатие клавиши tab должно вернуть фокус обратно в содержимое.

Для этого можно использовать блуждающий tabindex. Фокусироваться должна только выбранная в данный момент вкладка. Все остальные вкладки (в частности, элементы <a>, которые их представляют) должны иметь набор tabindex="-1". Это предотвращает их включение в последовательность вкладок клавиатуры.

Сценарий, который позволяет кому-то циклически проходить вкладки, использующие клавиши со стрелками влево/вправо, также должны обновить значения атрибута tabindex на каждой вкладке, чтобы все, кроме выбранной в данный момент вкладки, имели значение tabindex -1. Здесь естьрабочая демонстрация tabpanels .

2