The humble radio button

 

Estelle Weyl (@estellevw)

https://estelle.github.io/flashback/

@heydon

@nikkipantony

@davidkpiano

@estelle

Estelle Weyl

www.standardista.com

@estellevw
@standardista
@perfmattersconf

HTML5 and CSS3 for the Real World Animations and Transitions with CSS MObile HTML5 Web Performance Daybook Flexbox in CSS CSS: The Definitive Guide

2011

<script src="jquery.js"></script>
          
<script type="text/javascript"> 
   $('li:first').addClass('first');
</script>
Addepar Ember Widgets

Tools are free

Open

Someone has to pay!

Tools are free

Select which frameworks and libraries to include:
Add some APIS and plugins:
Add some tags, adds, and trackers:
WebPageTest for CNN

Someone has to pay!

BundlePhobia

HTML is Free

HTML is by default accessible.
It is our job as developers
to not fuck that up.

HTML is by default fast.
It is our job as developers
to not fuck that up.

HTML is Free

HTML is basically ^ Free

HTML is basically ^ Free
and it's amazing!

Accessibility

Screen Reader experience

click here

Hearing impaired experience

Vine

Color Blindness experience

Disability: a mismatch in interaction between the features of a person’s body and the features of the environment in which they live. — Alistair Duggin (@dugboticus) April 14, 2016

We all benefit from the ADA

Disability is a spectrum

permanent
Temporary
situational
permanent
Temporary
situational
Accessibility is:

Accessible
Rich
Internet
Applications

The 1st rule of ARIA use is if you can use a native HTML element or attribute with the semantics behavior already built in,
do that instead!

 

Accessibility is:

 

Radio Buttons are:
Spec
original proposal

<input> types

HTML 2

  • checkbox
  • hidden
  • image
  • password
  • radio
  • reset
  • submit
  • text

HTML 3.2

  • file

HTML 4

  • button

HTML 5

  • email
  • url
  • search
  • tel
  • number
  • range
  • date
  • time
  • color
  • datetime-local
  • week
  • month

Form related elements

HTML 2

  • <form>
  • <input>
    • checkbox
    • hidden
    • image
    • password
    • radio
    • reset
    • submit
    • text
  • <select>
  • <textarea>
  • <option>

HTML 3.2

  • file

HTML 4

  • <button>
  • <fieldset>
  • <input>
    • button
  • <fieldset>
  • <label>
  • <legend>
  • <optgroup>

HTML 5

  • <input>
    • email
    • url
    • search
    • tel
    • number
    • range
    • date
    • time
    • color
    • datetime-local
    • week
    • month
  • <meter>
  • <output>
  • <progress>

Remember?

Radio Buttons are:

Markup

<form method="" action="">
  <fieldset>
    <legend>Radio Buttons are:</legend>
    <ul>
      <li>
        <input id="rbb1" type="radio" name="buttons" value="accessible"> 
        <label for="rbb1">by default accessible</label>
      </li>
      <li>
        <input id="rbb2" type="radio" name="buttons" value="useful"> 
        <label for="rbb2">super useful</label>
      </li>
      <li>
        <input id="rbb3" type="radio" name="buttons" value="navigable"> 
        <label for="rbb3">natively navigable</label>
      </li>
      <li>
        <input id="rbb4" type="radio" name="buttons" value="supported"> 
        <label for="rbb4">supported in all browsers</label>
      </li>
      <li>
        <input id="rbb5" type="radio" name="buttons" value="semantic"> 
        <label for="rbb5">semantic</label>
      </li>
      <li>
        <input id="rbb6" type="radio" name="buttons" value="simple"> 
        <label for="rbb6">easy to implement</label>
      </li>
      <li>
        <input id="rbb7" type="radio" name="buttons" value="all"> 
        <label for="rbb7">All of the above</label>
      </li>
    </ul>
  </fieldset>
  
  <input type="submit" value="Submit">
</form>
*dont worry if you can read this yet.

Markup: <form>

<form method="" action="">
</form>

Markup: <form>

<form method="POST" action="#formid">
</form>
method
HTTP method to submit form:
  • POST: data sent as request body
  • GET: data appended to action URL
action
URL that processes the form submission

overridden by formmethod and formaction attributes on <button>, <input type="submit">, or <input type="image">

Other attributes include: accept, accept-charset, autocomplete, enctype, name, novalidate, and target

Markup: <fieldset>

<form method="POST" action="#formid">
  <fieldset>
  </fieldset>
</form>

Markup: <fieldset>

<form method="POST" action="#formid">
  <fieldset>
  </fieldset>
</form>
<fieldset>
Used to group several form controls and their labels.
Open

Markup: <legend>

<form method="POST" action="#formid">
  <fieldset>
    <legend></legend>
  </fieldset>
  <input type="submit" value="Submit">
</form>

Markup: <legend>

<form method="POST" action="#formid">
  <fieldset>
    <legend>Radio Buttons are:</legend>
  </fieldset>
  <input type="submit" value="Submit">
</form>
<legend>
The caption for the content of its parent <fieldset>.
Open

@heydon

Markup: <input type="submit">

<form method="POST" action="#formid">
  <fieldset>
    <legend>Radio Buttons are:</legend>
  </fieldset>
  <input type="submit" value="Submit">
</form>
<input> buttons
  • submit
  • button
  • reset
  • image
<button> buttons
  • submit
  • button
  • reset

Markup: <input type="radio">

<form method="POST" action="#formid">
  <fieldset>
    <legend>Radio Buttons are:</legend>
    <ul>
      <li>
        <input id="rbb1" type="radio" name="buttons" value="accessible"> 
      </li>
      <li>
        <input id="rbb2" type="radio" name="buttons" value="useful"> 
      </li>
      <li>
        <input id="rbb3" type="radio" name="buttons" value="navigable"> 
      </li>
    </ul>
  </fieldset>
  
  <input type="submit" value="Submit">
</form>

Markup: <input type="radio">

<input id="rbb1" 
  type="radio" name="buttons" value="accessible"> 

<input id="rbb2" 
  type="radio" name="buttons" value="useful"> 

<input id="rbb3" 
  type="radio" name="buttons" value="navigable">
HTML2 spec

Markup: <input type="radio">

<input id="rbb2" 
  type="radio" name="buttons" value="useful"> 

<input id="rbb3" 
  type="radio" name="buttons" value="navigable">
  • INPUT element with `TYPE=RADIO' represents a boolean choice.
  • A set with the same NAME creates a 1-of-many choice field.
  • The NAME and VALUE attributes are required.
  • The name and value of the CHECKED radio button will be sent with the form.
  • REQUIRED on any means one is required.
  • `:required` only matches those with the attribute set.

Use Radio buttons!

Without CSS

Use Radio buttons!

ARIA for fake radio buttons

Use Radio buttons!

ARIA for fake radio buttons
Open

Markup: <label>

<form method="POST" action="http://x.y">
  <fieldset>
    <legend>Radio Buttons are:</legend>
    <ul>
      <li>
        <input id="rbb1" type="radio" name="buttons" value="accessible"> 
        <label for="rbb1">by default accessible</label>
      </li>
      <li>
        <input id="rbb2" type="radio" name="buttons" value="useful"> 
        <label for="rbb2">super useful</label>
      </li>
      <li>
        <input id="rbb3" type="radio" name="buttons" value="navigable"> 
        <label for="rbb3">natively navigable</label>
      </li>
    </ul>
  </fieldset>
  <input type="submit" value="Submit">
</form>

Markup: <label>

<input id="rbb2" 
  type="radio" name="r" value="explicit"> 
<label for="rbb2">explicit label</label>

<label>
  <input type="radio" name="r" value="implicit"> 
  implicit label
</label>
  • Caption for an item in a user interface.
  • Explicit or implicit
  • Can't contain other form controls, buttons, or link
  • Don't use with buttons
If a form, or a section of a form needs a title, use the <legend> element placed within a <fieldset>.
Open

Mary Lou

Replaced radio buttons

  • Position native input on top of SVG; people exploring by touch expect to find input where it should be. via @SaraSoueidan
  • Style radio button:
    opacity: 0;
    position: absolute;
  • Style the label with
    input[type="radio"]:checked + label
  • Or, use ::before/::after with:
    -webkit-appearance: none;

Styles the radio button

@nikkipantony

@davidkpiano 

<form action="editaddress.html">
<fieldset>
<legend>Select an address to edit:</legend>
<div class="carousel">
<span class="backward" data-move="backward" data-carousel="shipping-addresses" hidden aria-hidden="true"></span>
<ul class="shipping-addresses left0">
  <li>
    <label for="address1">
      <p>Estelle Weyl</p>
      <p>The Stubborn Mule</p>
      <p>100 South Eola Drive</p>
      <p>Orlando, FL 32801</p>
    </label>
  </li>
  <li>
    <label for="address2">
      <p>Elizabeth Warren</p>
      <p>1600 Pennsylvania Avenue NW</p>
      <p>Washington DC 20500</p>
      <p>202-456-1111</p>
    </label>
  </li>
  <li>
    <label for="address3">
      <p>Tom Steyer</p>
      <p>1600 Pennsylvania Avenue NW</p>
      <p>Washington DC 20500</p>
      <p>202-456-1111</p>
    </label>
  </li>
  <li>
    <label for="address4">
      <p>Bernie Sanders</p>
      <p>1600 Pennsylvania Avenue NW</p>
      <p>Washington DC 20500</p>
      <p>202-456-1111</p>
    </label>
  </li>
  <li>
    <label for="address5">
      <p>Amy Klobuchar</p>
      <p>1600 Pennsylvania Avenue NW</p>
      <p>Washington DC 20500</p>
      <p>202-456-1111</p>
    </label>
  </li>
  <li>
    <label for="address6">
      <p>Nancy Pelosi</p>
      <p>1600 Pennsylvania Avenue NW</p>
      <p>Washington DC 20500</p>
      <p>202-456-1111</p>
    </label>
  </li>
</ul>
<span class="forward" data-move="forward" data-carousel="shipping-addresses" hidden aria-hidden="true"></span>
</div>
<ul id="addressradios" class="carousel-radios">
  <li>
    <input type="radio" name="shipping-addresses" value="0" id="address1" checked><span></span>
  </li>
  <li>
    <input type="radio" name="shipping-addresses" value="1" id="address2"><span></span>
  </li>
  <li>
    <input type="radio" name="shipping-addresses" value="2" id="address3"><span></span>
  </li>
  <li>
    <input type="radio" name="shipping-addresses" value="3" id="address4"><span></span>
  </li>
  <li>
    <input type="radio" name="shipping-addresses" value="4" id="address5"><span></span>
  </li>
  <li>
    <input type="radio" name="shipping-addresses" value="5" id="address6"><span></span>
  </li>
</ul>
</fieldset>
<div class="buttons">
  <input type="submit" class="btn button-link" value="Edit">
  <a href="addaddress.html" class="btn button-link">Add<span class="a11y"> a new address</span></a>
</div> 
</form>

Code

Country Selector

Code

<fieldset id="languageSelector">
<legend>Select your country:</legend>
<ul>
  <li>
    <input type="radio" name="langSelect" id="langAR" value="AR">
    <label for="langAR" class="langAR">Argentina</label>
  </li>
  <li>
    <input type="radio" name="langSelect" id="langAU" value="AU">
    <label for="langAU" class="langAU">Australia</label>
  </li>
  <li>
    <input type="radio" name="langSelect" id="langBR" value="BR">
    <label for="langBR" class="langBR">Brazil</label>
  </li>
  <li>
    <input type="radio" name="langSelect" id="langCA" value="CA">
    <label for="langCA" class="langCA">Canada</label>
  </li>
  <li>
    <input type="radio" name="langSelect" id="langCL" value="CL">
    <label for="langCL" class="langCL">Chile</label>
  </li>
  <li>
    <input type="radio" name="langSelect" id="langCN" value="CN">
    <label for="langCN" class="langCN">China</label>
  </li>
  <li>
    <input type="radio" name="langSelect" id="langCO" value="CO">
    <label for="langCO" class="langCO">Colombia</label>
  </li>
  <li>
    <input type="radio" name="langSelect" id="langHK" value="HK">
    <label for="langHK" class="langHK">Hong Kong</label>
  </li>
  <li>
    <input type="radio" name="langSelect" id="langMY" value="MY">
    <label for="langMY" class="langMY">Malaysia</label>
  </li>
  <li>
    <input type="radio" name="langSelect" id="langMX" value="MX">
    <label for="langMX" class="langMX">Mexico</label>
  </li>
  <li>
    <input type="radio" name="langSelect" id="langNZ" value="NZ">
    <label for="langNZ" class="langNZ">New Zealand</label>
  </li>
  <li>
    <input type="radio" name="langSelect" id="langPE" value="PE">
    <label for="langPE" class="langPE">Peru</label>
  </li>
  <li>
    <input type="radio" name="langSelect" id="langSG" value="SG">
    <label for="langSG" class="langSG">Singapore</label>
  </li>
  <li>
    <input type="radio" name="langSelect" id="langZA" value="ZA">
    <label for="langZA" class="langZA">South Africa</label>
  </li>
  <li>
    <input type="radio" name="langSelect" id="langAE" value="AE">
    <label for="langAE" class="langAE">United Arab Emirates</label>
  </li>
  <li>
    <input type="radio" aria-selected="true" checked="" name="langSelect" id="langUS" value="US">
    <label for="langUS" class="langUS">United States</label>
  </li>
</ul>
</fieldset>

@Estelle

Code

These all have issues

From 5 to 1

@Estelle

Carousel with no links!

Merry-go-round

Country Selector

The best things in life are free

Thank you!