Copy of 'Copy of 'Copy of 'Part 4: Custom Checkbox Widget with synchronization of ARIA and visual states'''

Show Copy

Settings

Title

Description

Web Key

Public

Last updated: May 21, 2024, 5:52 p.m.

HTML Head

HTML Body

<h1>Part 4: Custom Checkbox Widget with synchronization of ARIA and visual states</h1>
<fieldset>
    <legend>
        Pizza Toppings
    </legend>
    <label>
      <input type="checkbox" 
             onfocus="checkboxFocus(event)" 
             onblur="checkboxBlur(event)">
        Green pepper
     </label>
    <label>
      <input type="checkbox" 
             onfocus="checkboxFocus(event)" 
             onblur="checkboxBlur(event)">
        Onion        
    </label>
    <div class="checkbox"
         role="checkbox"
         aria-checked="false"
         tabindex="0"
         onclick="clickCheckbox(event)"
         onkeydown="keydownCheckbox(event)">
      <span aria-hidden="true"></span>      
        Mushrooms        
    </div>
    <div class="checkbox"
         role="checkbox"
         aria-checked="false"
        tabindex="0"
       	onclick="clickCheckbox(event)"
        onkeydown="keydownCheckbox(event)">
      <span aria-hidden="true"></span>
          Spinach
    </div>
  </fieldset>

CSS

JavaScript