diff options
| -rw-r--r-- | .travis.yml | 2 | ||||
| -rw-r--r-- | js/reveal.js | 37 | ||||
| -rw-r--r-- | package.json | 2 |
3 files changed, 39 insertions, 2 deletions
diff --git a/.travis.yml b/.travis.yml index 2d6cd8f..165d9ae 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,5 +1,5 @@ language: node_js node_js: - - 0.8 + - 0.10 before_script: - npm install -g grunt-cli
\ No newline at end of file diff --git a/js/reveal.js b/js/reveal.js index 859449a..a4d5f02 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -446,6 +446,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' ) ); @@ -454,6 +456,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; + } /** @@ -1854,6 +1881,7 @@ // stacks if( previousSlide ) { previousSlide.classList.remove( 'present' ); + previousSlide.setAttribute( 'aria-hidden', 'true' ); // Reset all slides upon navigate to home // Issue: #285 @@ -1877,6 +1905,9 @@ startEmbeddedContent( currentSlide ); } + // Announce the current slide contents, for screen readers + dom.statusDiv.innerHTML = currentSlide.textContent; + updateControls(); updateProgress(); updateBackground(); @@ -1942,6 +1973,7 @@ verticalSlide.classList.remove( 'present' ); verticalSlide.classList.remove( 'past' ); verticalSlide.classList.add( 'future' ); + verticalSlide.setAttribute( 'aria-hidden', 'true' ); } } ); @@ -2019,6 +2051,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' ) ) { @@ -2066,6 +2099,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 @@ -2985,6 +3019,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; + if( i === index ) { element.classList.add( 'current-fragment' ); } diff --git a/package.json b/package.json index edc5981..c646e19 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,7 @@ "url": "git://github.com/hakimel/reveal.js.git" }, "engines": { - "node": "~0.8.0" + "node": "~0.10.0" }, "dependencies": { "underscore": "~1.5.1", |