Где находится переключатель на клавиатуре

Обновлено: 05.07.2024

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

По умолчанию ни один переключатель в группе RadioButtons не выбран. То есть все радиокнопки очищаются. Однако после того, как пользователь выбрал переключатель, он не может отменить выбор кнопки, чтобы восстановить группу в исходное очищенное состояние.

Особое поведение группы RadioButtons отличает ее от флажков, которые поддерживают множественный выбор и отмену выбора или очистку.

Получить библиотеку пользовательского интерфейса Windows

Элемент управления RadioButtons входит в состав библиотеки пользовательского интерфейса Windows, пакета NuGet, который содержит новые элементы управления и функции пользовательского интерфейса для приложений Windows. Дополнительные сведения, включая инструкции по установке, см. в Библиотеке пользовательского интерфейса Windows.

RadioButtons и RadioButton

Существует два способа создания групп переключателей.

  • Начиная с WinUI 2.3, мы рекомендуем использовать элемент управления RadioButtons. Этот элемент управления упрощает компоновку, управляет навигацией с помощью клавиатуры и специальными возможностями, а также поддерживает привязку к источнику данных.
  • Вы можете использовать группы отдельных элементов управления RadioButton. Если ваше приложение не использует WinUI 2.3 или более позднюю версию, это единственный вариант.

Это правильный элемент управления?

Используйте переключатели, чтобы пользователи могли выбирать из двух или более взаимоисключающих вариантов.

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

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

 Поле со списком, отображающее вариант по умолчанию

Если есть только два возможных варианта, которые можно четко выразить в виде одного бинарного выбора, например, вкл/выкл или да/нет, объедините их в один флажок или тумблер. Например, используйте один флажок для "Я согласен" вместо двух переключателей для "Я согласен" и "Я не согласен".

Не используйте два переключателя для одного двоичного варианта:

Вместо этого используйте флажок:

Если пользователи могут выбрать несколько параметров, используйте флажки.

Флажки поддерживают множественный выбор

Когда параметры пользователей находятся в диапазоне значений (например, 10, 20, 30, . 100), используйте ползунок.

Слайдер элемент управления, отображающий одно значение в диапазоне значений

Если вариантов больше восьми, используйте поле со списком.

 Окно со списком, отображающее несколько параметров

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

Примеры

Если у вас установлено приложение Галерея элементов управления XAML, откройте его, чтобы увидеть элемент управления RadioButtons в действии.

Обзор радиокнопок WinUI

Доступ к клавиатуре и поведение навигации были оптимизированы в элементе управления RadioButtons. Эти улучшения помогают пользователям специальных возможностей и опытным пользователям быстрее и проще перемещаться по списку параметров.

Помимо этих улучшений, визуальное расположение отдельных переключателей в группе RadioButtons по умолчанию было оптимизировано за счет автоматической настройки ориентации, интервалов и полей. Эта оптимизация устраняет необходимость указывать эти свойства, как это может потребоваться при использовании более примитивного элемента управления группировкой, такого как StackPanel или Grid.

Навигация по группе RadioButtons

Элемент управления RadioButtons имеет специальное поведение навигации, которое помогает пользователям клавиатуры быстрее и проще перемещаться по списку.

Фокус клавиатуры

Элемент RadioButtons поддерживает два состояния:

  • Переключатель не выбран.
  • Выбран один переключатель

В следующих разделах описывается поведение фокуса элемента управления в каждом состоянии.

Переключатель не выбран

Если переключатель не выбран, фокус получает первый переключатель в списке.

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

Список без фокуса табуляции, без выбора

Список с начальным фокусом табуляции, без выбора

Выбран один переключатель

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

Список без фокуса табуляции

Список с начальным фокусом вкладки

Навигация с помощью клавиатуры

Дополнительную информацию об общих способах навигации с помощью клавиатуры см. в разделе Взаимодействие с клавиатурой — навигация.

Когда элемент в группе RadioButtons уже находится в фокусе, пользователь может использовать клавиши со стрелками для "внутренней навигации" между элементами в группе. Клавиши со стрелками вверх и вниз позволяют перемещаться к «следующему» или «предыдущему» логическому элементу, как определено в разметке XAML. Клавиши со стрелками влево и вправо перемещаются в пространстве.

Навигация в макетах с одним столбцом или строкой

В макете с одним столбцом или одной строкой навигация с помощью клавиатуры приводит к следующему поведению:

Один столбец

Кнопки со стрелками вверх и вниз позволяют перемещаться между элементами. Клавиши со стрелками влево и вправо ничего не делают.

Одна строка

Клавиши со стрелками влево и вверх позволяют перейти к предыдущему элементу, а клавиши со стрелками вправо и вниз — к следующему элементу.

Навигация в макетах с несколькими столбцами и строками

В макете сетки с несколькими столбцами и несколькими строками навигация с помощью клавиатуры приводит к следующему поведению:

Клавиши со стрелками влево/вправо

Клавиши со стрелками влево и вправо перемещают фокус по горизонтали между элементами в строке.

Когда фокус находится на последнем элементе в столбце и нажата клавиша со стрелкой вправо или влево, фокус перемещается на последний элемент в следующем или предыдущем столбце (если есть).

Клавиши со стрелками вверх/вниз

Клавиши со стрелками вверх и вниз перемещают фокус по вертикали между элементами в столбце.

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

Обтекание

Группа RadioButtons не переносит фокус с первой строки или столбца на последний или с последней строки или столбца на первый. Это связано с тем, что когда пользователи используют программу чтения с экрана, теряется ощущение границы и четкое указание начала и конца, что затрудняет навигацию по списку пользователям с нарушениями зрения.

Элемент управления RadioButtons также не поддерживает перечисление, поскольку он предназначен для содержания разумного количества элементов (см. Правильный ли это элемент управления?).

Выделение следует за фокусом

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

Перед навигацией с помощью клавиатуры

Фокус и выбор перед навигацией с помощью клавиатуры.

После навигации с помощью клавиатуры

Фокус и выбор после навигации с помощью клавиатуры, когда клавиша со стрелкой вниз перемещает фокус на переключатель 3, выбирает его и очищает переключатель 2.

Вы можете перемещать фокус, не изменяя выделение, используя для навигации клавиши Ctrl+стрелки. После перемещения фокуса вы можете использовать клавишу пробела, чтобы выбрать элемент, который в данный момент находится в фокусе.

Навигация с помощью геймпада Xbox и пульта дистанционного управления

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

Специальные возможности

В следующей таблице описано, как Экранный диктор обрабатывает группу RadioButtons и что объявляется. Это поведение зависит от того, как пользователь установил параметры детализации экранного диктора.

< /tr>
Действие Объявление экранного диктора
Фокус перемещается на выбранный элемент " имя, RadioButton, выбрано, x из N"
Фокус перемещается на невыбранный элемент
(при навигации с помощью клавиш со стрелками Ctrl или геймпада Xbox,
что указывает на то, что выделение не следует за фокусом.)
"имя, RadioButton, невыбрано, x из N"

имя, которое Экранный диктор произносит для каждого элемента, является значением вложенного свойства AutomationProperties.Name, если оно доступно для элемента; в противном случае это значение, возвращаемое методом ToString элемента.

x — номер текущего элемента. N – общее количество элементов в группе.

Создайте группу RadioButtons WinUI

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

  • Заполните его, добавив элементы непосредственно в коллекцию Items или привязав данные к его свойству ItemsSource.
  • Используйте свойства SelectedIndex или SelectedItem, чтобы получить и установить выбранный параметр.
  • Обрабатывать событие SelectionChanged, чтобы выполнить действие при выборе параметра.

В этом документе мы используем псевдоним muxc в XAML для представления API библиотеки пользовательского интерфейса Windows, которые мы включили в наш проект. Мы добавили это в наш элемент страницы: xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

Здесь вы объявляете простой элемент управления RadioButtons с тремя параметрами. Свойство Header настроено так, чтобы дать группе метку, а свойство SelectedIndex — предоставить параметр по умолчанию.

Результат выглядит следующим образом:

Чтобы выполнить действие, когда пользователь выбирает параметр, обработайте событие SelectionChanged. Здесь вы меняете цвет фона элемента Border с именем «ExampleBorder» ( ).

Вы также можете получить выбранный элемент из свойства SelectionChangedEventArgs.AddedItems. Будет только один выбранный элемент с индексом 0, поэтому вы можете получить выбранный элемент следующим образом: string colorName = e.AddedItems[0] as string; .

Состояния выбора

Переключатель имеет два состояния: выбрано или неактивно. Когда параметр выбран в группе RadioButtons, вы можете получить его значение из свойства SelectedItem, а его расположение в коллекции — из свойства SelectedIndex. Радиокнопку можно очистить, если пользователь выбирает другую радиокнопку в той же группе, но ее нельзя очистить, если пользователь выберет ее снова. Однако вы можете очистить группу переключателей программно, установив для нее SelectedItem = null или SelectedIndex = -1 . (Установка для SelectedIndex любого значения вне диапазона коллекции Items приводит к отсутствию выбора.)

Контент RadioButtons

В предыдущем примере вы заполнили элемент управления RadioButtons простыми строками. Элемент управления предоставлял переключатели и использовал строки в качестве метки для каждого из них.

Однако вы можете заполнить элемент управления RadioButtons любым объектом. Как правило, вы хотите, чтобы объект предоставлял строковое представление, которое можно использовать в качестве текстовой метки. В некоторых случаях вместо текста может быть уместно изображение.

Здесь элементы SymbolIcon используются для заполнения элемента управления.

Вы также можете использовать отдельные элементы управления RadioButton для заполнения элементов RadioButtons. Это частный случай, который мы обсудим позже. См. раздел Элементы управления RadioButton в группе RadioButtons.

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

Привязка данных

Элемент управления RadioButtons поддерживает привязку данных к своему свойству ItemsSource. В этом примере показано, как можно привязать элемент управления к пользовательскому источнику данных. Внешний вид и функциональность этого примера такие же, как и в предыдущем примере с цветом фона, но здесь цветные кисти хранятся в модели данных, а не создаются в обработчике событий SelectionChanged.

Элементы управления RadioButton в группе RadioButtons

Вы можете использовать отдельные элементы управления RadioButton для заполнения элементов RadioButtons. Вы можете сделать это, чтобы получить доступ к определенным свойствам, таким как AutomationProperties.Name ; или у вас может быть существующий код RadioButton, но вы хотите воспользоваться макетом и навигацией RadioButtons.

Когда вы используете элементы управления RadioButton в группе RadioButtons, элемент управления RadioButtons знает, как представить RadioButton , поэтому у вас не будет двух кругов выделения.

Однако есть некоторые особенности поведения, о которых вам следует знать. Мы рекомендуем обрабатывать состояние и события отдельных элементов управления или RadioButtons , но не обоих одновременно, чтобы избежать конфликтов.

В этой таблице показаны связанные события и свойства обоих элементов управления.

RadioButton RadioButtons
Проверено, Не отмечено, Нажмите SelectionChanged
Проверено SelectedItem, SelectedIndex

Если вы обрабатываете события для отдельного RadioButton , например Checked или Unchecked , а также обрабатываете событие RadioButtons.SelectionChanged, сработают оба события. Сначала происходит событие RadioButton, а затем событие RadioButtons.SelectionChanged, что может привести к конфликтам.

Свойства IsChecked , SelectedItem и SelectedIndex остаются синхронизированными. Изменение одного свойства приводит к обновлению двух других.

Свойство RadioButton.GroupName игнорируется. Группа создается элементом управления RadioButtons.

Определение нескольких столбцов

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

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

Создайте свою группу RadioButton

Если вы не используете более старую версию WinUI, мы рекомендуем использовать элемент управления RadioButtons WinUI для группировки элементов RadioButton.

Переключатели работают группами. Вы можете сгруппировать отдельные элементы управления RadioButton одним из двух способов:

  • Поместите их в один и тот же родительский контейнер.
  • Установите для свойства GroupName на каждом переключателе одно и то же значение.

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

Эти две группы элементов управления RadioButton выглядят следующим образом:

Состояния переключателя

Переключатель имеет два состояния: выбрано или неактивно. Когда переключатель выбран, его свойство IsChecked имеет значение true . Когда переключатель сброшен, его свойство IsChecked имеет значение false . Радиокнопку можно очистить, если пользователь выбирает другую радиокнопку в той же группе, но ее нельзя очистить, если пользователь выберет ее снова. Однако вы можете очистить переключатель программно, установив для его свойства IsChecked значение false .

Визуальные элементы

Интервал по умолчанию для отдельных элементов управления RadioButton отличается от интервала, предоставляемого группой RadioButtons. Чтобы применить интервал RadioButtons к отдельным элементам управления RadioButton, используйте значение Margin 0,0,7,3 , как показано здесь.

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

Если вы используете элемент управления RadioButtons WinUI, расстояние, поля и ориентация уже оптимизированы.

Блог Wufoo

Опытные пользователи знают, что ключом к реальной скорости являются хорошие сочетания клавиш. Для веб-форм наиболее полезными ярлыками являются возможность перехода к следующему полю в форме путем нажатия клавиши **Tab** и использования **Shift + Tab** для перехода к предыдущему полю. К сожалению, не все браузеры обеспечивают респектабельность этого действия для всех типов полей в форме. Например, в Firefox и Safari эти сочетания клавиш на самом деле **игнорируют** поля Radio и Checkbox.

Эта функция теперь включена для каждой формы в Wufoo. Все, что вам нужно сделать, это нажать Tab и Shift + Tab, чтобы насладиться новыми элементами управления. Если вы находитесь на радио или флажке, просто нажмите пробел, чтобы выбрать или отменить выбор этой активной опции. Мы благодарим нашего собственного Алекса Васкеса, который взял на себя задачу заставить все основные браузеры нормально работать с вашей клавишей Tab, если они сталкиваются с формой на базе Wufoo.

**ОБНОВЛЕНИЕ:** Благодаря вашим комментариям мы видим, что этот способ пропуска вкладок ограничен установками Mac по умолчанию. Извините, Safari Windows и Firefox Windows! Однако одна вещь, которую мы только что узнали, заключается в том, что вы, по-видимому, можете переопределить это поведение в сочетаниях клавиш следующим образом:

Сочетания клавиш

Вы можете либо нажать **Ctrl + F7**, либо изменить параметр **Полный доступ с клавиатуры** на **Все элементы управления**.

Все элементы управления

Или настройте его только для браузера, перейдя в раздел «Дополнительные элементы управления» в настройках Safari.

Настройки для управления вкладками в Safari

В любом случае, мы сохраним наши изменения в наших формах, так как по умолчанию на Mac эти элементы управления формой пропускаются. Спасибо комментаторам за всю новую информацию!

Поделиться:

Комментарии

Извините, но я не вижу ни одного другого решения для опроса, имеющего проблемы с табуляцией по радио или флажками в Safari или Firefox. Похоже, вы только что исправили ошибку wufoo.

Пропуск радиокнопок и флажков — проблема только Apple. Это плохой принцип дизайна, навязанный Apple. Однако вы можете отключить его, просто нажав комбинацию (^F7). Он указан как сочетание клавиш в настройках.

Это правда, это феномен Mac OS, не обязательно связанный с конкретным браузером. Мне всегда казалось странным, что OSX делает это, но рад видеть, что вы, ребята, нашли обходной путь.

В Safari 5.0.2 Mac и Firefox 3.6.12 Mac есть проблема.Я также протестировал Safari 5 в Windows Vista, и он будет работать с *первой* радиокнопкой в ​​группе радиокнопок, но не с каждой отдельной кнопкой.

Странные причуды повсюду, которые теперь стандартизированы для всех форм wufoo!

@Jay: Отличный совет по Control-F7! Это будет удобно помнить при заполнении форм, отличных от wufoo.

@Allan Я предполагаю, что вы уже сказали своей ОС переопределить поведение по умолчанию. На Mac вы делаете это в Системных настройках/Клавиатура/Сочетания клавиш.

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

@Paul
Нет, причина, по которой я не вижу проблемы, заключается в том, что я не на Mac, кажется, проблема только в Mac.

"Если вы находитесь на переключателе или флажке, просто нажмите пробел, чтобы выбрать или отменить выбор этой активной опции".

Это только мне кажется, или нажатие пробела на выбранном переключателе не отменяет выбор? Это всегда было чем-то, что беспокоило меня в веб-формах в целом… кажется, никогда не было способа отменить выбор переключателя, кроме выбора другого варианта (что возможно только в том случае, если есть несколько вариантов). < /p>

Мне нравятся ваши уроки. Стоит читать каждый раз.
Запоминающаяся музыка, веселая, умная. Спасибо!

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

Чтобы перейти к следующей ссылке или элементу:
Safari: нажмите «Tab» + «Alt»
Chrome: нажмите «Tab»
Firefox: нажмите «Tab»

Чтобы перейти к предыдущей ссылке или элементу:
Safari: нажмите «Tab» + «Alt» + «Shift»
Chrome: нажмите «Tab» + «Shift»
Firefox: нажмите «Tab» + «Shift»

Нажимайте приведенные выше комбинации несколько раз, чтобы перейти к выбранной ссылке. Текущий выбранный элемент выделяется синим цветом в Safari и Chrome и пунктирным контуром в Firefox.

Рис. 1. Пример ссылок для навигации по веб-сайту

Выбрав нужный элемент, вы можете активировать его, нажав клавишу «Ввод» на клавиатуре.

Заполнение форм с помощью клавиатуры

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

Переключатели

При переходе с помощью Tab в раздел формы, в котором есть выбор переключателей, вы можете изменить свой выбор с помощью клавиш со стрелками «вверх» и «вниз» или клавиш со стрелками «вправо» и «влево», чтобы выбрать следующий /предыдущий переключатель. После выбора нажмите клавишу Tab, чтобы перейти к следующему разделу формы.

Рис. 2. Пример переключателей

Примечание: если вы нажмете клавишу "Ввод" по ошибке, форма часто будет "отправлена" раньше, чем вы этого хотите, потому что клавиша "Ввод" настроена на срабатывание кнопки отправки формы.

Флажки

Вы перемещаетесь между флажками с помощью клавиши Tab.

Чтобы установить флажок: нажмите «Пробел». Появится галочка или крестик.

Чтобы отменить или отменить выбор «флажка», нажмите «Пробел» еще раз. Галочка или крестик будут удалены.

Нажмите клавишу Tab, чтобы перейти к следующему флажку или разделу формы.

Рис. 3. Пример флажка

Раскрывающиеся меню

Многие веб-сайты используют раскрывающиеся меню для выбора элементов из списка в форме или в качестве «быстрых ссылок» на другие разделы веб-сайта.

Рис. 4. Пример раскрывающегося меню

Нажимайте клавишу Tab, пока не будет выделено раскрывающееся меню.

Нажмите «Пробел», чтобы активировать меню, или нажмите «Alt» и стрелку «вниз»,

Используйте стрелки «вверх» и «вниз», чтобы выбрать элемент из списка, и нажмите «Пробел», чтобы выбрать его.

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

  1. Разметка
  2. Создание псевдоэлемента на этикетке в CSS
  3. Добавить «выбранный» стиль в CSS.
  4. Добавить стиль фокуса

Начало

Я решил создать простую группу радиокнопок с вопросом, какое ваше любимое животное

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

Набор полей с вопросом

Я собираюсь добавить немного простой SCSS, чтобы немного очистить его.

Я здесь особо ничего не делал; Я добавил шрифт и убрал рамку из набора полей.

Набор полей со шрифтом без засечек и без контура в наборе полей

А теперь самое интересное! Стиль этих переключателей!

Создание псевдоэлемента на этикетке

Первое, что я собираюсь сделать, это добавить псевдоэлемент ::before к элементу label. Сначала я начну с чего-нибудь простого.

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

Переключатели с красной рамкой между этикетка и кнопка». ширина=

Я собираюсь добавить небольшое поле для .radio-wrapper .

Переключатели с красной рамкой между меткой и кнопку с дополнительным пространством под каждым полем». ширина=

Теперь давайте удалим фоновый цвет и закруглим края.

В качестве примечания я оставлю стандартные переключатели для целей отладки.

Переключатели с большим кругом между этикетки». ширина=

Добавить стиль :checked в CSS

Если вы читали мой пост о флажках, доступных с клавиатуры, вы знаете о псевдоклассе :checked. Во-первых, нам нужно добавить на метку псевдоэлемент ::after.

А вот как это выглядит:

Переключатели с красным кругом между метками .

Теперь у нас есть стиль. Давайте добавим фон псевдоэлемента ::after только тогда, когда радиовход отмечен :checked .

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

Выбранный переключатель с красным кружком, обозначающим его выбирается». ширина=

Однако, если вы заметили, стиля фокуса нет. Давайте сосредоточимся на этом дальше (посмотрите, что я там сделал)

Добавить стиль фокуса

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

Сфокусированный переключатель с обведенным кругом.

Я решил добавить такой же приглушенный красный цвет для стиля фокуса.

Сфокусированный переключатель с красным кружком.

Чтобы закончить, я:

  • убрать непрозрачность с самого переключателя (ввода)
  • уберите левое поле с ярлыка!

Заключение

Когда мы создаем собственные переключатели, мы должны учитывать следующее:

  1. Создание правильной структуры HTML с соответствующими ярлыками форм!
  2. Использование псевдоэлементов для создания элемента с пользовательским стилем
  3. Учет псевдокласса :checked
  4. Убедитесь, что вы можете сфокусироваться на новом переключателе.
  5. Используйте opacity: 0, чтобы скрыть переключатель.

Если вы хотите поиграть с ним, вот готовый CodePen!

ИЗМЕНИТЬ:

Я хотел бы выразить признательность за отзывы/помощь от некоторых крутых людей из Твиттера за то, что они помогли мне доработать несколько вещей. В частности, я хотел поблагодарить Элизабет Шафер за то, что она разветвила это и сделала некоторые настройки для режима высокой контрастности Windows! Супер круто!

Оставайтесь на связи! Если вам понравилась эта статья:

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

Электронная книга: Руководство Bootcampers по веб-доступности

Заказать сейчас!

Руководство Bootcamper по веб-доступности уже доступно.

Ура! Удачной недели!

О Линдси

Линдси — эксперт по специальным возможностям, любитель JavaScript и разработчик внешнего интерфейса, который увлечен инклюзивностью как в Интернете, так и за его пределами. Узнайте больше о ней на странице «О нас»

Читайте также: