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

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

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

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

2
Anil 7 Янв 2019 в 16:13

2 ответа

Лучший ответ

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

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

  • .

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

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

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

    1
    slugolicious 8 Янв 2019 в 02:53
  • Код для активной вкладки пользовательского интерфейса 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 1.1.

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

    1
    Tsundoku 9 Янв 2019 в 16:14