Accessible Toggle Buttons

Developer
Jesse Glacken
Size
3,231 Kb
Views
30,360
  1. Accessible Toggle Buttons Previews
  2. Accessible Toggle Buttons HTML Codes
  3. Accessible Toggle Buttons CSS Codes
  4. Accessible Toggle Buttons JS Codes

How do I make an accessible toggle buttons?

Checkboxes and radio buttons styled as toggle buttons. Fully accessible via mouse and keyboard. (The last set of radio buttons still needs styling work.). What is a accessible toggle buttons? How do you make a accessible toggle buttons? This script and codes were developed by Jesse Glacken on 17 September 2022, Saturday.

Accessible Toggle Buttons Previews
IQ Test

Accessible Toggle Buttons - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Accessible Toggle Buttons</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<section role="document">	<header role="banner">	<hgroup>	<h1>Accessible Toggle Buttons</h1>	</hgroup>	</header> <!-- /@banner -->	<section role="main">	<form action="#">	<fieldset>	<legend>Radio Buttons styled as Toggle Buttons</legend>	<label for="rad1"><input type="radio" id="rad1" name="radiotoggle" value="rad1" /><span>Radio One</span></label>	<label for="rad2"><input type="radio" id="rad2" name="radiotoggle" value="rad2" /><span>Radio Two</span></label>	<label for="rad3"><input type="radio" id="rad3" name="radiotoggle" value="rad3" /><span>Radio Three</span></label>	</fieldset>	<fieldset>	<legend>Checkboxes styled as Toggle Buttons</legend>	<label for="chk1"><input type="checkbox" id="chk1" name="checktoggle1" value="chk1" /><span>Checkbox One</span></label>	<label for="chk2"><input type="checkbox" id="chk2" name="checktoggle2" value="chk2" /><span>Checkbox Two</span></label>	<label for="chk3"><input type="checkbox" id="chk3" name="checktoggle3" value="chk3" /><span>Checkbox Three</span></label>	</fieldset>	<fieldset class="offon">	<legend>Radio Buttons styled as Toggle Buttons</legend>	<label for="offon1"><input type="radio" id="offon1" name="offontoggle" value="off" /><span>Off</span></label>	<label for="offon2"><input type="radio" id="offon2" name="offontoggle" value="on" /><span>On</span></label>	</fieldset>	</form>	</section> <!-- /@main -->
</section> <!-- /@document --> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Accessible Toggle Buttons - Script Codes CSS Codes

form {	display: block;	position: relative;	margin-left: 200px;	background: rgba(0,0,0,.4);	width: 800px;	padding: 20px;	overflow: auto;	}	fieldset {	margin: 20px;	background: rgba(0,0,0,.2);	border: none;	}	legend {	font: 1.25em/1.25 Helvetica, Arial, sans-serif;	background: rgb(64,64,64);	display: block;	margin: 0;	padding: .5em;	color: rgb(234,234,234);	}	label {	display: block;	cursor: pointer;	float: left;	margin: 20px;	}	label span{	display: block;	margin: 8px;	padding: 8px;	font: 1.25em/1.25 Helvetica, Arial, sans-serif;	text-align: center;	color: rgba(123,64,32,.75);	text-shadow: 0 2px 0 rgba(255,255,255,.5);	border-radius: 5em;	-webkit-box-shadow: 0 8px 0 rgba(123,64,32,.75),	0 0 4px rgba(0,0,0,.25);	box-shadow: 0 8px 0 rgba(123,64,32,.75),	0 0 4px rgba(0,0,0,.25);	background: rgba(231,123,132,.75);	-webkit-transition: all .15s linear; -moz-transition: all .15s linear; -ms-transition: all .15s linear; -o-transition: all .15s linear;	transition: all .15s linear;	}	.offon {	position: relative;	}	.offon label {	margin: 0;	position: relative;	}	.offon label span {	margin: 8px 0;	}	#offon1 + span {	border-radius: 5em 0 0 5em;	margin-left: 8px;	position: relative;	z-index: 4;	}	#offon2 + span {	border-radius: 0 5em 5em 0;	position: relative;	z-index: 4;	}	#offon1:checked span,	#offon2:checked span {	z-index: -1;	}	label input:checked + span {	color: rgba(32,123,64,.75);	margin-top: 14px;	margin-bottom: 2px;	-webkit-box-shadow: 0 2px 0 0 rgba(32,123,64,.75),	0 0 4px 4px rgba(255,255,255,.9),	0 0 10px 10px rgba(128,255,64,.35);	box-shadow: 0 2px 0 0 rgba(32,123,64,.75),	0 0 4px 4px rgba(255,255,255,.9),	0 0 10px 10px rgba(128,255,64,.35);	background: rgba(123,231,132,.75);	z-index: 3;	}	label input:focus + span {	/*background: rgb(234,234,234);*/	box-shadow: 0 8px 0 rgba(32,64,123,.75),	0 0 4px 4px rgba(255,255,255,.9);	}	label input:focus:checked + span {	background: rgba(123,231,132,.75);	box-shadow: 0 2px 0 0 rgba(32,64,123,.75),	0 0 4px 4px rgba(255,255,255,.9),	0 0 10px 10px rgba(64,128,255,.35);	}	label input[type="radio"],	label input[type="checkbox"] {	position: absolute; left: -9999px;	}

Accessible Toggle Buttons - Script Codes JS Codes

/* * Necessary to get iOS to make <label> elements clickable */
var obj = {	/* properties */	labels: document.getElementsByTagName('label'),	init: function() {	this.util.configEvents();	for (i=0,allLabels=this.labels.length; i < allLabels; i++) {	this.util.addEvent(this.labels[i], 'click', function(){}, false);	}	},	util : { configEvents : function() { if (document.addEventListener) { this.addEvent = function(el, type, func, capture) {el.addEventListener(type, func, capture);}; this.stopBubble = function(evt) { evt.stopPropagation(); }; this.stopDefault = function(evt) { evt.preventDefault(); }; this.findTarget = function(evt, targetNode, container) { var currentNode = evt.target; while (currentNode && currentNode !== container) { if (currentNode.nodeName.toLowerCase() === targetNode) {return currentNode; break;} else { currentNode = currentNode.parentNode; } }; return false; }; } else if (document.attachEvent) { this.addEvent = function(el, type, func) {el["e" + type + func] = func; el[type + func] = function() { el["e" + type + func](window.event); }; el.attachEvent("on" + type, el[type + func]);}; this.stopBubble = function(evt) { evt.cancelBubble = true; }; this.stopDefault = function(evt) { evt.returnValue = false; }; this.findTarget = function(evt, targetNode, container) { var currentNode = evt.srcElement; while (currentNode && currentNode !== container) { if (currentNode.nodeName.toLowerCase() === targetNode) { return currentNode; break; } else { currentNode = currentNode.parentNode; } }; return false; }; } } /* end configEvents() */	} /* end util: */
};
obj.init();
Accessible Toggle Buttons - Script Codes
Accessible Toggle Buttons - Script Codes
Home Page Home
Developer Jesse Glacken
Username jesseGlacken
Uploaded September 17, 2022
Rating 3
Size 3,231 Kb
Views 30,360
Do you need developer help for Accessible Toggle Buttons?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jesse Glacken (jesseGlacken) Script Codes
Name
Tolerance Levels for Bootstrap Progress Bar
Progressively disclosed table cells
Verbosity meter
Language Translation Menu
Achievement Unlocked
Menu
Flyout Navigation
A Pen by Jesse Glacken
Tags
Bootstrap Responsive Menu Drawer
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!