что такое button switch
button switch
Смотреть что такое «button switch» в других словарях:
button switch — mygtukinis jungiklis statusas T sritis automatika atitikmenys: angl. button switch; press button switch; push button switch vok. Druckknopfschalter, m; Drucktastenschalter, m rus. кнопочный выключатель, m pranc. interrupteur à bouton poussoir, m; … Automatikos terminų žodynas
press-button switch — mygtukinis jungiklis statusas T sritis automatika atitikmenys: angl. button switch; press button switch; push button switch vok. Druckknopfschalter, m; Drucktastenschalter, m rus. кнопочный выключатель, m pranc. interrupteur à bouton poussoir, m; … Automatikos terminų žodynas
push-button switch — mygtukinis jungiklis statusas T sritis automatika atitikmenys: angl. button switch; press button switch; push button switch vok. Druckknopfschalter, m; Drucktastenschalter, m rus. кнопочный выключатель, m pranc. interrupteur à bouton poussoir, m; … Automatikos terminų žodynas
press-button switch — mygtukinis perjungiklis statusas T sritis radioelektronika atitikmenys: angl. press button switch vok. Druckknopfumschalter, m rus. кнопочный переключатель, m pranc. commutateur bouton poussoir, m … Radioelektronikos terminų žodynas
Switch — For other uses, see Switch (disambiguation). Electrical switches. Top, left to right: circuit breaker, mercury switch, wafer switch, DIP switch, surface mount switch, reed switch. Bottom, left to right: wall switch (U.S. style), miniature toggle… … Wikipedia
button — [n1] fastener catch, clasp, fastening, frog, knob, stud; concepts 445,471 button [n2] pushbutton adjuster, dial, knob, on/off, power switch, switch, toggle, tuner; concept 201 … New thesaurus
switch blade knife — switch|blade «SWIHCH BLAYD», noun, or switch blade knife, a pocketknife with a blade that springs out at the push of a button or knob on the handle: »A large quantity of guns and switchblade knives were scooped up by police (Birmingham News) … Useful english dictionary
switch|blade — «SWIHCH BLAYD», noun, or switch blade knife, a pocketknife with a blade that springs out at the push of a button or knob on the handle: »A large quantity of guns and switchblade knives were scooped up by police (Birmingham News) … Useful english dictionary
switch on — verb cause to operate by flipping a switch (Freq. 5) switch on the light turn on the stereo • Syn: ↑turn on • Ant: ↑switch off • Hypernyms: ↑ … Useful english dictionary
button — <
switch — <
button switch
Смотреть что такое «button switch» в других словарях:
button switch — mygtukinis jungiklis statusas T sritis automatika atitikmenys: angl. button switch; press button switch; push button switch vok. Druckknopfschalter, m; Drucktastenschalter, m rus. кнопочный выключатель, m pranc. interrupteur à bouton poussoir, m; … Automatikos terminų žodynas
press-button switch — mygtukinis jungiklis statusas T sritis automatika atitikmenys: angl. button switch; press button switch; push button switch vok. Druckknopfschalter, m; Drucktastenschalter, m rus. кнопочный выключатель, m pranc. interrupteur à bouton poussoir, m; … Automatikos terminų žodynas
push-button switch — mygtukinis jungiklis statusas T sritis automatika atitikmenys: angl. button switch; press button switch; push button switch vok. Druckknopfschalter, m; Drucktastenschalter, m rus. кнопочный выключатель, m pranc. interrupteur à bouton poussoir, m; … Automatikos terminų žodynas
press-button switch — mygtukinis perjungiklis statusas T sritis radioelektronika atitikmenys: angl. press button switch vok. Druckknopfumschalter, m rus. кнопочный переключатель, m pranc. commutateur bouton poussoir, m … Radioelektronikos terminų žodynas
Switch — For other uses, see Switch (disambiguation). Electrical switches. Top, left to right: circuit breaker, mercury switch, wafer switch, DIP switch, surface mount switch, reed switch. Bottom, left to right: wall switch (U.S. style), miniature toggle… … Wikipedia
button — [n1] fastener catch, clasp, fastening, frog, knob, stud; concepts 445,471 button [n2] pushbutton adjuster, dial, knob, on/off, power switch, switch, toggle, tuner; concept 201 … New thesaurus
switch blade knife — switch|blade «SWIHCH BLAYD», noun, or switch blade knife, a pocketknife with a blade that springs out at the push of a button or knob on the handle: »A large quantity of guns and switchblade knives were scooped up by police (Birmingham News) … Useful english dictionary
switch|blade — «SWIHCH BLAYD», noun, or switch blade knife, a pocketknife with a blade that springs out at the push of a button or knob on the handle: »A large quantity of guns and switchblade knives were scooped up by police (Birmingham News) … Useful english dictionary
switch on — verb cause to operate by flipping a switch (Freq. 5) switch on the light turn on the stereo • Syn: ↑turn on • Ant: ↑switch off • Hypernyms: ↑ … Useful english dictionary
button — <
switch — <
button switch
switch key — переключатель
mode switch — переключатель режима
bit switch — разрядный переключатель
byte switch — байтовый переключатель
diode switch — диодный переключатель
Смотреть что такое «button switch» в других словарях:
button switch — mygtukinis jungiklis statusas T sritis automatika atitikmenys: angl. button switch; press button switch; push button switch vok. Druckknopfschalter, m; Drucktastenschalter, m rus. кнопочный выключатель, m pranc. interrupteur à bouton poussoir, m; … Automatikos terminų žodynas
press-button switch — mygtukinis jungiklis statusas T sritis automatika atitikmenys: angl. button switch; press button switch; push button switch vok. Druckknopfschalter, m; Drucktastenschalter, m rus. кнопочный выключатель, m pranc. interrupteur à bouton poussoir, m; … Automatikos terminų žodynas
push-button switch — mygtukinis jungiklis statusas T sritis automatika atitikmenys: angl. button switch; press button switch; push button switch vok. Druckknopfschalter, m; Drucktastenschalter, m rus. кнопочный выключатель, m pranc. interrupteur à bouton poussoir, m; … Automatikos terminų žodynas
press-button switch — mygtukinis perjungiklis statusas T sritis radioelektronika atitikmenys: angl. press button switch vok. Druckknopfumschalter, m rus. кнопочный переключатель, m pranc. commutateur bouton poussoir, m … Radioelektronikos terminų žodynas
Switch — For other uses, see Switch (disambiguation). Electrical switches. Top, left to right: circuit breaker, mercury switch, wafer switch, DIP switch, surface mount switch, reed switch. Bottom, left to right: wall switch (U.S. style), miniature toggle… … Wikipedia
button — [n1] fastener catch, clasp, fastening, frog, knob, stud; concepts 445,471 button [n2] pushbutton adjuster, dial, knob, on/off, power switch, switch, toggle, tuner; concept 201 … New thesaurus
switch blade knife — switch|blade «SWIHCH BLAYD», noun, or switch blade knife, a pocketknife with a blade that springs out at the push of a button or knob on the handle: »A large quantity of guns and switchblade knives were scooped up by police (Birmingham News) … Useful english dictionary
switch|blade — «SWIHCH BLAYD», noun, or switch blade knife, a pocketknife with a blade that springs out at the push of a button or knob on the handle: »A large quantity of guns and switchblade knives were scooped up by police (Birmingham News) … Useful english dictionary
switch on — verb cause to operate by flipping a switch (Freq. 5) switch on the light turn on the stereo • Syn: ↑turn on • Ant: ↑switch off • Hypernyms: ↑ … Useful english dictionary
button — <
switch — <
Инклюзивные компоненты: переключатели
Некоторые вещи либо включены, либо выключены. Когда что-то не включено, то оно обязательно выключено, и наоборот. Эта идея настолько элементарна, что я всё усложнил этим объяснением. Однако не все переключатели одинаковы: хотя они выполняют простые функции, их практическое применение и формы сильно различаются.
В этой статье я объясню, как сделать переключатели инклюзивными (включающими, доступными для всех, прим. редактора). Нет единого способа решения этой проблемы, как и в случае любого другого компонента, особенно когда подобные контролы рассматриваются в разных контекстах. Многое можно испортить или просто забыть сделать, так что попробуем этого избежать.
Изменение состояния
Если веб-приложение не изменилось так, как ожидал пользователь, такое взаимодействие будет негативным. При этом возможность моментально изменять содержимое страниц, без их обновления, существовала не всегда.
К сожалению, в какой-то момент мы решили, что доступными страницами были те, где мало что происходит: это статические документы, созданные только для чтения. То есть мы прикладывали мало усилий для того, чтобы сделать взаимодействие с ними более богатым, с сохранением выбора для пользователей.
Есть распространённое заблуждение о том, что скринридеры не понимают JavaScript. Это совершенно неверно. Все популярные скринридеры реагируют на изменения в DOM по мере их возникновения. Но изменения основных состояний (визуально и для вспомогательных технологий) не обязательно связаны с JavaScript.
Чекбоксы и радиокнопки
Элементы форм — базовые элементы страниц. Когда мы не используем их напрямую, то всё равно должны уделять пристальное внимание тому, как они себя ведут. Проработка смены состояний у таких элементов установлена принципами юзабилити, которыми глупо было бы пренебрегать.
В принципе, нативный с типом checkbox идеально подходит для любых ситуаций, когда нужно что-то включить или выключить. Он обладает всеми основными составляющими доступного контрола при наличии правильного : к нему есть доступ у скринридера и клавиатуры на разных платформах и устройствах. Об изменении его состояния с «установлен» ( checked) на «не установлен» ( unchecked) и наоборот сообщается сразу же.
В примере ниже с помощью чекбокса можно включить или выключить уведомления по электронной почте.
При выборе чекбокса большинство скринридеров сразу же объявит, что состояние изменилось на «установлен» (иногда повторяя информацию о содержимом и роли). Состояние элемента будет обработано без использования JavaScript, а скринридер сообщит пользователю информацию об изменениях контрола.
Примечание: скринридеры нужны не только слепым
Некоторые работают со скринридерами, чтобы было легче понять интерфейс. У других может быть дислексия или низкий уровень грамотности. Есть даже те, у кого имеются незначительные физические или когнитивные проблемы, затрудняющие понимание интерфейса, и кто просто иногда хочет, чтобы им читали вслух.
Поддержка скринридеров — это поддержка скринридеров, а не только слепых пользователей. Это инструменты для большого числа разных людей, которым нравится ими пользоваться.
В Windows, когда пользователь установил фокус на первом контроле, скринридеры JAWS и NVDA добавляют заголовок группы к отдельному этого контрола и считают количество радиокнопок в группе. NVDA ещё добавляет термин «группировка», чтобы стало более очевидно, что это группа радиокнопок. В примере выше фокус сделан на первой (выбранной по умолчанию) радиокнопке. Скринридеры сделают из этого такой вывод: «Уведомлять по почте, группировка, переключатель выделен, один из двух».
Несмотря на то, что выбран первый элемент (некоторые скринридеры объявят «выделено»), пользователь может переключаться между ним и второй радиокнопкой. «Включить» и «выключить» — это два возможных, если хотите, лексических состояния у такого составного контрола.
Примечание: стилизация элементов форм
Печально известно, что элементы форм сложно стилизовать. Однако есть хорошо поддерживаемые CSS-техники для стилизации радиокнопок и чекбоксов, которые я описал в «Replacing Radio Buttons Without Replacing Radio Buttons». Если нужны советы о том, как стилизовать контролы и поля для загрузки файлов, посмотрите гайдлайн «WTF Forms?» Марка Отто.
Что-то здесь не так
Логично реализовывать контролы, которые что-то включают и выключают, в виде чекбоксов и радиокнопок. Они доступны для мыши, сенсорных дисплеев, клавиатуры и вспомогательных технологий на разных устройствах, в браузерах и в операционных системах.
Но доступность — это лишь одна из частей инклюзивного дизайна. Эти контролы также должны иметь смысл для пользователей и восприниматься ими однозначно.
Одна из проблем элементов форм — их давняя связь со сбором данных. То есть чекбоксы и радиокнопки воспринимаются как контролы для установки значений. Когда пользователь устанавливает чекбокс, он просто переключает состояние, но также ему может показаться, что он выбирает значения для отправки на сервер.
Будь то зрячий пользователь, который видит чекбокс, или пользователь скринридера, который слышит информацию об элементе, поведение такого контрола сложно предсказать. Мы ожидаем, что переключатель — это кнопка, а чекбокс и радиокнопка на самом деле части формы.
Настоящий переключатель
Типовая кнопка — это твой ключевой элемент для изменения чего угодно в интерфейсе (используя JavaScript и без обновления страницы). Кроме случаев, когда нужно переместиться внутри одной страницы или перейти на другую. Это уже задача ссылок.
Кнопки, как и ссылки — это интерактивные элементы, которые стоит активно использовать в веб-приложениях. У них уже есть роль button и они по умолчанию доступны для клавиатуры и скринридера. И, в отличие от элементов форм, их просто стилизовать.
Так как нам сделать переключателем? Это ситуация, в которой потребуется WAI-ARIA как часть прогрессивного улучшения. Состояний из WAI-ARIA нет в базовом HTML, например, состояния «нажата» (pressed). Представьте себе кнопку включения компьютера. Когда она нажата, то компьютер включён, когда не нажата, то компьютер должен быть выключен.
Более очевидное состояние
Интересное происходит, когда на кнопку с атрибутом aria-pressed наталкиваются какие-то скринридеры: они определяют её как «переключатель» или, в некоторых случаях, «кнопка нажата». Наличие атрибута состояния изменяет сущность кнопки.
Когда скринридер NVDA сделает фокус на кнопке с aria-pressed=»true» из примера, он объявит: «Уведомлять по почте, переключатель, включено». Состояние «включено» ( pressed) подходит в данном случае больше, чем «установлено» ( checked). Плюс мы избегаем неоднозначного понимания контрола. Когда по кнопке кликнут, то сразу же будет объявлено «отключено».
Стилизация
Мы выполняем важную часть работы над дизайном и создаём разные вещи для веба с помощью HTML. Я уверен, что если вы создаёте Первый HTML-прототип™, то можете быть уверены в том, что у вас есть надёжная основа для продукта с фирменным стилем.
В случае с нашим переключателем в его основе лежат семантика и поведение, которые делают кнопку совместимой с разными типами ввода данных (например, с программой активации голосом) и их вывода (например, со скринридером) на разных устройствах. Это возможно благодаря HTML. CSS необходим, чтобы сделать управление интерфейсом понятным визуально.
Форма должна соответствовать определённым функциям, чего просто добиться в CSS: всё, что в нашем HTML добавляет для кнопки функцию простого переключателя, также можно использовать для придания ему определённого внешнего вида.
В согласованных и, поэтому, лёгких для понимания интерфейсах, кнопки должны иметь конкретный внешний вид и выглядеть как кнопки. Так что стили нашего базового переключателя, вероятно, должны наследоваться от блочного элемента button :
Примечание: это лишь один из многих методов стилизации такой кнопки. Вы можете найти что-то более очевидное, вроде использования текста «включить» и «выключить» как в следующем примере. Это будет понятно большинству пользователей.
Примечание: не полагайтесь только на цвет
«Включить» часто обозначается зелёным цветом, а «выключить» — красным. Это общепринятое соглашение, и нет ничего плохого в том, чтобы следовать ему. Однако будьте осторожны, когда используете только цвет для описания двух состояний кнопки. В этом случае дальтоники не заметят разницы между ними.
Стили фокуса
Это важно для кнопок, как и для всех других интерактивных элементов, у которых есть стили фокуса. Если их не будет, то люди, которые используют клавиатуру для навигации, не увидят какой элемент выбран и что с ним можно взаимодействовать.
Изменение подписей
В дизайне предыдущего переключателя есть отдельная и уникальная подпись к нему. Разница между двумя состояниями зависит от изменений в атрибуте, которые влияют и на его стиль. Что если нам понадобится сделать кнопку, текст которой изменится с «включён» на «выключен» или с «пауза» на «воспроизведение»?
Это очень просто сделать на JavaScript, но есть пара нюансов, которые нужно учесть.
В примере с предыдущим переключателем подпись к нему описывает, что именно будет включено или выключено. Там, где не указано, что включается и выключается, сразу же возникает путаница: нужно ли после того, как я нажал на кнопку и включил что-то, снова на неё нажать, чтобы опять это выключить?
В соответствии с правилом большого пальца (это общее правило, которое основано на практическом опыте и почти всегда работает — прим. переводчика) никогда не нужно изменять одновременно состояние «нажата» и текст кнопки. Если текст изменился, то и состояние кнопки тоже в некотором смысле изменилось, но не благодаря явному управлению состоянием с помощью WAI-ARIA.
В примере ниже изменяется только текст кнопки.
Проблема этого метода заключается в том, об изменениях в тексте не объявляется в тот же момент, когда они происходят. Поэтому, когда вы кликаете по кнопке воспроизведения, нет сообщения о том, что она «нажата». Вместо этого вам нужно сначала вручную убрать с неё фокус, а потом выбрать снова, чтобы услышать, что она изменилась. Для зрячих пользователей это не составит труда, но вызовет неудобства у слепых.
Часто у кнопок воспроизведения и паузы изменяются иконки: значок воспроизведения (треугольник, стоящий на одной из граней) заменяется на значок паузы (две вертикальные линии). Мы могли бы при этом сохранить скрытый текст кнопки и одновременно изменить состояние элемента.
Так как атрибут aria-label перезаписывает содержание текстового узла, в котором находятся символы Юникода, то кнопка паузы будет объявлена так: «Воспроизведение, кнопка не нажата». И, в случае с кнопкой воспроизведения, скринридер произнесёт: «Воспроизведение, кнопка нажата».
Это везде хорошо работает, кроме случаев, когда идёт речь о распознавании речи и голосовом управлении. В режиме распознавания речи обычно нужно произносить названия кнопок вслух. И, если пользователь увидел кнопку паузы, то его первой мыслью будет произнести «пауза», а не «воспроизведение». Поэтому более надёжный способ — это изменение подписей к элементам, а не переключение их состояния.
Добавление дополнительных подписей
В некоторых случаях может понадобиться добавить в переключатель слова «включить» и «выключить». Нужно убедиться в том, что есть чёткая связь между каждым переключателем и соответствующей ему дополнительной подписью.
Представьте настройки уведомления по почте, которые сгруппированы в один список вместе с похожими настройками. Каждый элемент списка содержит описание настройки и выглядит как переключатель. Выражения «включён» и «выключен» — это часть их дизайна. Некоторые элементы тут нужны для стилизации.
Преимущество списка заключается в том, что как видимые, так и скрытые элементы группируются вместе, поэтому видна связь между ними. Списки не только помогают понять взаимосвязь элементов, но и полезны для некоторых скринридеров, которые могут быстро перемещаться как внутри одного списка, так и между несколькими. Например, в JAWS есть горячие клавиши для списков (L) и элементов списков (I).
Каждая кнопка и подпись к ней связаны общим элементом списка. Однако отсутствие явного и уникального — это опасная ситуация, особенно в тех случаях, когда включён режим распознавания речи. Мы можем связать каждую кнопку с текстом элементов списка, используя атрибут aria-labelledby :
Роль switch
Как вы будете стилизовать активное состояние контрола зависит от вас. Лично я бы не тратил время на запись классов для с помощью JavaScript. Вместо этого лучше использовать пару CSS-псевдоклассов для поиска элементов с нужными состояниями.
Перемещаясь по настройкам
Давайте сейчас поговорим о навигации по этому блоку с настройками, используя два разных способа: с помощью клавиши Tab (перемещаясь только по элементам с фокусом) и с помощью скринридера (проходя через каждый элемент).
Примечание: поддержка switch
Любопытно, что NVDA определяет кнопку с role=»switch» и aria-checked=»true» как переключатель, если она нажата. Так как включение и выключение и нажатие и не нажатие равносильны, это вполне допустимо (хотя немного не соответствует ожиданиям).
Однако большинство скринридеров объявит, что вы находитесь в списке из четырёх пунктов и в данный момент выбран первый из них: полезная информация о контексте. Принцип работы примерно такой же, как у заголовка группы элементов, о котором я упоминал выше.
Когда вы перемещаетесь от пункта к пункту (например, с помощью клавиши со стрелкой вниз, когда NVDA включён), будет объявлено всё, что встретится на пути, в том числе заголовки ( «уведомления, заголовок второго уровня»). Конечно, когда перемещаешься по странице таким образом, текст «уведомлять по почте» объявляется как отдельно, так и вместе с соседней кнопкой. В какой-то степени это повтор, но в данном случае он имеет смысл: «здесь название настройки, а вот здесь её можно включить или выключить».
Проблема того, насколько явно нужно связать элементы управления с объектами, которыми они управляют, это один из аспектов UX-дизайна, и ему нужно уделить пристальное внимание. В случае, рассмотренном в этом посте, мы сохраняем наш классический переключатель для зрячих пользователей, при этом не запутывая и не вводя в заблуждение пользователей скринридеров вне зависимости от того, какой режим работы клавиатуры они используют. Это достаточно надёжное решение.
Заключение
Какой дизайн вы выберите и каким образом реализуете переключатели — это ваше дело. Но, надеюсь, вы вспомните этот пост, когда придёт время добавить подобный контрол в вашу библиотеку компонентов. Не вижу причин для того, чтобы переключатели или любой другой элемент интерфейса стали препятствием для пользователей, как это часто бывает.
Вы можете изучить здесь основы и добавить разные штрихи в свой дизайн, включая анимацию. Но, в первую очередь, важно заложить прочный фундамент.