A11y fixes

src/about.html

@@ -104,13 +104,13 @@
 <h1>Introducing AudioMass (<a href="https://audiomass.co" target="_blank">https://audiomass.co</a>) an open-source web based audio and waveform editing tool.</h1>
 
 
-<img class="top" src="/about/audiomass_top.jpg" />
+<img class="top" src="/about/audiomass_top.jpg" alt="Screenshot of AudioMass with parametric EQ options visible" />
 
 
 <p>AudioMass lets you record, or use your existing audio tracks, and modify them by trimming, cutting, pasting or applying a plethora of effects, from compression and paragraphic equalizers to reverb, delay and distortion fx. AudioMass also supports more than 20 hotkeys combinations and a dynamic responsive interface to ensure ease of use and that your producivity remains high.
 it is written solely in plain old-school javascript, weights approximately 65kb and has no backend or framework dependencies.</p>
 
-<img class="mid" src="/about/audiomass_support.jpg" />
+<img class="mid" src="/about/audiomass_support.jpg" alt="AudioMass shown running on multiple devices" />
 <p>It also has very good browser and device support.</p>
 
 
@@ -146,21 +146,21 @@ <h3>Getting Started</h3>
 <p>To get started, drag and drop an audio file, or try the included sample.<br />
 Once the file is loaded and you can view the waveform, zoom in, pan around, or select a region.</p>
 
-<img class="mid" src="/about/audiomass_2.jpg" />
+<img class="mid" src="/about/audiomass_2.jpg" alt="Screenshot of selected audio" />
 
 
 <h3>Recording Audio</h3>
 
 <p>To record audio, simply press the Recording button, or the <i>[R]</i> key.</p>
 
-<img class="mid" src="/about/audiomass_3.jpg" />
+<img class="mid" src="/about/audiomass_3.jpg" alt="Screenshot of recording in progress" />
 
 
 <h3>Exporting to mp3</h3>
 
 <p>In order to export back to mp3, click on 'File', then 'Export to mp3', and follow the modal's instructions.</p>
 
-<img class="mid" src="/about/audiomass_4.jpg" />
+<img class="mid" src="/about/audiomass_4.jpg" alt="Export MP3 screenshot" />
 
 </div>
 
@@ -177,11 +177,11 @@ <h3>The story behind AudioMass. And a short rant on web interfaces.</h3>
 <p>In general I am a big fan of the interfaces of DAWs <i>(Digital Audio Workstations)</i>, they are extremely, complex, intricate, versatile, and they manage to remain visually pleasant even through their infinite options and knobs. Many times I feel the web has taken a very wrong turn, as amazing interfaces such as...
 
 <p class="nomarg">Sonar</p>
-<img class="mid" src="/about/sonar.jpg" />
+<img class="mid" src="/about/sonar.jpg" alt="Sonar screenshot" />
 
 <br />
 <p class="nomarg">Fruity loops</p>
-<img class="mid" src="/about/fruity.png" />
+<img class="mid" src="/about/fruity.png" alt="Fruity loops screenshot" />
 
 <br />
 

src/fx-pg-eq.js

@@ -1615,8 +1615,10 @@
 				};
 				if (!PKAudioEditor.engine.wavesurfer.isReady)
 				{
-					play_btn.className += ' pk_inact';
-					both_btn.className += ' pk_inact';
+					// play_btn.className += ' pk_inact';
+					_setButtonState(play_btn,'inactive');
+					// both_btn.className += ' pk_inact';
+					_setButtonState(both_btn,'inactive');
 				}
 
 				if (PKAudioEditor.engine.wavesurfer.isPlaying()) {
@@ -1865,8 +1867,10 @@
 
 				if (!PKAudioEditor.engine.wavesurfer.isReady)
 				{
-					play_btn.className += ' pk_inact';
-					loop_btn.className += ' pk_inact';
+					// play_btn.className += ' pk_inact';
+					_setButtonState(play_btn,'inactive');
+					// loop_btn.className += ' pk_inact';
+					_setButtonState(loop_btn,'inactive');
 				}
 				if (PKAudioEditor.engine.wavesurfer.isPlaying()) {
 					play_btn.className += ' pk_act';
@@ -2877,14 +2881,16 @@
 							  }
 
 							  is_ready = true;
-							  btn_start.classList.remove ('pk_inact');
+									// btn_start.classList.remove ('pk_inact');
+									_setButtonState(btn_start,'active');
 							});
 						}
 						else {
 							devices_sel.parentNode.style.display = 'none';
 							has_devices = false;
 							is_ready = true;
-							btn_start.classList.remove ('pk_inact');
+							// btn_start.classList.remove ('pk_inact');
+							_setButtonState(btn_start,'active');
 						}
 					};
 
@@ -2934,7 +2940,8 @@
 						if (is_active) {
 							stop ();
 
-							btn_pause.classList.add ('pk_inact');
+							// btn_pause.classList.add ('pk_inact');
+							_setButtonState(btn_pause,'inactive');
 							btn_start.innerText = 'START RECORDING';
 
 							return ;
@@ -2969,7 +2976,8 @@
 			            	script_processor.connect ( audio_context.destination );
 
 			            	is_active = true;
-			            	btn_pause.classList.remove ('pk_inact');
+																// btn_pause.classList.remove ('pk_inact');
+																_setButtonState(btn_pause,'active');
 			            	btn_start.innerText = 'FINISH RECORDING';
 			            	script_processor.onaudioprocess = fetchBufferFunction;
 

src/index-cache.html

@@ -5,7 +5,7 @@
 	<link href="ico.png" rel="shortcut icon">
 	<meta charset="utf-8" />
 	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
-	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"/>
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"/>
 
 	<meta name="description" content="AudioMass is a free full-featured web-based audio &amp; waveform editing tool"/>
 	<meta property="og:image" content="https://audiomass.co/icon.jpg"/>
@@ -29,7 +29,10 @@
 	<link rel="stylesheet" type="text/css" href="main.css">
 </head>
 <body>
-	<div id="app"></div>
+
+<a href="#skipToolbar" class="skip">Skip to main toolbar</a>
+
+	<div id="app" role="application"></div>
 
 	<script src="dist/wavesurfer.js"></script>
 	<script src="dist/plugin/wavesurfer.regions.js"></script>

src/index.html

@@ -5,7 +5,7 @@
 	<link href="ico.png" rel="shortcut icon">
 	<meta charset="utf-8" />
 	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
-	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"/>
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"/>
 
 	<meta name="description" content="AudioMass is a free full-featured web-based audio &amp; waveform editing tool"/>
 	<meta property="og:image" content="https://audiomass.co/icon.jpg"/>
@@ -30,7 +30,10 @@
 	<link rel="stylesheet" type="text/css" href="main.css">
 </head>
 <body>
-	<div id="app"></div>
+
+<a href="#skipToolbar" class="skip">Skip to main toolbar</a>
+
+	<div id="app" role="application"></div>
 
 	<script src="dist/wavesurfer.js"></script>
 	<script src="dist/plugin/wavesurfer.regions.js"></script>

src/main.css

@@ -73,7 +73,8 @@ body,html{height:100%;background:#111;
 	white-space:nowrap
 }
 
-.pk_hdr .pk_btn:hover{
+.pk_hdr .pk_btn:hover,
+.pk_hdr .pk_btn:focus-within{
 	background:#eee;
 	color:#111
 }
@@ -630,7 +631,7 @@ a{cursor:pointer;color:#99c2c6;-webkit-tap-highlight-color:rgba(0,0,0,0)}
 	box-shadow: 0 2px 12px rgba(138, 58, 138, 0.5);
 	background-clip: padding-box;
 }
-.pk_contextMenu a, .pk_contextMenu a:hover{
+.pk_contextMenu a, .pk_contextMenu a:hover, .pk_contextMenu a:focus{
 	clear: both;
 	color: #eee;
 	display: block;
@@ -645,7 +646,8 @@ a{cursor:pointer;color:#99c2c6;-webkit-tap-highlight-color:rgba(0,0,0,0)}
 	font-weight:normal;
 	transition: all 110ms;
 }
-.pk_contextMenu a:hover{
+.pk_contextMenu a:hover,
+.pk_contextMenu a:focus{
 	color:#99c2c6;
 	line-height: 18px;
 	text-decoration: none;
@@ -936,7 +938,8 @@ a{cursor:pointer;color:#99c2c6;-webkit-tap-highlight-color:rgba(0,0,0,0)}
 	-webkit-user-select:none;
 	user-select:none;
 }
-.pk_modal_a_bottom:hover{
+.pk_modal_a_bottom:hover,
+.pk_modal_a_bottom:focus{
 	/*background: #eee;
     color: #111;
     border-color: #eee;*/
@@ -958,7 +961,8 @@ a{cursor:pointer;color:#99c2c6;-webkit-tap-highlight-color:rgba(0,0,0,0)}
     transition: background 120ms;
 }
 
-.pk_modal_cancel:hover{
+.pk_modal_cancel:hover,
+.pk_modal_cancel:focus{
 	box-shadow: 0 0 6px rgba(158, 39, 39, 0.6);
     border-color: unset;
     background: #280a0ac7;
@@ -970,7 +974,8 @@ a{cursor:pointer;color:#99c2c6;-webkit-tap-highlight-color:rgba(0,0,0,0)}
     transition: border-color 120ms, color 120ms;
 }
 
-.pk_modal_a_accpt:hover{
+.pk_modal_a_accpt:hover,
+.pk_modal_a_accpt:focus{
     color: #99c2c6;
 }
 
@@ -1153,7 +1158,8 @@ a{cursor:pointer;color:#99c2c6;-webkit-tap-highlight-color:rgba(0,0,0,0)}
     letter-spacing: normal;
 }
 
-.pk_sel_edt:hover > span{
+.pk_sel_edt:hover > span,
+.pk_sel_edt:focus > span{
 	visibility:visible;
 	opacity: 1;
 }
@@ -1666,7 +1672,8 @@ input.pk_horiz.pk_w180{
     transition:background 120ms;
 }
 
-.pk_pgeq_els:hover{
+.pk_pgeq_els:hover,
+.pk_pgeq_els:focus{
 	background:#3b413f;
 }
 
@@ -1821,7 +1828,8 @@ body.pk_stndln{
 	background:#303030;
 }
 
-.pk_tbsa:hover{
+.pk_tbsa:hover,
+.pk_tbsa:focus{
 	box-shadow: inset 0 -2px 6px #181818;
 }
 
@@ -1894,7 +1902,8 @@ body.pk_stndln{
     transition: background 70ms;
 }
 
-#pk_tmp_tap3:hover{
+#pk_tmp_tap3:hover,
+#pk_tmp_tap3:focus{
 	background:#363636;
 }
 
@@ -1930,7 +1939,8 @@ body.pk_stndln{
     padding-right:5px;
 }
 
-.pk_lcldrf:hover{
+.pk_lcldrf:hover,
+.pk_lcldrf:focus{
 	background:#292929;
 }
 
@@ -1987,3 +1997,47 @@ body.pk_stndln{
 .pk_aut{
     box-shadow: 0px 0px 20px #eee, inset 0px 0px 4px gold;
 }
+
+/* a11y fixes */
+
+/*for skip links*/
+.skip {
+	height: 1px;
+	overflow: hidden;
+	position: absolute;
+	white-space: nowrap;
+	width: 1px;
+	left:-10px;
+}
+a.skip:focus {
+	clip: none;
+	height: auto;
+	overflow: none;
+	width: auto;
+	background: black;
+	color:white;
+	font-weight: bold;
+	font-size: 22px;
+	padding: 10px;
+	z-index: 1000;
+	top: 30px;
+	left: 15px;
+	border: 2px solid white;
+	border-radius: 3px;
+	outline: none;
+}
+#skipToolbar:focus {
+	outline: 2px solid white;
+}
+
+* .pk_btn, .pk_pan_btn {	
+	cursor: pointer;
+	transition-duration: 0.2s;
+}
+* .pk_btn:focus,
+.pk_pan_btn:focus {
+	border:3px solid black;
+	color:black;
+	background: white;
+	box-shadow: 0 0 0 2px #fff;
+}

src/modal.js

@@ -24,6 +24,10 @@
 		// var centerer
 		var el_cont = d.createElement ('div');
 		el_cont.className = 'pk_modal_cnt';
+		el_cont.setAttribute('role','dialog');
+		el_cont.setAttribute('aria-modal','true');
+		el_cont.setAttribute('aria-labelledby','dialogHeading');
+		el_cont.setAttribute('aria-describedby','dialogContent');
 		this.el_cont = el_cont;
 
 		// title