All around accessibility

README.md

@@ -68,6 +68,88 @@ Run the following command from within the `audiojs` folder.
 ### Bower package
 
     bower install audiojs
+
+## A11y
+
+Screen reader accessibility support has been added for both play/pause and scrubber.
+
+1. Play/pause:
+
+- ARIA roles and labels
+
+        <div class="play-pause"> 
+          <p role="button" tabindex="0" aria-label="play" class="play"></p> 
+          <p role="button" tabindex="0" aria-label="pause" class="pause"></p> 
+          <p class="loading" aria-label="loading"></p> 
+          <p class="error" aria-label="error"></p> 
+        </div> 
+
+- Enter and space down listener
+
+        container[audiojs].events.addListener(playPause, 'keydown', function(e) {
+            var prevent = false;
+
+            if (e.keyCode === 32 || e.keyCode === 13) {
+              audio.playPause.apply(audio);
+              prevent = true;
+            }
+
+            if (prevent) {
+              e.preventDefault();
+              e.stopPropagation();
+            }
+        });
+
+2. Scrubber:
+
+- ARIA roles and attributes
+
+        <div class="scrubber" role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="0" aria-valuemax="0" aria-label="seek">
+
+- Update ARIA attributes
+
+        scrubber.setAttribute("aria-valuemax", Math.round(this.duration));
+
+        var aria_p = Math.round(p);
+        if (aria_p % 5 === 0) scrubber.setAttribute("aria-valuenow", aria_p);
+
+
+- Arrow keys down listener
+
+        container[audiojs].events.addListener(scrubber, 'keydown', function(e) {
+            var progressLeft = progress.offsetWidth,
+              prevent = false;
+
+            switch (e.keyCode) {
+              case 34:
+              case 37:
+              case 40:
+                audio.skipTo((progressLeft - 5) / scrubber.offsetWidth);
+                prevent = true;
+                break;
+
+              case 33:
+              case 39:
+              case 38:
+                audio.skipTo((progressLeft + 5) / scrubber.offsetWidth);
+                prevent = true;
+                break;
+
+              default:
+                break;
+            }
+
+            if (prevent) {
+              e.preventDefault();
+              e.stopPropagation();
+            }
+        });
+
+Also, visual focus for keyboard users:
+
+        .audiojs p:focus { outline: 2px solid white; }
+        .audiojs .scrubber:focus { outline: 2px solid white }
+
 
 ### License