что такое пункт меню
В предыдущих уроках мы познакомились с понятием структуры сайта и создали необходимые категории, а так же создали свой первый материал в Joomla 3. После создания материала Вы наверно уже обратили внимание, что на сайте он не появился, оно и понятно ведь мы для этого ничего не предпринимали. Так как же выводить созданные материалы на страницах сайта? Все очень просто, для этих целей в Joomla как раз и предусмотрено меню именно с его помощью мы сможем отображать на страницах нашего сайта заранее созданные материалы и другую информацию. Таким образом, в данном уроке поговорим о меню в Joomla.
Для работы с меню в панели управления Joomla предусмотрен специальный раздел, который так и называется «Меню». Как попасть в панель управления (админку сайта) и где находится раздел «Меню» рассказывать не буду, об этом говорилось в одном из предыдущих уроков посвященном знакомству с админкой. На всякий случай ниже на скриншоте обозначен раздел «Меню»:
В разделе «Меню» по аналогии с материалами и категориями можно наблюдать «Менеджер меню» а так же все созданные пункты меню для сайта. Знакомство с меню предлагаю начать как раз с «Менеджера меню» Joomla, жмем по нему мышкой и попадаем на страницу «Менеджер меню: Все меню»:
Именно с этой страницы производятся все манипуляции с меню в Joomla, будь то создание, редактирование, копирование либо удаление. Давайте посмотрим, что содержится на странице менеджера меню. Тут все стандартно, примерно так же как в менеджере материалов или категорий. В верхней части имеются кнопки для работы с меню – создать, изменить, удалить, настройки и т.д. Слева кнопки быстрого доступа – меню и пункты меню. И наконец, в центральной части страницы отображаются все имеющиеся меню.
По умолчанию в Joomla уже создано одно единственное меню под названием «Main Menu», которое по умолчанию является главным, именно с него и начнем разбор полетов. Жмем по названию меню и попадаем на страницу пунктов меню – «Меню: Пункты (Main Menu)»:
На данной странице мы видим, что у нас имеется один единственный пункт меню под названием «Home», тут же видно, что он относится к «Main Menu», а так же отмечен как главный. Чтобы не запутаться, давайте разберем, что такое меню и что такое его пункты, чтоб не писать много букв я покажу это на примере (скриншот ниже):
Думаю, теперь стало понятно, что такое меню и что такое его пункты. Получается, по умолчанию в Joomla мы уже имеем главное меню (Main Menu), которое содержит один единственный пункт меню «Home» напротив которого стоит пометка, что он главный, следовательно, он ведет на главную страницу сайта. А теперь давайте рассмотрим устройство данного пункта меню и почему главная страница сайта пустая.
Редактирование пункта меню в Joomla
Для того чтобы отредактировать имеющийся пункт меню в Joomla необходимо нажать мышкой по его названию (в панели управления) после чего мы попадаем на страницу его редактирования.
Страница редактирования пункта меню не имеет особых отличий от страниц редактирования тех же материалов или категорий, так что сложностей тут быть не должно. Но есть и некоторые отличия, о которых стоит рассказать подробнее. На первой вкладке «Пункт меню» мы видим переключатель «Главная страница» и два варианта «Да» и «Нет». В нашем случае переключатель стоит в положение «Да» следовательно, данный пункт меню ведет на главную страницу сайта.
Следующий параметр «Тип пункта меню» именно он отвечает за то, что будет выводиться на странице сайта при нажатии на ссылку пункта меню. В нашем случае в качестве типа для пункта меню выбраны избранные материалы. Другими словами на главной странице сайта в нашем случае будут отображаться избранные материалы в виде блога (что такое избранные материалы и как они создаются, читайте в этой статье). А выглядит это примерно вот так:
Остальные вкладки в данном случае актуальны только для выбранного типа пункта меню, рассматривать их не будем. На данном этапе просто поменяем его название и сохраним результат. Для наглядности я добавил к одному из материалов свойство «избранного» получившийся результат представлен на скриншоте ниже.
Как отредактировать пункт меню разобрались, теперь давайте создадим новый собственный пункт меню.
Как создать собственный пункт меню в Joomla 3
Давайте разберем все по порядку. Изначально придумаем и заполним заголовок меню, я назвал его «Установка» (не спрашивайте почему). Далее заполняем алиас, можно конечно оставить без изменения, но в таком случае алиас получится такой – «ustanovka», мне этого не особо хочется, и я присвоил ему собственное название «installation».
Далее следует выбрать «Тип пункта меню», тут все сложнее, при нажатии на кнопку «Выбрать» вы увидите огромный список всевозможных типов, и этот список может увеличиваться в зависимости от установленных расширений. В рамках данного урока типы пункта меню рассматривать не будем, так как это достаточно обширная тема для разговоров и для них я решил выделить отдельные уроки (урок-1 и урок-2).
Для нашего нового типа меню давайте выберем список материалов категории, для этого жмем по кнопке «Выбрать» в списке находим раздел «Материалы» и выбираем «Список материалов категории».
Далее необходимо выбрать категорию, в которой содержатся интересующие нас материалы, в моем случае это «Установка» (что такое категория и как её создать читаем в этом уроке).
На этом можно было бы, и закончить, но нас еще интересуют поля, которые расположены в правой части. Итак, по порядку. Первое поле «Меню», тут мы указываем, к какому меню будет отнесен только что созданный пункт, мы решили, что данный пункт будет в главном меню – оставляем без изменения. Далее «Родительский элемент» если оставить все без изменений, то пункт меню будет корневым, а если в качестве родительского выбрать уже существующий пункт, то данный пункт будет дочерним, т.е. вложенным. Чтобы стало понятнее, сохраним меню сначала корневым, а затем вложенным. Результат можно посмотреть на скриншоте:
Как видим, в первом случае пункты меню являются корневыми, а во втором вложены друг в друга и появляется только тогда, когда активен корневой пункт меню.
Аналогичным образом создаются любые другие пункты меню на сайте, но для большего понимания сути вопроса предлагаю перейти к следующему уроку посвященному типам пунктов меню.
Забегая вперед, хочу обратить внимание, что в нашем случае меню получилось вертикальным, а такое отображение не всех устраивает. Как сделать горизонтальное меню читайте в уроке, посвященном редактированию шаблона Joomla 3.
пункт меню
пункт меню
—
[Интент]
Тематики
Смотреть что такое «пункт меню» в других словарях:
да (пункт меню) — — [Е.С.Алексеев, А.А.Мячев. Англо русский толковый словарь по системотехнике ЭВМ. Москва 1993] Тематики информационные технологии в целом EN yes … Справочник технического переводчика
Меню (элемент интерфейса пользователя) — Меню (англ. menu, фр. menu) элемент интерфейса пользователя, позволяющий выбрать одну (в простейшем случае) из нескольких перечисленных опций. В современных операционных системах меню является основным элементом графического интерфейса… … Википедия
меню (пользователя) — 1. Клавиша, позволяющая включить в работу индивидуальное меню пользователя. 2. Изображаемый на экране дисплея список команд или вариантов ответа, из которых пользователь выбирает необходимый вариант посредством указания на соответствующий пункт… … Справочник технического переводчика
Меню (информатика) — У этого термина существуют и другие значения, см. Меню (значения). Пример графического меню Меню (англ. menu … Википедия
меню — рос. меню англ. menu зображуваний на екрані дисплея список команд чи варіантів відповіді, з якого користувач вибирає необхідний варіант, вводячи номер чи букву або вказуючи на пункт меню курсором … Тлумачний словник з інформатики та інформаційних систем для економістів
Меню «Пуск» — Компонент Microsoft Windows Меню «Пуск» в … Википедия
Меню «Пуск» (Microsoft Windows) — Меню «Пуск» Компонент Microsoft Windows … Википедия
Меню «Пуск» — в Windows XP Главное меню системы Windows (Меню Пуск) меню Microsoft Windows, запускаемое нажатием кнопки «Пуск» на панели задач или нажатием клавиши с логотипом Windows на клавиатуре. Впервые появилось в Windows 95 Начиная с Windows XP, есть… … Википедия
Меню Пуск — в Windows XP Главное меню системы Windows (Меню Пуск) меню Microsoft Windows, запускаемое нажатием кнопки «Пуск» на панели задач или нажатием клавиши с логотипом Windows на клавиатуре. Впервые появилось в Windows 95 Начиная с Windows XP, есть… … Википедия
Пункт назначения (серия фильмов) — Пункт назначения Final Destination Жанр ужасы триллер фантастика Режиссёр Пункт назначения 1, 3 Джеймс Вонг Пунк … Википедия
Меню сайта
8 ноября 2017 Опубликовано в разделах: Азбука терминов. 29484
Они называются пунктами меню и могут обозначаться текстом или графическими значками — иконками.
Меню должно быть у каждого сайта. Оно дает возможность попасть из одного раздела на другой, узнать, какая еще есть информация, и что интересного можно почитать. Современный пользователь привык все получать быстро, и продуманные ориентиры на сайте — залог того, что он останется с вами дольше.
Главная задача разработчиков — оптимально проработать структуру и сделать удобную навигацию. Поэтому часто используют термин навигационное меню сайта в контексте его основного предназначения.
Виды меню сайта
Разные виды обозначают принцип организации меню на веб-сайте. Вот две основных разновидности, которые выделяют в зависимости от объема и задач ресурса:
Главное
Главное меню сайта, это то, что отображается в любых разделах ресурса, основное, верхнеуровневое. Но для крупных интернет проектов с множеством страниц одного уровня навигации недостаточно.
Второстепенное
В случае сложной структуры добавляют дополнительное меню второго уровня, или второстепенное.
По способу реализации выделяют:
В зависимости от ориентации и дизайна, используют горизонтальное и вертикальное меню для сайта.
Первое располагают, как правило, вверху. Может быть на прозрачном фоне, либо статично закрепленным.
Второе бывает левым либо правым, либо комбинацией обоих.
Варианты дизайна меню
Стили отвечают за внешний вид, то есть за то, как видим элементы мы с вами. Варианты оформления меню сайта:
Меню — один из важных структурных и навигационных элементов web-сайта. Оно должно обладать набором качеств и характеристик, удовлетворяющих потребности посетителей и решающих задачи интернет-ресурса.
Основные правила и ошибки
Роль меню в процессе продвижения сайта
На итоговые результаты выдачи в поиске могут влиять следующие критерии:
Как сделать меню сайта
Если вы владелец бизнеса, можете поучаствовать на этапе сбора и структурирования информации о вашем бизнесе и услугах. Нужно ориентироваться на основные сценарии взаимодействия покупателя с продуктом. Например, для магазина обязательны:
Техническая часть ляжет на программиста. Если сайт разрабатывают на базе cms и шаблона, вы изначально можете увидеть, как будет выглядеть ваше будущее меню, какого оно будет цвета.
Реализацию меню может быть разной, важно соблюдать принципы четкой структуры и понятной навигации. Это ускорит поиск информации и заодно улучшит поведенческие факторы вашего веб-ресурса.
Инклюзивные компоненты: меню и кнопки меню
Классифицировать сложно. Например, возьмём крабов. Раки-отшельники, веерные крабы и подковообразные крабы, с точки зрения таксономии, не настоящие крабы, но это не мешает использовать в их названиях слово «краб». Всё становится ещё запутаннее, когда через какое-то время благодаря процессу, называемому канцеризацией, ненастоящие крабы эволюционируют, чтобы больше походить на настоящих. Это то, что произошло с королевскими крабами, которые в прошлом были раками-отшельниками. Представьте размеры их раковин!
В дизайне мы часто совершаем такую же ошибку, когда называем разные вещи одинаковыми именами. Они кажутся похожими, но внешность может быть обманчивой. Это плохо сказывается на прозрачности вашей библиотеки компонентов. С точки зрения инклюзивности это может привести к тому, что вы измените нужную семантику и поведение компонента на совершенно противоположные. Пользователи будут ожидать одного поведения, а получат другое.
Выпадающие списки, которые состоят из нескольких пунктов, часто называют «меню». Об этом я и хочу поговорить в этой статье. Мы будем делать настоящее меню, но по пути обсудим их не совсем настоящие реализации.
Давайте начнём с вопроса: является ли блок ссылок с картинки, выпадающий вниз из панели навигации, меню?
Правильный ответ: нет, это не настоящее меню.
То, что навигационная схема состоит из списков или ссылок — давнее соглашение. Оно почти так же давно предписывает, что дополнительная навигация (sub-navigation) должна быть вложенными списками со ссылками. Если бы я удалил стили для компонента, показанного выше, я бы увидел что-то вроде этого списка ссылок, только с Times New Roman и синего цвета.
С точки зрения семантики вложенные списки со ссылками в этом контексте корректны. Системы навигации на самом деле оглавления: именно так они устроены. Единственное, что действительно заставляет думать, что перед нами меню — это стилизация вложенных списков и способ их отображения при наведении курсора или при фокусе.
Относительно второго пункта: при перемещении по области навигации в подменю ожидаешь, что каждое подменю будет появляться при наведении или при фокусе на ссылке верхнего уровня (например, «Магазин» из примера выше). Это одновременно показывает подменю и размещает ссылки в нём в порядке получения фокуса. С помощью JavaScript можно управлять событиями фокуса (focus) и его потери (blur) и сохранить внешний вид подменю пока это необходимо. При этом те, кто использует для навигации клавиатуру, должны иметь возможность переходить по очереди от одной ссылки каждого уровня к другой.
Проблема с навигационными подменю
Навигационные подменю (или для кого-то «выпадающие списки») отлично работают с мышью или с клавиатуры, но не так хороши для касаний. Когда вы в первый раз нажимаете на ссылку верхнего уровня «Магазин» из примера, то сообщаете, что надо открыть подменю и перейти по ссылке.
Здесь есть два возможных варианта решения проблемы:
Первое решение не самое хорошее. Я ранее замечал, что этот тип семантики и поведения нежелателен в данном контексте, где ссылки — это управляемые контролы (subject controls). Кроме того пользователи больше не смогут переходить на страницу верхнего уровня, если она есть.
Какие устройства — сенсорные?
Заманчиво думать: «Это не самое хорошее решение, но я применю его только для сенсорных интерфейсов». Проблема в том, как определить, есть ли у устройства сенсорный экран?
Вам точно не стоит относить любой «маленький экран» к разряду «экранов с сенсорным управлением». Работая в одном офисе с людьми, разрабатывающими сенсорные дисплеи для музеев, я могу заверить вас, что самые большие экраны — сенсорные. Не забывайте о ноутбуках с клавиатурой и сенсорным дисплеем.
К тому же многие, но далеко не все устройства небольшого размера являются сенсорными. В инклюзивном дизайне вы не можете позволить себе предполагать.
Второе решение более инклюзивное и надёжное. Это «фолбэк» для пользователей всех устройств. Но я специально взял в кавычки это слово, потому что думаю, что на самом деле постраничные оглавления — это лучший способ обеспечения навигации.
Похоже, получившая премию команда Government Digital Services с этим согласится. Вы также могли видеть такие оглавления в Wikipedia.
Оглавление
Примечания
Всё на одной странице
Примечание: в некоторых браузерах фокус плохо переносится на отдельные фрагменты страницы. Добавление tabindex=»-1″ к нужному фрагменту исправляет это.
В случае, если на сайте много контента, лучше тщательно продумывать информационную архитектуру с оглавлениями меню, чем делать ненадёжную и громоздкую систему выпадающих меню. Так будет легче сделать адаптивную версию страницы с меньшим количеством кода, а также это упростит восприятие её структуры. Там, где системы выпадающих меню скрывают структуру, оглавления обнажают её.
На некоторых сайтах, включая правительственный цифровой сервис gov.uk, есть страницы с указателями (или «темами»), которые представляют собой просто оглавления. Это настолько мощная концепция, что популярный генератор статических сайтов Hugo создаёт такие страницы по умолчанию.
Информационная архитектура — это важная часть инклюзивности. Плохо организованный сайт может соответствовать нужным вам техническим требованиям, но при этом будет отталкивать многих пользователей. Особенно это касается тех, у кого есть когнитивные нарушения или у кого мало времени на то, чтобы с чем-то долго разбираться.
Кнопки навигационного меню
Пока мы обсуждаем тему фальшивых навигационных меню, было бы упущением с моей стороны не поговорить про кнопки меню. Вы наверняка видели состоящую из трёх линий иконку-гамбургер или «navicon».
Даже с упрощённой информационной архитектурой и одним уровнем навигационных ссылок пространство на маленьких экранах на вес золота. Скрытие навигации за кнопкой означает, что во вьюпорте будет больше места для основного контента.
Кнопка навигации больше всего из того, что мы изучали, похожа на настоящую кнопку меню. Так как она открывает меню по клику, то она должна:
Прогрессивное улучшение
Давайте не будем забегать вперёд. Мы должны помнить о прогрессивном улучшении и подумать, как это будет работать без JavaScript.
В изначальном HTML-файле мало что можно сделать с помощью кнопок (кроме кнопок для отправки данных, но они даже близко не связаны с тем, что нам нужно сделать). Может быть, вместо этого, нам следует начать с простой ссылки, которая приведёт нас к навигации?
Нет особой необходимости использовать ссылку, если между ней и навигацией нет большого количества контента. Так как навигация сайта в большинстве случаев должна размещаться наверху страницы, то в этом решении нет необходимости. Так что, действительно, навигационное меню без JavaScript должно быть просто… навигацией.
Вы улучшите его, добавив кнопку, которая в исходном состоянии скрывает навигацию с помощью атрибута hidden :
Делать всё возможное для поддержки старого программного обеспечения — это, конечно, часть инклюзивного дизайна. Некоторый софт невозможно обновить или его разработчики не хотят этого делать.
Расположение
Многие неправильно размещают кнопку за пределами области (навигации). Это может привести к тому, что пользователи скринридеров, которые перемещаются по с помощью горячих клавиш, решат, что область пустая, что не особо им поможет. Со списком, скрытым от скринридеров, они просто столкнулись бы с этим:
Вот как мы можем переключить состояние:
ARIA-controls
Без хорошего метода перемещения между элементами, вам нужно убедиться в том, что одно из следующего верно:
Использование aria-controls на самом деле не приносит большого вреда, за исключением того, что делает объявления в скринридере более подробным. Однако некоторым пользователям JAWS это может быть нужно. Вот как будет использоваться атрибут вместе с id для списка:
Меню и роли menuitem
Настоящее меню (с точки зрения WAI-ARIA) должно себя идентифицировать с помощью роли menu (для контейнера) и, обычно, роли menuitem для дочерних элементов (или других ролей для подобных элементов). Эти роли для родителей и детей работают сообща и предоставляют вспомогательным технологиям нужную информацию. Вот как можно расширить список, добавив для него семантику меню:
Краткий ответ — нет. Более подробный ответ: нет, потому что наши элементы списка содержат ссылки, а элементы menuitem не могут иметь интерактивных потомков. То есть они являются контролами в меню.
Мы хотим, чтобы пользователи знали, что они используют ссылку и могут ожидать от неё поведения ссылки, так что пример выше не очень хороший. Как я уже сказал, настоящие меню предназначены для (написанных на JavaScript) приложений.
Примечание. Элемент
Если вы давно знакомы с адаптивным дизайном, то можете вспомнить паттерн, в котором навигация была свёрнута в элемент в небольших вьюпортах.
Как и в случае с переключателями на основе чекбоксов, которые мы обсуждали ( см. в переводе — прим. переводчика), использование нативного элемента, который ведёт себя не так, как задумано, без дополнительного скрипта, — хороший выбор. Особенно с точки зрения эффективности и производительности в случае мобильных устройств. Элементы — это своего рода меню, с семантикой, аналогичной меню, открывающееся кнопкой, которую мы скоро будем создавать.
Однако, так же как и с переключателем, основанном на чекбоксе, мы используем элемент, связанный со вводом данных, а не просто делаем выбор. Это может запутать многих пользователей, тем более, что этот шаблон использует JavaScript, чтобы выбранный элемент вёл себя как ссылка. Неожиданное изменение контекста, которое это вызывает, считается ошибкой согласно критерию 3.2.2 On Input (Level A).
Настоящие меню
Теперь, когда мы обсудили ненастоящие меню и квази-меню, пришло время создать настоящее меню, которое открывается и закрывается настоящей кнопкой меню. С этого момента я буду называть вместе кнопку и меню — «кнопкой меню».
Но в каком случае наша кнопка меню может считаться настоящей? Что ж, это будет компонент меню, предназначенный для выбора параметров в приложении, который предусматривает всю нужную семантику и стандартное поведение для такого инструмента.
Как я уже упоминал, эти соглашения пришли из дизайна десктопных приложений. ARIA-атрибуты и управление фокусом с помощью JavaScript необходимы для их полной имитации. Одна из целей ARIA — помочь веб-разработчикам создавать сложные веб-интерфейсы и не нарушать при этом устоявшие паттерны взаимодействия, пришедшие из реального мира.
В этом примере мы представим, что наше приложение — это какая-то игра или викторина. Наша кнопка меню даёт пользователю выбрать уровень сложности. С учётом всей семантики меню выглядит следующим образом:
Примечания
Клавиатура и поведение при фокусе
Есть намного больше способов взаимодействовать с кнопкой с клавиатуры. Вот краткий обзор поведения при фокусе с клавиатуры, которое мы будем реализовывать на основе WAI-ARIA Authoring Practices 1.1:
Преимущество перемещения фокуса между пунктами меню с помощью клавиш со стрелками состоит в том, что за Tab сохраняется функция выхода из меню. На практике это означает, что пользователям не нужно проходить через каждый пункт меню, чтобы выйти из меню. Это значительно улучшает юзабилити, особенно в меню, где много пунктов.
Добавление tabindex=»-1″ к пунктам меню делает их недоступными для фокуса с помощью Tab, но сохраняет возможность фокуса на элементах при нажатии на клавиши со стрелками.
Метод open
Мы можем создать методы для обработки различных событий как часть продуманного дизайна API.
Мы можем исполнить этот метод, когда пользователь нажимает клавишу вниз на кнопке меню, на которой сделан фокус:
Кроме того, разработчик, использующий этот скрипт, сможет теперь программно открывать меню:
Примечание. Хак с чекбоксом
Если вам не нужен JavaScript, то лучше не использовать его настолько, насколько это возможно. Использование третьей технологии поверх HTML и CSS всегда усложняет систему и приводит к появлению в ней слабых мест. Однако не все компоненты можно создать без использования JavaScript.
В случае с кнопками меню желание сделать их «работающими без JavaScript» привело к появлению так называемого хака с чекбоксом. В нём состояние checked (или unchecked ) скрытого чекбокса используется для переключения видимости элемента меню с помощью CSS.
Для пользователей скринридеров роль чекбокса и состояние checked бессмысленны в этом контексте. Это можно частично исправить, добавив role=»button» для чекбокса.
Это разумное решение, но работа над нашей кнопка меню всё ещё не закончена. Ожидаемое поведение фокуса, которое мы обсудили, просто не может быть реализовано без JavaScript.
Такое поведение принято и предсказуемо, оно делает кнопку более удобной. Однако, если вам действительно нужно сделать кнопку меню без JavaScript, то это самый подходящий вариант. Учитывая то, что урезанная кнопка навигационного меню, которую я рассмотрел ранее, предлагает контент меню, который не зависит от самого JavaScript (то есть ссылки), этот подход может быть подходящим вариантом.
Примечание: меню открывает только пробел.
Событие choose
Есть много всего, что мы можем сделать с помощью этого механизма. Возможно, у нас есть live region с id со значением menuFeedback :
Теперь мы можем настроить обработчик событий и заполнить live region информацией, скрытой внутри события:
При выборе пункта меню пользователь скринридера услышит: «Вы выбрали [название пункта меню]». Изменения контента live region (которому задан здесь атрибут role=»alert» ) объявляются скринридерами при каждом его обновлении. Live region не является обязательным, но это пример того, что может произойти в интерфейсе, когда пользователь сделал выбор в меню.
Сохранение выбора
Не все пункты меню нужны для выбора сохранения настроек. Многие из них ведут себя как стандартные кнопки, которые при нажатии приводят к тому, что что-то происходит в интерфейсе. Однако, в случае с нашей кнопкой меню со сложностью, мы хотели бы указать текущую настройку сложности. То есть ту, которая выбрана последней.
В нативных меню на многих платформах выбранные элементы отмечаются с помощью галочек. Мы можем это без проблем сделать, используя чуть больше CSS:
При перемещении по меню с запущенным скринридером при фокусе на этом выбранном элементе он объявит что-то вроде: «Галочка, средний, пункт меню, выбрано».
Поведение при открытии меню с выбранным menuitemradio немного отличается. Вместо того, чтобы сделать фокус на первом (включённом) элементе в меню, фокус устанавливается на выбранном элементе.
Какая польза от такого поведения? Пользователь (любой) помнит о своём предыдущем выборе. В меню с многочисленными параметрами (например, с масштабом), люди, работающие на клавиатуре, находятся в оптимальном положении для изменения настроек.
Использование кнопки меню с помощью скринридера
Расшифровка
Хейдон: Это кнопка меню со сложностью и я собираюсь протестировать её на VoiceOver в Chrome. Для начала я сделаю фокус на самой кнопке.
VoiceOver: Сложность, всплывающая кнопка.
VoiceOver: Галочка, очень сложно, пункт меню, выбран, меню, пять пунктов.
VoiceOver: Очень высокая, пункт меню.
Хейдон: На этот раз вы услышали только подпись и роль элемента, потому что он очевидно не выбран. Для того, чтобы выбрать этот пункт, я нажимаю кнопку Enter.
VoiceOver: Сложность, всплывающая кнопка.
Хейдон: Это закрывает меню и перемещает фокус на саму кнопку меню «Сложность». Итак, вы вернулись туда, откуда начали.
Инклюзивная кнопка меню на Github
Я и Хьюго Жирадель вместе работали над созданием компонента кнопки меню с фичами API, которые я описал, и ещё многим другим. Вы должны поблагодарить Хьюго за многие из этих фич, так как они основывались на работе над a11y-dialog — доступным модальным окном. Он есть на Гитхабе и в npm.
Кроме того, Хьюго сделал специально для вас версию кнопки на React.