eBay

Checkbox

Custom checkbox style

Introduction

Allows selection of zero or more items in a group of options.

HTML gives us native checkboxes that are fully accessible by default. Unfortunately, the look-and-feel of these controls is often at odds with a web site's design system or branding guidelines. This issue is compounded by the fact that native checkboxes are traditonally very difficult to re-style.

Our pattern shows how modern CSS and SVG can be used to create a custom facade over the native checkboxes, while maintaining accessibility requirements.


Last Updated June 10th, 2017

Icon font replaced with inline SVG.


Working Examples

You can take a look at the checkbox pattern in action on our examples site.

You can see a real life working example in our Skin CSS Framework.


Best Practices

Checkboxes are form controls and should be inside a form tag. The form should have a submit button.

Individual checkboxes must have a visible, onscreen label. Typically we use a label tag to achieve this.

Groups of related checkboxes must have a group label. Typically we use fieldset and legend tags to achieve this.


Interaction Design

This section provides interaction design for keyboard, screen reader and pointing devices.

Keyboard

Checkbox must be keyboard focusable (unless disabled).

If checkbox has keyboard focus, pressing SPACEBAR must toggle the checked state.

If checkbox has keyboard focus, pressing ENTER key must submit the form.

If checkbox has keyboard focus, pressing TAB key or SHIFT-TAB key combo moves keyboard focus to next or previous interactive element on page respectively.

Screen Reader

Checkbox must be reachable with screen reader (even when disabled).

Checkbox must be announced as "checkbox".

Checkbox label must be announced.

Checkbox group label, if applicable, must be announced.

Checkbox state must be announced.

Pointer

Clicking checkbox must toggle the checked state.

Clicking checkbox label must toggle the checked state.


Developer Guide

Our sample implementation follows the Progressive Enhancement strategy; we build in a layered fashion that allows everyone to access the basic content and functionality of a web page.

The three layers are:

  1. Content (HTML)
  2. Presentation (CSS)
  3. Behaviour (JS) (not required)

Our checkboxes will be fully visible and operable in an HTML-only state, an HTML+CSS state, and an HTML+CSS+JavaScript state.

Native HTML

Native HTML checkboxes are 100% accessible by default and support features such as form data, form reset and form complete.

Native HTML checkboxes should always be your baseline starting point.

<fieldset>
  <legend>Auction Type</legend>
  <span>
    <input id="at_freeshipping" type="checkbox" name="at_freeshipping" />
    <label for="at_freeshipping">Free Shipping</label>
  </span>
  <span>
    <input id="at_endssoon" type="checkbox" name="at_endssoon" />
    <label for="at_endssoon">Ends soon</label>
  </span>
  <span>
    <input id="at_zerobids" type="checkbox" name="at_zerobids" />
    <label for="at_zerobids">Zero bids</label>
  </span>
</fieldset>

The fieldset creates the grouping semantics. The legend creates the group label.

Each input and label pair are further grouped inside a span container. This span container can be replaced with a div for vertical stacking of checkboxes.

Custom Checkbox

Native HTML checkboxes are 100% accessible by default, but may not match your design system look & feel.

We will now show how CSS and inline SVG can give you the visuals you desire, without any JavaScript.

We are going to:

  1. Hide the native checkbox
  2. Display one of two SVG paths (checked or unchecked) in it's place
  3. Assign a focus outline to the SVG

Markup Changes

We need to create a new container element that will host each checkbox and it's inline SVG. We give it a class of checkbox:

<fieldset>
  <legend>Auction Type</legend>
  <span>
    <span class="checkbox">
      <input class="checkbox__control" id="at_freeshipping" type="checkbox" name="at_freeshipping" />
      <!-- inline svg goes here -->
    </span>
    <label for="at_freeshipping">Free Shipping</label>
  </span>
  <span>
    <span class="checkbox">
      <input class="checkbox__control" id="at_endssoon" type="checkbox" name="at_endssoon" />
      <!-- inline svg goes here -->
    </span>
    <label for="at_endssoon">Ends soon</label>
  </span>
  <span>
    <span class="checkbox">
      <input class="checkbox__control" id="at_zerobids" type="checkbox" name="at_zerobids" />
      <!-- inline svg goes here -->
    </span>
    <label for="at_zerobids">Zero bids</label>
  </span>
</fieldset>

For convenience, we also add a .checkbox__control BEM element modifier to each input tag.

Invisible Input

We make the native input invisible, and keep it in place, using opacity and absolute positioning:

.checkbox__control {
  opacity: 0;
  position: absolute;
  z-index: 1;
}

We keep the checkbox in place, so that we can continue to click on it. Although invisible, it is still this native input that receives click and focus events. This is important so that the underlying input maintains all built-in event handling and state.

Remember, clicking the label of a checkbox will also toggle the checked state.

Inline SVG

Todo...

Custom Focus Outline

Remember that the keyboard will always focus on the real, native input. However, we cannot see the real focus indicator because the element has 0 opacity. To workaround this, we can create a custom focus outline around the SVG element:

.checkbox__control:focus + .checkbox__icon {
  outline: 1px dotted #767676;
}

A dotted border is a good choice, mimicking that of various browsers (such as Firefox).

ARIA Reference

This section gives an overview of our use of ARIA, within the specific context of the checkbox pattern.

aria-hidden

Removes the presentational SVG element from the accessibility tree.

results matching ""

    No results matching ""