diff options
Diffstat (limited to 'js')
| -rw-r--r-- | js/reveal.js | 37 |
1 files changed, 37 insertions, 0 deletions
diff --git a/js/reveal.js b/js/reveal.js index 68d29a8..fdaa928 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -432,6 +432,8 @@ dom.controls = document.querySelector( '.reveal .controls' ); dom.theme = document.querySelector( '#theme' ); + 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' ) ); @@ -440,6 +442,31 @@ 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( 'aria-status-div' ); + if( !statusDiv ) { + statusDiv = document.createElement( 'div' ); + statusDiv.style.position = 'absolute'; + statusDiv.style.height = '1px'; + statusDiv.style.width = '1px'; + statusDiv.style.overflow ='hidden'; + statusDiv.style.clip = 'rect( 1px, 1px, 1px, 1px )'; + statusDiv.setAttribute( 'id', 'aria-status-div' ); + statusDiv.setAttribute( 'aria-live', 'polite' ); + statusDiv.setAttribute( 'aria-atomic','true' ); + dom.wrapper.appendChild( statusDiv ); + } + return statusDiv; + } /** @@ -1800,6 +1827,7 @@ // stacks if( previousSlide ) { previousSlide.classList.remove( 'present' ); + previousSlide.setAttribute( 'aria-hidden', 'true' ); // Reset all slides upon navigate to home // Issue: #285 @@ -1823,6 +1851,9 @@ startEmbeddedContent( currentSlide ); } + // Announce the current slide contents, for screen readers + dom.statusDiv.innerHTML = currentSlide.textContent; + updateControls(); updateProgress(); updateBackground(); @@ -1888,6 +1919,7 @@ verticalSlide.classList.remove( 'present' ); verticalSlide.classList.remove( 'past' ); verticalSlide.classList.add( 'future' ); + verticalSlide.setAttribute( 'aria-hidden', 'true' ); } } ); @@ -1965,6 +1997,7 @@ // http://www.w3.org/html/wg/drafts/html/master/editing.html#the-hidden-attribute element.setAttribute( 'hidden', '' ); + element.setAttribute( 'aria-hidden', 'true' ); // If this element contains vertical slides if( element.querySelector( 'section' ) ) { @@ -2012,6 +2045,7 @@ // Mark the current slide as present slides[index].classList.add( 'present' ); slides[index].removeAttribute( 'hidden' ); + slides[index].removeAttribute( 'aria-hidden' ); // If this slide has a state associated with it, add it // onto the current state of the deck @@ -2931,6 +2965,9 @@ element.classList.add( 'visible' ); element.classList.remove( 'current-fragment' ); + // Announce the fragments one by one to the Screen Reader + dom.statusDiv.innerHTML = element.textContent.trim(); + if( i === index ) { element.classList.add( 'current-fragment' ); } |