jquery tab wcag accessiblity: представление роли не разрешено для данного элемента; Гарантирует, что атрибут роли имеет соответствующее значение для элемента

Question

Jquery tab добавляет role="presentation" к якорям и, согласно инструменту ax , это нарушение WCAG, как это исправить?

Источник элемента

<a href="#tabs-1" role="presentation" tabindex="-1" class="ui-tabs-anchor" id="ui-id-1">Nunc tincidunt</a>

Чтобы устранить это нарушение, вам необходимо: Исправить следующее: роль презентация не допускается для данного элемента

Answer 1

Код для активной вкладки пользовательского интерфейса jQuery, строго говоря, противоречив. Для ясности я немного изменил порядок атрибутов:

<a href="#tabs-1" tabindex="-1" 
role="presentation"
class="ui-tabs-anchor" id="ui-id-1"
>Nunc tincidunt</a>

Элемент a с атрибутом href создает ссылку, и ссылки изначально являются частью порядка фокусировки (или порядка табуляции). Однако добавление атрибута tabindex="-1" выводит его из порядка табуляции. Это создает несоответствие между поведением указателя (по ссылке все еще можно щелкнуть, хотя демонстрационная программа jQuery пытается скрыть это путем манипулирования стилем указателя в CSS) и поведением на основе клавиатуры.

Кроме того, ссылка (поскольку до сих пор реализована активная вкладка) не является декоративной; он функционален , поэтому атрибут role="presentation" вводит в заблуждение. Атрибут role="presentation" может использоваться, например, для декоративных изображений и таблиц макетов. В интерфейсе с вкладками лучше добавить его к элементу li, содержащему ссылку, как показано в WAI-ARIA Authoring Practices 1.1 .

Это можно исправить, переместив role="presentation" из элемента a в содержащий элемент li, переместив role="tab" из элемента li в элемент a и временно удалив / переименовав href атрибут из элемента a, когда вкладка активна.

Answer 2

Технически я могу поставить role="presentation" на любой элемент, который захочу. Однако, делая это, он делает элемент несемантическим элементом (ссылка по существу становится ). Может быть веская причина для ссылки, которая больше не является ссылкой, но в этом случае, я думаю, jquery использует неправильный тип элемента. Какой смысл иметь ссылку, которая теряет свое семантическое значение и , убирается символ табуляции (tabindex установлен в -1)? Просто используйте вместо этого.

Похоже, что управление табуляцией осуществляется настройкой tabindex на

.

На вкладке jqueryui также установлена ​​aria-expanded на самой вкладке, что неверно. Все, что ему нужно, это aria-selected (который имеет значение ). Вкладка ничего не расширяет.

Однако опыт чтения с экрана при использовании вкладки jqueryui очень похож на вкладку на странице W3 . То есть я слышу одни и те же объявления при использовании вкладки jquery и вкладки W3 (за исключением лишних «развернутых» / «свернутых» объявлений jqueryui).

Итак, конечный результат - это работает. Тот факт, что ссылка имеет role="presentation", на самом деле не является ошибкой. Вы должны связаться с топором относительно этого. топор изо всех сил старается не давать ложных срабатываний, и они хорошо реагируют на проблемы.