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

<input
type="radio"
name="example01"
id="example01">
</label>
</div>
radio

<input
type="checkbox"
name="example01"
id="example01">
</label>
</div>
checkbox

<input
type="radio"
name="example01"
id="example01">
</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.

Parent Container

“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.

Control

“switch__control”

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

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Creating a Simple, Accessible On/Off Switch

Similar to Creating a Simple, Accessible On/Off Switch (20)

More from Russ Weakley

More from Russ Weakley (20)

Recently uploaded

Recently uploaded (20)

Creating a Simple, Accessible On/Off Switch