Короткий ответ
Вам не нужно добавлять role="application", если вы настроили меню как модальные диалоги. С другими шаблонами это может быть применимо (очень маловероятно, role="application" - очень специализированная роль), но в этот момент вы, вероятно, изначально реализовали неправильный шаблон.
Более длинный ответ
Шаблон l oop хорош, если он реализован правильно (и target.com проделал довольно хорошую работу)
В этом нет ничего плохого шаблон, если он реализован правильно (который target.com, кажется, на удивление неплохо справляется с этой задачей, всего несколько вещей, которые они могли бы сделать лучше).
Используя 'target' в качестве примера, вы заметите что, когда вы нажимаете, например, «категории», открытое меню фактически обрабатывается как модальный диалог.
Он имеет role="dialog", а «кнопка», которая его открывает, имеет aria-expanded.
Они также захватывают фокус табуляции в этом модальном окне и предоставляют кнопку «закрыть», которая появляется внизу списка, если вы используете клавишу табуляции.
Пока все хорошо, ничего плохого в цикле внутри модального окна диалог, поскольку это ожидаемое поведение.
Они также понимают некоторые другие вещи правильно, когда «диалог» открыт, вы не можете получить доступ к любому другому контенту. Например, в программе чтения с экрана вы можете нажимать клавиши 1–6, чтобы найти следующие уровни заголовков, вы не можете этого сделать, пока меню открыто, поскольку они применяют aria-hidden="true" ко всему вне модального меню (настоящая модальная ловушка).
Также вы можете закрыть модальное меню, и фокус будет возвращен элементу меню, который открыл его в первую очередь, поэтому они тоже правильно управляют фокусом.
Наконец, вы можете закрыть модальное меню с помощью клавиша Escape , что также является ожидаемым поведением.
Итак, если вы хотите следовать этому шаблону для своих меню, я бы сказал go для него, они доступны, как есть, и Пользователь программы чтения с экрана не будет бороться с ними.
Что мы можем сделать лучше, чем target.com
Target правильно поняла основы, им просто не хватает нескольких ключевых шагов.
«Кнопка», открывающая меню, должна иметь атрибут aria-controls, чтобы правильно связать все вместе.
Пункты меню в диалоговых окнах меню должны иметь <nav> элементов aro и <ul> (хотя возможно, поскольку эти модальные окна должны быть доступны только через кнопку меню, эта связь подразумевается, и это второстепенный момент).
Спрайты стрелок, которые они используют, имеют focusable="false", что хорошо, но они не добавляли role="presentation" или еще лучше aria-hidden="true", поэтому они будут объявлены, если ваше средство чтения с экрана настроено на подробный. (aria-hidden="true" предпочтительнее, так как поддержка лучше).
Сами меню не должны быть многоуровневыми. то есть, если вы нажмете «главное меню» вверху списка, тогда станет непонятно, где вы находитесь, я все еще в модальном диалоговом окне? Кроме того, это реализовано таким образом, что он не объявляет первый элемент в списке «главного меню», когда вы переходите по ссылке (возможно, проблема с синхронизацией?), Поэтому это дезориентирует. Это самая большая проблема с их реализацией .
Есть и другие вещи, но вы понимаете, что если ваше меню представляет собой всего лишь один список на «раскрывающийся» (модальный) способ это реализовано, вполне приемлемо, удобно и лучше, чем многие реализации меню, которые я видел.
Так что мне следует использовать role="application"
Нет.
Серьезно вероятно, никогда не понадобится использовать это в течение вашей карьеры, и его использование может сильно нарушить доступность.
О, вы хотите подробнее? Нет проблем!
Нет, вам не нужно использовать role="application" здесь, на самом деле вы создадите гораздо больше проблем с доступностью, сделав это.
role="application" подразумевает что все элементы управления являются настраиваемыми, и вам следует игнорировать стандартные элементы управления веб-сайта. (вы в основном говорите пользователю / программе чтения с экрана: «Относитесь к этому как к настольному приложению, где сочетания клавиш будут объяснены через меню et c. 'и' ожидают странного поведения, не связанного с веб-сайтами, не полагайтесь на свои обычные сочетания клавиш, поскольку они, вероятно, не будут работать ')
Так как это соответствует стандартному веб-шаблону (захват фокуса в модальном ) добавление role="application" на самом деле запутает людей.
Вы упомянули о цикле Tab , но внутри списка он работает так, как ожидалось (нажатие стрелки вниз в конце списка не приводит к l oop), поэтому цикл Tab происходит только в модальном окне.
Я думаю, что следующая цитата для страницы, на которую я указал role="application", суммирует важную информацию. Я выделил жирным шрифтом ключевые моменты, относящиеся к вашему вопросу, и добавил комментарии после них, если это необходимо.
Роль приложения указывает вспомогательным технологиям, что эта часть веб-контента содержит элементы которые не соответствуют любому другому известному элементу HTML или виджету WAI-ARIA . Любая особая интерпретация структур и виджетов HTML должна быть приостановлена, а управление должно быть полностью передано браузеру и веб-приложению для обработки взаимодействия с мышью, клавиатурой или сенсорным экраном.
В этом режиме веб-автор несет полную ответственность за обработку любого ввода с клавиатуры, управление фокусом и другие взаимодействия и не может предполагать, что вспомогательные технологии будут выполнять какую-либо обработку на своей стороне .
Так что, если вы добавите role="application", вы не получите нативного поведения любого элемента, это потребует много работы! (на практике большинство программ чтения с экрана по-прежнему поддерживают базовую c функциональность, но они делают это, потому что люди злоупотребляют role="application")
Если веб-приложение, охватываемое ролью приложения , содержит части, которые следует рассматривать как обычный веб-контент, следует использовать роль документа или статьи .
Таким образом, вам нужно будет добавить role="article" или role="document" в списки, кнопки закрытия et c. По сути, в любом случае все это будет иметь role="article" (поскольку это будет наиболее подходящая роль).
Если вы не создаете очень сложное программное обеспечение, role="application" не следует использовать.