Диалоги пользовательского интерфейса jQuery и элементы управления aria

Использовал бы aria-controls на кнопке для ссылки на элемент диалогового окна пользовательского интерфейса jQuery. что открывает уместное использование ARIA?

Я уже заметил, что пользовательский интерфейс jQuery автоматически помещает div в другой отдельный div, который имеет role=dialog и aria-labelledby с заголовком диалогового окна. Я видел aria-controls отношения между ссылками на вкладки и панелями вкладок, а также кнопками и элементами форм (вводы, раскрывающиеся списки и т. Д.), Но не между кнопками и диалоговыми окнами.

Вот пример кода, демонстрирующий, о чем я спрашиваю:

$('button[aria-controls$="-dialog"]').on('click', function() {
  var $dialog = $('#' + $(this).attr('aria-controls'));
  $dialog.dialog('open');
});

$('.jqui-dialog').dialog({
  modal: true,
  autoOpen: false
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src=https://code.jquery.com/ui/1.11.4/jquery-ui.min.js></script>
<link rel=stylesheet type=text/css href=https://code.jquery.com/ui/1.11.4/themes/dot-luv/jquery-ui.css>

<button type=button aria-controls=add-new-item-dialog>
  Add new item
</button>

<div id=add-new-item-dialog class=jqui-dialog title='Add new item'>
  <p>A form here.</p>
</div>


javascript modal-dialog accessibility jquery-ui wai-aria
person rink.attendant.6    schedule 21.11.2015    source источник

Ответы (2)


arrow_upward
0
arrow_downward

В текущей реализации jQuery я не думаю, что это уместно.

Согласно документации ARIA для "aria-controls" http://www.w3.org/TR/wai-aria/states_and_properties#aria-controls

Идентифицирует элемент (или элементы), содержимое или присутствие которых контролируется текущим элементом. См. Связанные с ариями.

Что это значит?

Это можно использовать для кнопок, которые управляют видео, слайдером, панелью вкладок или всем, что нужно контролировать.

Когда вы наводите курсор на такую ​​кнопку, JAWS сообщает: «Используйте клавишу Jaws + alt + m, чтобы перейти к контролируемому элементу». Так что, если у элемента есть display:none, это не сработает. Если вы хотите контролировать «присутствие» элемента, вам нужно настроить таргетинг на родительский элемент или поиграть с CSS-атрибутами видимости / z-index.

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

В вашем случае при загрузке страницы у вас есть ui-dialog со свойством css display: none. Поэтому, когда программа чтения с экрана сообщит, что кнопка может повлиять на другой элемент, вы не сможете перейти к ней, если не нажмете ее до этого, поскольку элемент еще не находится в визуальном потоке.

TL; DR: атрибут aria-controls указывает, на какой элемент может повлиять элемент управления. Программа чтения с экрана предоставит вам быстрый доступ к этому элементу (без необходимости эффективно нажимать на элемент управления). Для этого необходимо, чтобы визуальный фокус можно было переместить на целевой элемент.

person Adam    schedule 23.11.2015
comment
Кнопка, которая вызывает всплывающее диалоговое окно, безусловно, контролирует наличие этого диалогового окна. То же самое можно сказать и о вкладке, и о панели вкладок, которая является частью списка вкладок. Если вкладка может управлять панелью вкладок, почему бы не использовать кнопку и диалоговое окно (в частности, если диалоговое окно не является модальным, а кнопка - переключателем)? - person unobf; 23.11.2015
comment
@unobf Вы можете отлично использовать кнопку, чтобы открыть диалог, и использовать атрибут aria-controls, пока диалог находится в текущем визуальном потоке страницы. Вы должны использовать другую реализацию (например, z-index, visibility:hidden). Когда вы используете display:none, как в конкретном случае этого вопроса, когда пользователь использует диалоговое окно пользовательского интерфейса jQuery, JAWS не сможет настроить таргетинг на управляемый элемент, если пользователь ранее не нажал кнопку (что не является ожидаемым поведением). - person Adam; 24.11.2015
comment
точно то же самое произойдет с элементами управления вкладками для вкладок, которые не выбраны на панели вкладок. display: none вообще не имеет ничего общего с aria-control. См. Эту реализацию oaa-accessibility.org/example/34, ваш tl; dr - это полная чушь . - person unobf; 24.11.2015
comment
Эта реализация - прекрасная иллюстрация того, что я говорю. Воспользуйтесь программой чтения с экрана и узнайте о преимуществах aria-controls здесь. Никто. Ничего такого. Ниет. Нада. Нуль. Боже мой, мы работаем для людей, использующих программы чтения с экрана, не давайте мне такой плохой пример панели вкладок (я ожидаю, что клавиша ввода сработает, когда визуальный фокус находится над вкладкой). Я очень уважаю вашу работу и действительно люблю многие из ваших выступлений здесь, но я слишком уважаю людей, чтобы использовать арию только в декоративных целях. - person Adam; 24.11.2015
comment
Вероятно, это ошибка в реализации, но она не отменяет остальную часть реализации. Кроме того, это не моя реализация, но в нем участвовал Рич Швердтфегер - человек, который изобрел ARIA openajax. org / member / wiki / - person unobf; 24.11.2015
comment
См. Последнее изменение, которое я внес в свой ответ - person unobf; 24.11.2015
comment
Да, Леони правильно говорит. Когда пользовательский агент (UA) поддерживает элементы управления aria, это позволяет перемещать фокус с текущего элемента непосредственно на элемент, которым он управляет. Невозможно переместить фокус на элемент с помощью display:none. И это подтверждается данной реализацией. Мы точно в порядке? - person Adam; 24.11.2015

arrow_upward
0
arrow_downward

Да, используя aria-controls для роли элемента кнопка разрешена в соответствии со спецификацией ARIA, и ваш вариант использования имеет смысл. Пользовательский агент / вспомогательные технологии должны обеспечивать любое поведение, которое он сочтет подходящим для этих отношений (с JAWS вы можете использовать INSERT-ALT-M для перехода к контролируемому элементу. Если диалоговое окно не модальное и кнопка переключает его, это обеспечивает полезную поддержку навигации. модальный, это не сильно улучшает пользовательский опыт).

В вашем случае пользовательский интерфейс улучшится, если вы aria-haspopup="true" укажете, что кнопка вызывает всплывающее окно. Затем об этом будет объявлено пользователям программ чтения с экрана.

Здесь Леони Уотсон (член рабочей группы ARIA) специально использует кнопку в качестве примера для элементов управления ARIA и рассказывает о том, как программы чтения с экрана в настоящее время (на момент написания) поддерживают ее http://tink.uk/using-the-aria-controls-attribute/

person unobf    schedule 22.11.2015
comment
Главный аспект вопроса заключался в том, чтобы узнать, можем ли мы ссылаться на узел, помеченный как ui-диалог jQuery с атрибутом aria-controls (поскольку, например, это будет нацелено на внутренний элемент, а не на диалог упаковки). Но вы должны упомянуть aria-haspopup, поскольку это правильный способ избежать проблемы с aria-controls в данном контексте. - person Adam; 24.11.2015