Toggle navigation
WebEdit
New page
Samples
Login
Copy of 'Part 2: Custom Checkbox Widget with ARIA roles, checked state and accessible name'
Save
Show
Copy
Unsaved changes!
Settings
Hide
Title
Title
Description
Description
Web Key
Slug
Public
Last updated: April 20, 2024, 6:33 a.m.
HTML Head
HTML Body
<h1>Part 2: Custom Checkbox Widget with ARIA roles, checked state and accessible name</h1> <fieldset> <legend> Pizza Toppings </legend> <label> <input type="checkbox"/> Green pepper </label> <label> <input type="checkbox"/> 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
fieldset { border-color: #EEE; width: 10em; } fieldset legend { font-size: 100%; } label, div.checkbox { padding: 2px; width: 10em; display: block; margin-top: 0.25em; margin-bottom: 0.25em; } label input { margin-right: 0.5em; } div.checkbox span { padding: 0.25em; } div.checkbox span:before { content: '✗'; color: red; padding-right: 0.125em; } div.checkbox.checked span:before { content: '✓'; color: green; padding-right: 0.190em; }
JavaScript
function toggleCheckbox(node) { if (node.classList.contains('checked')) { node.classList.remove('checked'); node.setAttribute('aria-checked', 'false'); } else { node.classList.add('checked'); node.setAttribute('aria-checked', 'true'); } } function clickCheckbox(event) { var cb = event.currentTarget; toggleCheckbox(cb); event.stopPropagation(); event.preventDefault(); } function keydownCheckbox(event) { var cb = event.currentTarget; if (event.key === ' ') { toggleCheckbox(cb); event.stopPropagation(); event.preventDefault(); } }