diff options
Diffstat (limited to 'js/reveal.js')
| -rw-r--r-- | js/reveal.js | 34 |
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' ); |