kfitz/presentations.kfitz.info
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Nawaz committed 2014-03-27 16:39:27 +05:30
1 parent 9da952fea3
commit 20a725222b
2 files changed
+37 -3
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

js/reveal.js
+34
View File
@@ -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' );
js/reveal.min.js
Vendored
+3 -3
View File
@@ -1,9 +1,9 @@
/*!
* reveal.js 2.6.1 (2014-03-13, 09:22)
* reveal.js 2.6.2 (2014-03-27, 16:30)
* http://lab.hakim.se/reveal-js
* MIT licensed
*
* Copyright (C) 2014 Hakim El Hattab, http://hakim.se
*/
var Reveal=function(){"use strict";function a(a){if(b(),!ec.transforms2d&&!ec.transforms3d)return document.body.setAttribute("class","no-transforms"),void 0;window.addEventListener("load",A,!1);var d=Reveal.getQueryHash();"undefined"!=typeof d.dependencies&&delete d.dependencies,k(_b,a),k(_b,d),r(),c()}function b(){ec.transforms3d="WebkitPerspective"in document.body.style||"MozPerspective"in document.body.style||"msPerspective"in document.body.style||"OPerspective"in document.body.style||"perspective"in document.body.style,ec.transforms2d="WebkitTransform"in document.body.style||"MozTransform"in document.body.style||"msTransform"in document.body.style||"OTransform"in document.body.style||"transform"in document.body.style,ec.requestAnimationFrameMethod=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame,ec.requestAnimationFrame="function"==typeof ec.requestAnimationFrameMethod,ec.canvas=!!document.createElement("canvas").getContext,Vb=navigator.userAgent.match(/(iphone|ipod|android)/gi)}function c(){function a(){e.length&&head.js.apply(null,e),d()}function b(b){head.ready(b.src.match(/([\w\d_\-]*)\.?js$|[^\\\/]*$/i)[0],function(){"function"==typeof b.callback&&b.callback.apply(this),0===--f&&a()})}for(var c=[],e=[],f=0,g=0,h=_b.dependencies.length;h>g;g++){var i=_b.dependencies[g];(!i.condition||i.condition())&&(i.async?e.push(i.src):c.push(i.src),b(i))}c.length?(f=c.length,head.js.apply(null,c)):a()}function d(){e(),Q(),h(),cb(),X(!0),setTimeout(function(){dc.slides.classList.remove("no-transition"),ac=!0,t("ready",{indexh:Qb,indexv:Rb,currentSlide:Tb})},1)}function e(){dc.theme=document.querySelector("#theme"),dc.wrapper=document.querySelector(".reveal"),dc.slides=document.querySelector(".reveal .slides"),dc.slides.classList.add("no-transition"),dc.background=f(dc.wrapper,"div","backgrounds",null),dc.progress=f(dc.wrapper,"div","progress","<span></span>"),dc.progressbar=dc.progress.querySelector("span"),f(dc.wrapper,"aside","controls",'<div class="navigate-left"></div><div class="navigate-right"></div><div class="navigate-up"></div><div class="navigate-down"></div>'),dc.slideNumber=f(dc.wrapper,"div","slide-number",""),f(dc.wrapper,"div","state-background",null),f(dc.wrapper,"div","pause-overlay",null),dc.controls=document.querySelector(".reveal .controls"),dc.controlsLeft=l(document.querySelectorAll(".navigate-left")),dc.controlsRight=l(document.querySelectorAll(".navigate-right")),dc.controlsUp=l(document.querySelectorAll(".navigate-up")),dc.controlsDown=l(document.querySelectorAll(".navigate-down")),dc.controlsPrev=l(document.querySelectorAll(".navigate-prev")),dc.controlsNext=l(document.querySelectorAll(".navigate-next"))}function f(a,b,c,d){var e=a.querySelector("."+c);return e||(e=document.createElement(b),e.classList.add(c),null!==d&&(e.innerHTML=d),a.appendChild(e)),e}function g(){function a(a,b){var c={background:a.getAttribute("data-background"),backgroundSize:a.getAttribute("data-background-size"),backgroundImage:a.getAttribute("data-background-image"),backgroundColor:a.getAttribute("data-background-color"),backgroundRepeat:a.getAttribute("data-background-repeat"),backgroundPosition:a.getAttribute("data-background-position"),backgroundTransition:a.getAttribute("data-background-transition")},d=document.createElement("div");return d.className="slide-background",c.background&&(/^(http|file|\/\/)/gi.test(c.background)||/\.(svg|png|jpg|jpeg|gif|bmp)$/gi.test(c.background)?d.style.backgroundImage="url("+c.background+")":d.style.background=c.background),(c.background||c.backgroundColor||c.backgroundImage)&&d.setAttribute("data-background-hash",c.background+c.backgroundSize+c.backgroundImage+c.backgroundColor+c.backgroundRepeat+c.backgroundPosition+c.backgroundTransition),c.backgroundSize&&(d.style.backgroundSize=c.backgroundSize),c.backgroundImage&&(d.style.backgroundImage='url("'+c.backgroundImage+'")'),c.backgroundColor&&(d.style.backgroundColor=c.backgroundColor),c.backgroundRepeat&&(d.style.backgroundRepeat=c.backgroundRepeat),c.backgroundPosition&&(d.style.backgroundPosition=c.backgroundPosition),c.backgroundTransition&&d.setAttribute("data-background-transition",c.backgroundTransition),b.appendChild(d),d}q()&&document.body.classList.add("print-pdf"),dc.background.innerHTML="",dc.background.classList.add("no-transition"),l(document.querySelectorAll(Yb)).forEach(function(b){var c;c=q()?a(b,b):a(b,dc.background),l(b.querySelectorAll("section")).forEach(function(b){q()?a(b,b):a(b,c)})}),_b.parallaxBackgroundImage?(dc.background.style.backgroundImage='url("'+_b.parallaxBackgroundImage+'")',dc.background.style.backgroundSize=_b.parallaxBackgroundSize,setTimeout(function(){dc.wrapper.classList.add("has-parallax-background")},1)):(dc.background.style.backgroundImage="",dc.wrapper.classList.remove("has-parallax-background"))}function h(a){var b=document.querySelectorAll(Xb).length;if(dc.wrapper.classList.remove(_b.transition),"object"==typeof a&&k(_b,a),ec.trLine truncated
return"undefined"!=typeof b?d?d[b]:void 0:c},getPreviousSlide:function(){return Sb},getCurrentSlide:function(){return Tb},getScale:function(){return cc},getConfig:function(){return _b},getQueryHash:function(){var a={};location.search.replace(/[A-Z0-9]+?=([\w\.%-]*)/gi,function(b){a[b.split("=").shift()]=b.split("=").pop()});for(var b in a){var c=a[b];a[b]=unescape(c),"null"===c?a[b]=null:"true"===c?a[b]=!0:"false"===c?a[b]=!1:c.match(/^\d+$/)&&(a[b]=parseFloat(c))}return a},isFirstSlide:function(){return null==document.querySelector(Xb+".past")?!0:!1},isLastSlide:function(){return Tb?Tb.nextElementSibling?!1:I(Tb)&&Tb.parentNode.nextElementSibling?!1:!0:!1},isReady:function(){return ac},addEventListener:function(a,b,c){"addEventListener"in window&&(dc.wrapper||document.querySelector(".reveal")).addEventListener(a,b,c)},removeEventListener:function(a,b,c){"addEventListener"in window&&(dc.wrapper||document.querySelector(".reveal")).removeEventListener(a,b,c)}}}();
var Reveal=function(){"use strict";function a(a){if(b(),!fc.transforms2d&&!fc.transforms3d)return void document.body.setAttribute("class","no-transforms");window.addEventListener("load",B,!1);var d=Reveal.getQueryHash();"undefined"!=typeof d.dependencies&&delete d.dependencies,l(ac,a),l(ac,d),s(),c()}function b(){fc.transforms3d="WebkitPerspective"in document.body.style||"MozPerspective"in document.body.style||"msPerspective"in document.body.style||"OPerspective"in document.body.style||"perspective"in document.body.style,fc.transforms2d="WebkitTransform"in document.body.style||"MozTransform"in document.body.style||"msTransform"in document.body.style||"OTransform"in document.body.style||"transform"in document.body.style,fc.requestAnimationFrameMethod=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame,fc.requestAnimationFrame="function"==typeof fc.requestAnimationFrameMethod,fc.canvas=!!document.createElement("canvas").getContext,Wb=navigator.userAgent.match(/(iphone|ipod|android)/gi)}function c(){function a(){e.length&&head.js.apply(null,e),d()}function b(b){head.ready(b.src.match(/([\w\d_\-]*)\.?js$|[^\\\/]*$/i)[0],function(){"function"==typeof b.callback&&b.callback.apply(this),0===--f&&a()})}for(var c=[],e=[],f=0,g=0,h=ac.dependencies.length;h>g;g++){var i=ac.dependencies[g];(!i.condition||i.condition())&&(i.async?e.push(i.src):c.push(i.src),b(i))}c.length?(f=c.length,head.js.apply(null,c)):a()}function d(){e(),R(),i(),db(),Y(!0),setTimeout(function(){ec.slides.classList.remove("no-transition"),bc=!0,u("ready",{indexh:Rb,indexv:Sb,currentSlide:Ub})},1)}function e(){ec.theme=document.querySelector("#theme"),ec.wrapper=document.querySelector(".reveal"),ec.slides=document.querySelector(".reveal .slides"),ec.slides.classList.add("no-transition"),ec.background=g(ec.wrapper,"div","backgrounds",null),ec.progress=g(ec.wrapper,"div","progress","<span></span>"),ec.progressbar=ec.progress.querySelector("span"),g(ec.wrapper,"aside","controls",'<div class="navigate-left"></div><div class="navigate-right"></div><div class="navigate-up"></div><div class="navigate-down"></div>'),ec.slideNumber=g(ec.wrapper,"div","slide-number",""),g(ec.wrapper,"div","state-background",null),g(ec.wrapper,"div","pause-overlay",null),ec.controls=document.querySelector(".reveal .controls"),ec.wrapper.setAttribute("role","application"),ec.controlsLeft=m(document.querySelectorAll(".navigate-left")),ec.controlsRight=m(document.querySelectorAll(".navigate-right")),ec.controlsUp=m(document.querySelectorAll(".navigate-up")),ec.controlsDown=m(document.querySelectorAll(".navigate-down")),ec.controlsPrev=m(document.querySelectorAll(".navigate-prev")),ec.controlsNext=m(document.querySelectorAll(".navigate-next")),ec.statusDiv=f()}function f(){var a=document.getElementById("statusDiv");if(!a){a=document.createElement("div");var b=a.style;b.position="absolute",b.height="1px",b.width="1px",b.overflow="hidden",b.clip="rect( 1px, 1px, 1px, 1px )",a.setAttribute("id","statusDiv"),a.setAttribute("aria-live","polite"),a.setAttribute("aria-atomic","true"),ec.wrapper.appendChild(a)}return a}function g(a,b,c,d){var e=a.querySelector("."+c);return e||(e=document.createElement(b),e.classList.add(c),null!==d&&(e.innerHTML=d),a.appendChild(e)),e}function h(){function a(a,b){var c={background:a.getAttribute("data-background"),backgroundSize:a.getAttribute("data-background-size"),backgroundImage:a.getAttribute("data-background-image"),backgroundColor:a.getAttribute("data-background-color"),backgroundRepeat:a.getAttribute("data-background-repeat"),backgroundPosition:a.getAttribute("data-background-position"),backgroundTransition:a.getAttribute("data-background-transition")},d=document.createElement("div");return d.className="slide-background",c.background&&(/^(http|file|\/\/)/gi.test(c.background)||/\.(svg|png|jpg|jpeg|gif|bmp)$/gi.test(c.background)?d.style.backgroundImage="url("+c.background+")":d.style.background=c.background),(c.background||c.backgroundColor||c.backgroundImage)&&d.setAttribute("data-background-hash",c.background+c.backgroundSize+c.backgroundImage+c.backgroundColor+c.backgroundRepeat+c.backgroundPosition+c.backgroundTransition),c.backgroundSize&&(d.style.backgroundSize=c.backgroundSize),c.backgroundImage&&(d.style.backgroundImage='url("'+c.backgroundImage+'")'),c.backgroundColor&&(d.style.backgroundColor=c.backgroundColor),c.backgroundRepeat&&(d.style.backgroundRepeat=c.backgroundRepeat),c.backgroundPosition&&(d.style.backgroundPosition=c.backgroundPosition),c.backgroundTransition&&d.setAttribute("data-background-transition",c.backgroundTransition),b.appendChild(d),d}r()&&document.body.classList.add("print-pdf"),ec.background.innerHTML="",ec.background.classList.add("no-transition"),m(document.querySelectorAll(Zb)).forEach(function(b){var c;c=r()?a(b,b):a(b,ec.background),m(b.querySelectorAll("section")).forEach(function(b){r()?a(b,b):a(b,c)})}),ac.parallaxBackgroundImage?(ec.background.style.backgrounLine truncated
},Qb.prototype.on=function(a,b){this.canvas.addEventListener(a,b,!1)},Qb.prototype.off=function(a,b){this.canvas.removeEventListener(a,b,!1)},Qb.prototype.destroy=function(){this.playing=!1,this.canvas.parentNode&&this.container.removeChild(this.canvas)},{initialize:a,configure:i,sync:Q,slide:P,left:ob,right:pb,up:qb,down:rb,prev:sb,next:tb,navigateFragment:hb,prevFragment:jb,nextFragment:ib,navigateTo:P,navigateLeft:ob,navigateRight:pb,navigateUp:qb,navigateDown:rb,navigatePrev:sb,navigateNext:tb,layout:B,availableRoutes:$,availableFragments:_,toggleOverview:H,togglePause:N,isOverview:I,isPaused:O,addEventListeners:j,removeEventListeners:k,getIndices:fb,getSlide:function(a,b){var c=document.querySelectorAll(Zb)[a],d=c&&c.querySelectorAll("section");return"undefined"!=typeof b?d?d[b]:void 0:c},getPreviousSlide:function(){return Tb},getCurrentSlide:function(){return Ub},getScale:function(){return dc},getConfig:function(){return ac},getQueryHash:function(){var a={};location.search.replace(/[A-Z0-9]+?=([\w\.%-]*)/gi,function(b){a[b.split("=").shift()]=b.split("=").pop()});for(var b in a){var c=a[b];a[b]=unescape(c),"null"===c?a[b]=null:"true"===c?a[b]=!0:"false"===c?a[b]=!1:c.match(/^\d+$/)&&(a[b]=parseFloat(c))}return a},isFirstSlide:function(){return null==document.querySelector(Yb+".past")?!0:!1},isLastSlide:function(){return Ub?Ub.nextElementSibling?!1:J(Ub)&&Ub.parentNode.nextElementSibling?!1:!0:!1},isReady:function(){return bc},addEventListener:function(a,b,c){"addEventListener"in window&&(ec.wrapper||document.querySelector(".reveal")).addEventListener(a,b,c)},removeEventListener:function(a,b,c){"addEventListener"in window&&(ec.wrapper||document.querySelector(".reveal")).removeEventListener(a,b,c)}}}();