Что такое переключатель в информатике

Полная или частичная перепечатка каким бы то ни было способом материалов данного сайта допускается только с письменного согласия автора.
При цитировании или ином использовании материалов ссылка на сайт www.klyaksa.net обязательна.

Всегда поступай правильно. Это доставит удовольствие некоторым и удивит всех. Учимся программировать! Конспекты школьника. www.klyaksa.net Использование переключателей и флажков Давайте теперь создадим проект, в котором предоставим пользователю возможность выбора тех или иных действий. Для этих целей будем использовать такие компоненты как флажок и переключатель. Флажки — это элементы управления, которые можно отмечать (ставить «галочку»), выбирая из ряда опций одну или несколько. CheckBox может иметь два различных состояния — отмеченное и не отмеченное. Создадим проект, предназначенный либо для добавления текстовой информации в файл, либо для её перезаписи. С помощью переключателей пользователь будет иметь выбор между добавлением в конец файла и перезаписью. Флажок будет предоставлять возможность очистить поле ввода после операции. Запустите VisualBasic. Создайте новый стандартный проект. Добавьте на форму компоненты и задайте им свойства приведенные в таблице. Для того чтобы текстовое поле сделать многострочным мы присвоили его свойству MiltiLine значение True (Истина). Теперь необходимо написать обработчик события щелчка по кнопке «Запись». Первым дело проверим не пусто ли «имя файла». Private Sub cmd1_Click() If Len(txtFileName.Text) Then End If End Sub Дальше в зависимости от того какой переключатель выбран откроем файл в соответствующем режиме. Private Sub cmd1_Click() If Len(txtFileName.Text) Then If Option1.Value = True Then Open txtFileName.Text For Append As #1 If Option2.Value = True Then Open txtFileName.Text For Output As #1 Close #1 End If End Sub Private Sub cmd1_Click() If Len(txtFileName.Text) Then If Option1.Value = True Then Open txtFileName.Text For Append As #1 If Option2.Value = True Then Open txtFileName.Text For Output As #1 Print #1, txtInput.Text Close #1 End If End Sub Очистим поле ввода, если установлен соответствующий флаг. Свойство Value объекта Флажок(Check) может принимать одно из трех значений: Private Sub cmd1_Click() If Len(txtFileName.Text) Then If Option1.Value = True Then Open txtFileName.Text For Append As #1 If Option2.Value = True Then Open txtFileName.Text For Output As #1 Print #1, txtInput.Text Close #1 If Check1.Value = 1 Then txtInput.Text = «» End If End Sub Приложение почти готово. Но имеется один недостаток: если поле «Имя файла» пусто, запись в файл не производится. А пользователь об этом не знает! Необходимо ему это сообщить. Для вывода различных сообщений имеется окно MessageBox. Почти все приложения Windows используют MessageBox, так как этот компонент входит в состав Windows, a Visual Basic только предоставляет возможность его вызова. Вид окна MessageBox может быть различным, но в его состав всегда входят: Для вывода этого окна используется функция MsgBox, которая возвращает информацию о том какую кнопку нажал пользователь (полезно при анализе ответа пользователя). Вызывается функция так: Возвращаемое_значение = MsgBox (Сообщение [, Кнопки и значки] [, Заголовок] [, Файла помощи, Context]) Private Sub cmd1_Click() If Len(txtFileName.Text) Then If Option1.Value = True Then Open txtFileName.Text For Append As #1 If Option2.Value = True Then Open txtFileName.Text For Output As #1 Print #1, txtInput.Text Close #1 If Check1.Value = 1 Then txtInput.Text = «» Else MsgBox «Необходимо ввести имя файла», vbExclamation, «Внимание!» End If End Sub Теперь, если пользователь забыл указать имя файла он получит сообщение об этом. Готово. Запустите проект и «проиграйтесь» с ним. Затем откройте файл, в который сохранялась информация (если вы не указали полный путь в имени, то файл будет находится в папке с проектом) и убедитесь в правильности работы программы. Источник Переключатель (программирование) Условная инструкция — элемент компьютерной программы, осуществляющий ветвление операций. К условным инструкциям (операторам выбора) относятся: Условные инструкции осуществляют ветвление. Инструкция if в зависимости от значения выражения-условия позволяет выполнить только одну из двух указанных последовательностей операторов (в большинстве языков программирования такая последовательность операторов рассматривается как один составной оператор). Существуют формы оператора if, позволяющие задавать вместо второй выполняемой последовательности операторов условие (if-else if-then-else if-then). Инструкция switch в зависимости от значения вычисляемого выражения позволяет выполнить одну из нескольких указанных последовательностей операторов. Реализация оператора if достаточно проста: как правило, процессор поддерживает команды перехода и ветвления. Реализация оператора switch может быть выполнена в виде таблицы перехода, состоящей из команд безусловного перехода на соответствующие фрагменты кода. Вычисляемое выражение оператора switch в этом случае преобразовывается в значение сдвига по таблице перехода, определяющее выполняемую команду. Смотреть что такое «Переключатель (программирование)» в других словарях: Оператор (программирование) — У этого термина существуют и другие значения, см. оператор. Из за путаницы с терминологией словом «оператор» в программировании нередко обозначают операцию (англ. operator), см. Операция (программирование). Инструкция или оператор… … Википедия Охрана (программирование) — Охрана (охраняющее выражение) логическое выражение, которое предназначено для ограничения вычислительных процессов и направления их по определённому направлению в зависимости от условия охраны. Обычно, используется в функциональных языках… … Википедия ГОСТ 19781-90: Обеспечение систем обработки информации программное. Термины и определения — Терминология ГОСТ 19781 90: Обеспечение систем обработки информации программное. Термины и определения оригинал документа: 9. Абсолютная программа Non relocatable program Программа на машинном языке, выполнение которой зависит от ее… … Словарь-справочник терминов нормативно-технической документации Коды ошибок BIOS — Во время начальной загрузки компьютера при помощи программ, записанных в BIOS происходит первоначальная проверка. В случае сбоя во время проверки BIOS может выдать информацию, позволяющую выявить причину сбоя. Среди таких способов есть вывод… … Википедия ГОСТ Р МЭК 61038-2001: Учет электроэнергии. Тарификация и управление нагрузкой. Особые требования к переключателям по времени — Терминология ГОСТ Р МЭК 61038 2001: Учет электроэнергии. Тарификация и управление нагрузкой. Особые требования к переключателям по времени оригинал документа: 3.5.1 влияющая величина: Любая величина, обычно внешняя по отношению к переключателю,… … Словарь-справочник терминов нормативно-технической документации БК — Тип Бытовой компьютер Выпущен … Википедия Электроника БК — БК Тип Бытовой компьютер Выпущен 1985 г. Выпускался по Размер байта 8 бит Размер слова 16 бит … Википедия Электроника БК-001 — БК Тип Бытовой компьютер Выпущен 1985 г. Выпускался по Размер байта 8 бит Размер слова 16 бит … Википедия Электроника БК-0010 — БК Тип Бытовой компьютер Выпущен 1985 г. Выпускался по Размер байта 8 бит Размер слова 16 бит … Википедия БК (семейство компьютеров) — У этого термина существуют и другие значения, см. БК (семейство компьютеров) (значения). БК (семейство компьютеров) Тип … Википедия Источник Флажки. Переключатели Флажки предназначены для того, чтобы в ходе выполнения проекта выбрать либо один из возможных вариантов, либо несколько. Например, установить значение одного или нескольких свойств объекта. Итак, в группе флажков метка может быть установлена: Переключатели предназначены для того, чтобы в ходе выполнения проекта выбрать один из возможных вариантов. Например, установить для определенного свойства объекта одно значение из некоторого определенного набора значений. Итак, из группы переключателей может быть выбран только один. После того как флажок установлен на форму, его свойства добавятся в список компонентов проекта в поле Компоненты окна Инспектор объектов. Свойства флажка Caption, Top, Left, Name, Color, Enabled, Visible, Font, Width, Height аналогичные соответствующих свойств надписи. В частности, значения свойств Width и Height флажка определяются длиной текста справа от флажка и размером шрифта, которым выведено этот текст. Если на форме расположено несколько флажков, то среди них можно: Рассмотрим, как можно использовать флажки для реализации ветвления. Пример 1. Пусть, например, нам нужно в ходе выполнения проекта изменять значения или только одного из свойств окна (или заголовок, или цвет, или размеры), или нескольких из них, или не менять значение ни одного из них. В проекте используем событие onClick кнопки Button1 Разместим на форме 2-е кнопки и три флажка. При размещении флажков на форме для каждого из них по умолчанию значение свойства Checked устанавливается false.

Поскольку во время выполнения проекта ни один флажок может быть не выбран, то целесообразно оставить такие начальные значения свойства Checked для всех флажков

procedure TForm1.Button1Click(Sender: TObject);

If CheckBox1.Checked Then Form1.Caption:= ‘заголовок изменен’;

If CheckBox2.Checked Then Form1.Color := clYellow;

If CheckBox3.Checked Then

Form1.Height := Form1.Height + 100 ;

Form1.Width := Form1.Width + 100 ;

procedure TForm1.Button2Click(Sender: TObject);

Рассмотрим, как можно использовать переключатели для реализации ветвления в проекте.

Пример 2. Нужно в ходе исполнения проекта изменять значение только одного из таких свойств формы: либо заголовок, либо цвет, либо размеры.
Для этого разместим на форме 2-е кнопки и три переключателя.

Создадим процедуру для обработки события OnClick кнопки и в ее текст поместим такую команду:

procedure TForm1.Button1Click(Sender: TObject);
begin

If RadioButton1.Checked Then < равнозначно такой записи условия : RadioButton1.Checked = true >
Form1.Caption:= ‘Заголовок изменен’
Else If RadioButton2.Checked Then Form1.Color:= clTeal
Else
begin
Form1.Width := Form1.Width + 100 ;
Form1.Height := Form1.Height + 100;
end;
end;

Начинаться выполнение этой команды будет с определения значения свойства RadioButtonl.Checked:

Чтобы этого не произошло, нужно:

В процедуру для обработки события Button 2 Click кнопки добавим команды значения свойства Checked для переключателей

begin

RadioButton1.Checked:= true;

2. либо после второго ключевого слова Else вставить еще одну команду ветвления:

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

procedure TForm1.Button1Click (Sender: TObject);
begin

Else If RadioButton3.Checked Then

begin
Form1.Width := Form1.Width + 100 ;
Form1.Height := Form1.Height + 100;

Из рассмотренных выше примеров можно сделать такие выводы:

• переключатели используются тогда, когда нужно выбрать один и только один вариант действий из нескольких возможных;

для обработки состояния переключателей в процедуру включают команды ветвления, которые вложены друг в друга;

• флажки используются тогда, когда может быть выбран либо один, либо несколько, либо не выбран ни один вариант действий из нескольких возможных;

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

Программный код проекта

procedure TForm1.RadioButton1Change (Sender: TObject);
begin
form1.caption:=’переключатели_onChange’;
end;

procedure TForm1.RadioButton2Chang e(Sender: TObject);
begin
form1.color:=clOlive;
end;

procedure TForm1.RadioButton3Change (Sender: TObject);
begin
Form1.Width := Form1.Width + 100 ;
Form1.Height := Form1.Height + 100;
end;

procedure TForm1.RadioButton4Change(Sender: TObject);
begin
Form1.Caption := ‘ флажки _переключатели _ onChange ‘;
Form1.Color:= clDefault;
Form1.Width := 325;
Form1.Height:=240;
end;

procedure TForm1.FormCreate (Sender: TObject);
begin

Form1.Caption := ‘флажки _переключатели _on Change’;
Form1.Color:= clDefault;
Form1.Width := 325 ;
Form1.Height:= 240;
end;

procedure TForm1.RadioButton1Change (Sender: TObject);
begin
if RadioButton1.Checked then form1.Caption:=’переключатели_onChange’ else form1.Caption:=’флажки_переключатели_onChange’ ;
end;
procedure TForm1.RadioButton2Change (Sender: TObject);
begin
if RadioButton2.Checked then form1.color:=clOlive else Form1.Color:= clDefault;
end;

procedure TForm1.RadioButton4Change (Sender: TObject);
begin
Form1.Caption := ‘флажки _переключатели _on Change’;
Form1.Color:= clDefault;
Form1.Width := 325;
Form1.Height:=240;
end;

procedure TForm1.CheckBox1Change (Sender: TObject);
begin
if CheckBox1.Checked then form1.color:=clred else Form1.Color:= clDefault;
end;

procedure TForm1.CheckBox2Change (Sender: TObject);
begin
if CheckBox2.Checked then form1.color:=clblue else Form1.Color:= clDefault;
end;

procedure TForm1.CheckBox3Change (Sender: TObject);
begin
if CheckBox3.Checked then form1.color:=clgreen else Form1.Color:= clDefault;
end;

procedure TForm1.CheckBox4Change (Sender: TObject);
begin
Form1.Caption := ‘ флажки _переключатели _ onChange ‘;
Form1.Color:= clDefault;
Form1.Width := 325;
Form1.Height:=240;
CheckBox1.Checked:=false;
CheckBox2.Checked:=false;
CheckBox3.Checked:=false;
CheckBox4.Checked:=false;
end;

Вывод. Событие onChange целесообразно использовать для единичных применений компонентов

Источник

Инклюзивные компоненты: переключатели

Некоторые вещи либо включены, либо выключены. Когда что-то не включено, то оно обязательно выключено, и наоборот. Эта идея настолько элементарна, что я всё усложнил этим объяснением. Однако не все переключатели одинаковы: хотя они выполняют простые функции, их практическое применение и формы сильно различаются.

В этой статье я объясню, как сделать переключатели инклюзивными (включающими, доступными для всех, прим. редактора). Нет единого способа решения этой проблемы, как и в случае любого другого компонента, особенно когда подобные контролы рассматриваются в разных контекстах. Многое можно испортить или просто забыть сделать, так что попробуем этого избежать.

Изменение состояния

Если веб-приложение не изменилось так, как ожидал пользователь, такое взаимодействие будет негативным. При этом возможность моментально изменять содержимое страниц, без их обновления, существовала не всегда.

К сожалению, в какой-то момент мы решили, что доступными страницами были те, где мало что происходит: это статические документы, созданные только для чтения. То есть мы прикладывали мало усилий для того, чтобы сделать взаимодействие с ними более богатым, с сохранением выбора для пользователей.

Есть распространённое заблуждение о том, что скринридеры не понимают 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-дизайна, и ему нужно уделить пристальное внимание. В случае, рассмотренном в этом посте, мы сохраняем наш классический переключатель для зрячих пользователей, при этом не запутывая и не вводя в заблуждение пользователей скринридеров вне зависимости от того, какой режим работы клавиатуры они используют. Это достаточно надёжное решение.

Заключение

Какой дизайн вы выберите и каким образом реализуете переключатели — это ваше дело. Но, надеюсь, вы вспомните этот пост, когда придёт время добавить подобный контрол в вашу библиотеку компонентов. Не вижу причин для того, чтобы переключатели или любой другой элемент интерфейса стали препятствием для пользователей, как это часто бывает.

Вы можете изучить здесь основы и добавить разные штрихи в свой дизайн, включая анимацию. Но, в первую очередь, важно заложить прочный фундамент.

Источник

• ← Что такое рынок кратко и понятно
• Что такое декартовая плоскость →