Toggle navigation
WebEdit
New page
Samples
Login
Copy of 'Accessible Custom Checkbox Widget using ARIA'
Save
Show
Copy
Unsaved changes!
Settings
Hide
Title
Title
Description
Description
Web Key
Slug
Public
Last updated: April 26, 2024, 2:30 a.m.
HTML Head
HTML Body
<h1>Accessible Custom Checkbox Widget using ARIA</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 role="checkbox" tabindex="0" aria-checked="false" onkeydown="keydownCheckbox(event)" onclick="clickCheckbox(event)"> <span aria-hidden="true"></span> Mushrooms </div> <div role="checkbox" tabindex="0" aria-checked="false" onkeydown="keydownCheckbox(event)" onclick="clickCheckbox(event)"> <span aria-hidden="true"></span> Spinach </div> </fieldset>
CSS
fieldset { border-color: #EEE; width: 10em; } fieldset legend { font-size: 100%; } label, [role="checkbox"] { padding: 4px; margin-bottom: 0.25em; display: block; border: none; width: 10em; } label input { margin-right: 0.25em; } div[role="checkbox"] span:before { content: '✗'; color: red; padding-left: 0.125em; padding-right: 0.25em; } div[role="checkbox"][aria-checked="true"] span:before { content: '✓'; color: green; padding-left: 0.125em; padding-right: 0.315em; } label.focus, [role="checkbox"]:focus { padding: 2px; border: 2px solid #999; background-color: #DDE; } label:hover, [role="checkbox"]:hover { background-color: #CCD; }
JavaScript
function toggleCheckbox(node) { if (node.getAttribute('aria-checked') === 'true') { node.setAttribute('aria-checked', 'false'); } else { node.setAttribute('aria-checked', 'true'); } } function keydownCheckbox(event) { var cb = event.currentTarget; if (event.key === ' ') { toggleCheckbox(cb); event.stopPropagation(); event.preventDefault(); } } function clickCheckbox(event) { var cb = event.currentTarget; toggleCheckbox(cb); event.stopPropagation(); event.preventDefault(); } function checkboxFocus(event) { event.currentTarget.parentNode.classList.add('focus'); } function checkboxBlur(event) { event.currentTarget.parentNode.classList.remove('focus'); }