Make revealJS screen reader friendly by announcing the contents of each slide presented

1 files changed, 34 insertions, 0 deletions

diff --git a/js/reveal.js b/js/reveal.js
index 5cbb3ff..a923efd 100644
--- a/js/reveal.js
+++ b/js/reveal.js
@@ -386,6 +386,8 @@ var Reveal = (function(){
 		// Cache references to elements
 		dom.controls = document.querySelector( '.reveal .controls' );
 
+		dom.wrapper.setAttribute( 'role','application' );
+
 		// There can be multiple instances of controls throughout the page
 		dom.controlsLeft = toArray( document.querySelectorAll( '.navigate-left' ) );
 		dom.controlsRight = toArray( document.querySelectorAll( '.navigate-right' ) );
@@ -394,6 +396,31 @@ var Reveal = (function(){
 		dom.controlsPrev = toArray( document.querySelectorAll( '.navigate-prev' ) );
 		dom.controlsNext = toArray( document.querySelectorAll( '.navigate-next' ) );
 
+		dom.statusDiv = createStatusDiv();
+	}
+
+	/**
+	 * Creates a hidden div with role aria-live to announce the current slide content
+	 * Hide the div off-screen to make it available only to Assistive Technologies
+	 */
+	function createStatusDiv() {
+
+		var statusDiv = document.getElementById( 'statusDiv' );
+		if( !statusDiv ){
+			statusDiv = document.createElement( 'div' );
+			var statusStyle = statusDiv.style;
+			statusStyle.position = "absolute";
+			statusStyle.height = "1px";
+			statusStyle.width = "1px";
+			statusStyle.overflow ="hidden";
+			statusStyle.clip = "rect( 1px, 1px, 1px, 1px )";
+			statusDiv.setAttribute( 'id', 'statusDiv' );
+			statusDiv.setAttribute( 'aria-live', 'polite' );
+			statusDiv.setAttribute( 'aria-atomic','true' );
+			dom.wrapper.appendChild( statusDiv );
+		}
+		return statusDiv;
+
 	}
 
 	/**
@@ -1544,6 +1571,7 @@ var Reveal = (function(){
 		// stacks
 		if( previousSlide ) {
 			previousSlide.classList.remove( 'present' );
+			previousSlide.setAttribute( 'aria-hidden', 'true' );
 
 			// Reset all slides upon navigate to home
 			// Issue: #285
@@ -1628,6 +1656,7 @@ var Reveal = (function(){
 					verticalSlide.classList.remove( 'present' );
 					verticalSlide.classList.remove( 'past' );
 					verticalSlide.classList.add( 'future' );
+					verticalSlide.setAttribute( 'aria-hidden', 'true' );
 				}
 
 			} );
@@ -1703,6 +1732,7 @@ var Reveal = (function(){
 
 				// http://www.w3.org/html/wg/drafts/html/master/editing.html#the-hidden-attribute
 				element.setAttribute( 'hidden', '' );
+				element.setAttribute( 'aria-hidden', 'true' );
 
 				if( i < index ) {
 					// Any element previous to index is given the 'past' class
@@ -1740,6 +1770,8 @@ var Reveal = (function(){
 			// Mark the current slide as present
 			slides[index].classList.add( 'present' );
 			slides[index].removeAttribute( 'hidden' );
+			slides[index].removeAttribute( 'aria-hidden' );
+			dom.statusDiv.innerHTML = slides[index].innerHTML;
 
 			// If this slide has a state associated with it, add it
 			// onto the current state of the deck
@@ -2391,6 +2423,8 @@ var Reveal = (function(){
 						if( !element.classList.contains( 'visible' ) ) fragmentsShown.push( element );
 						element.classList.add( 'visible' );
 						element.classList.remove( 'current-fragment' );
+						//Announce the fragments one by one to the Screen Reader
+						dom.statusDiv.innerHTML = element.innerHTML;
 
 						if( i === index ) {
 							element.classList.add( 'current-fragment' );