Creating a Simple, Accessible On/Off Switch

Creating a simple, accessible on/oﬀ switch

This presentation is based on a simple GitHub Repo and page available here:

Checkbox and radio button switch: https://russmaxdesign.github.io/switch-checkbox/ Github: https://github.com/russmaxdesign/switch- checkbox

During this presentation, I’m going to ask you some questions - which you can answer in the chat window.

I'll be giving away three SitePoint Premium annual memberships as prizes to the best/quickest answers.

That gives you unrestricted access to over $20,000 worth of SitePoint books and courses! https://www.sitepoint.com/ premium/

I want to start with a couple of accessibility-related questions.

And yes, these are incredibly easy, “prize-winnable” questions.

Question 1: What is the easiest and most eﬀective way of identifying common accessibility problems in your site/ app?

Unplug the mouse The easiest and most eﬀective way to check your site is using keyboard-only.

A large number of users rely on key-strokes (TAB, ARROW, ENTER, SPACE) or the equivalent of these keystrokes in order to navigate and interact with sites/apps.

If you cannot navigate or interact with your site/app using keystrokes only, then your site is potentially inaccessible to a large number of users.

Question 2: Why is this one of the most evil CSS rules you could ever write? *:focus { outline: none; }

Because this rule make it hard, if not impossible, for keyboard-only users to see which element is in focus and therefore very hard to navigate and interact with your site/app.

Time to explore how to style a simple radio button or checkbox!

Web designers and developers have always struggled with how to customise radio buttons and checkboxes.

The main issue is that radio buttons and checkboxes are notoriously hard to style - especially across multiple browsers and devices.

In the past, some developers resorted to JavaScript-based solutions to solve this problem.

In some cases this involved using JavaScript to remove the original radio or checkbox element making the end result inaccessible for a wide range of assistive technologies.

It is possible to style these elements without having to use JavaScript. And more importantly, we can make the end result accessible.

Let’s take a simple example of an on/oﬀ switch that can be applied to either radio or checkbox elements:

The solution I’m about to demo, has ﬁve key accessibility features.

Well… many of these are not really features, they are just default behaviours that should not be overridden.

Feature 1: We will use the appropriate semantic elements - input and label elements. We will explicitly associate these elements using matching “for" and "id" values.

Feature 2: The label content can be used to describe the purpose of each switch for screen readers. This content is hidden oﬀ-screen.

Feature 3: We will make the two diﬀerent states (“on” and “oﬀ”) clearly distinguishable using a tick icon for the “on” state. This will aid colour- blind users and some types of cognitive-impaired users.

(Keeping in mind that we should never use “color alone” to signal important information.)

Feature 4: Because we are using native elements, the default keyboard behaviour will still be available. (Users can select a radio button or checkbox using the SPACE bar).

Feature 5: We will make the focus and hover states clearly visible. The focus state is especially important for keyboard only users.

checked checked hover checked focus

<div class="switch"> <input class="switch__control" type="radio" name="example01" id="example01"> <label class="switch__label" for="example01"> <span class="switch__content">Label content</span> </label> </div> input label

<div class="switch"> <input class="switch__control" type="radio" name="example01" id="example01"> <label class="switch__label" for="example01"> <span class="switch__content">Label content</span> </label> </div> radio

<div class="switch"> <input class="switch__control" type="checkbox" name="example01" id="example01"> <label class="switch__label" for="example01"> <span class="switch__content">Label content</span> </label> </div> checkbox

<div class="switch"> <input class="switch__control" type="radio" name="example01" id="example01"> <label class="switch__label" for="example01"> <span class="switch__content">Label content</span> </label> </div> id for

We will use BEM-like class names as these allow us to see the relationship between the parent element, descendant elements and modiﬁers.

/* parent module */ .switch { } /* parent modifiers */ .switch-‐-‐xl { } .switch-‐-‐lg { } .switch-‐-‐md { } .switch-‐-‐sm { } .switch-‐-‐xs { }

/* parent module */ .switch { } /* descendants of parent module */ .switch__control { } .switch__label { } .switch__content { }

We can use the parent container (“switch”) to create the overall dimensions of the switch.

The radio button or checkbox control (“switch__control”) is then positioned on top of the parent. It will be given the same dimensions as the parent.

The label (“switch__label”) is placed on top of the radio button and also given the same dimensions as the parent. We are hiding the control under the label.

We will then style the background of the label to look like a switch - including adding rounded corners and our background icon.

And ﬁnally, the label content (“switch__content”) is hidden oﬀ screen so that it is available for screen readers, but does not clutter the visual appearance of the switch.

Checkbox and radio button elements can be manually changed by users - from unchecked to checked etc.

These elements can also be given predeﬁned boolean “checked” and “disabled” attributes.

<!-‐-‐ no additional attributes -‐-‐> <input type="checkbox"> <!-‐-‐ boolean checked attribue -‐-‐> <input type="checkbox" checked> <!-‐-‐ boolean disabled attribute -‐-‐> <input type="checkbox" disabled>

However, for this solution, most of the styling is applied to the label element, rather than the input.

Unfortunately, the label element has no checked, unchecked or disabled state of its own.

We can get around this using adjacent sibling selectors, which target any label element that is adjacent to (comes directly after) the input.

/* unchecked input */ .switch__control + label { } /* checked input */ .switch__control:checked + label { } /* disabled input */ .switch__control[disabled] + label { }

We also want to style the :focus and :hover states of the switch, which can also be done using adjacent-sibling selectors.

/* unchecked input */ .switch__control:hover + label { } .switch__control:focus + label { } /* checked input */ .switch__control:checked:hover + label { } .switch__control:checked:focus + label { }

unchecked hover unchecked focus unchecked checked checked hover checked focus disabled

Time for our ﬁnal “prize-winnable” question (and yes, this one is also super-easy to answer)…

Question 3: Why would we want to be able to control all of the dimensions of our switch using one master SASS variable?

Because this makes it easier to maintain and to scale as needed.

We can deﬁne this one master variable by dividing our switch into scalable units.

So, we have four diﬀerent variables for the dimensions: - switch width - switch height - toggle width/height - gutter (space) around the toggle

$switch-‐width: 3em; $switch-‐height: ($switch-‐width / 2); /* 1.5em */ $toggle-‐width: ($switch-‐width / 3); /* 1em */ $toggle-‐gutter: ($switch-‐width / 12); /* .25em */

Now it becomes easy to create a range of size variations, just by resetting the font-size.

$switch-‐xl: 1.6em; $switch-‐lg: 1.4em; $switch-‐md: 1.2em; $switch-‐sm: 1em; $switch-‐xs: .8em;

We can also set some quick variables for each of the background-colors used in diﬀerent states.

$color-‐toggle: #fff; $color-‐unchecked-‐static: #aaa; $color-‐unchecked-‐hover: #777; $color-‐checked-‐static: #00a000; $color-‐checked-‐hover: #006e00; $color-‐disabled: #ddd;

I’m generally not a fan of transitions or animations unless they are being used to help “tell the story” of a UI component - help users understand what is happening.

Transitions should not draw attention to themselves. Ideally they should be simple and subtle.

For the checkbox, we could do a very simple transition to animate the switch from unchecked to checked - to help users understand what has happened.

We can do this by transitioning the “left” property as it changes from unchecked to checked.

.switch__label:after { left: $toggle-‐gutter; transition: left .04s; } .switch__control:checked + label:after { left: $switch-‐height + $toggle-‐gutter; }

We can also softly animate the background-color to avoid a jarring change.

.switch__label { background: $color-‐unchecked-‐static; transition: background .2s; } .switch__control:hover + label, .switch__control:focus + label { background: $color-‐unchecked-‐hover; }

A simple, accessible language switcher module: https://russmaxdesign.github.io/language- switcher/ Github: https://github.com/russmaxdesign/language- switcher

Upvote - downvote module: https://russmaxdesign.github.io/upvote-downvote/ Github: https://github.com/russmaxdesign/upvote- downvote

Russ Weakley Max Design Site: maxdesign.com.au Twitter: twitter.com/russmaxdesign Slideshare: slideshare.net/maxdesign Linkedin: linkedin.com/in/russweakley

Creating a Simple, Accessible On/Off Switch

More Related Content

Viewers also liked

Similar to Creating a Simple, Accessible On/Off Switch

More from Russ Weakley

Recently uploaded

In this document

Creating a Simple, Accessible On/Off Switch