diff --git a/js/adapt-expose.js b/js/adapt-expose.js index 07077ac..253b274 100644 --- a/js/adapt-expose.js +++ b/js/adapt-expose.js @@ -12,7 +12,8 @@ define(function(require) { events: { "click .expose-item-cover": "toggleItem", "click .expose-item-content": "toggleItem", - "click .expose-item-button": "toggleItem" + "click .expose-item-button": "toggleItem", + "click .expose-item-button-screen-reader": "toggleItem" }, onDeviceResize: function() { @@ -73,6 +74,8 @@ define(function(require) { var i = $cover.parents(".expose-item").index(); this.model.get("_items")[i]._isVisited = true; this.evaluateCompletion(); + // Add the content to the aria-live field, remove content's aria-hidden property + $parent.children(".expose-item-content-screen-reader").prepend($parent.children(".expose-item-content").clone().attr('aria-hidden', false)); } }, diff --git a/less/expose.less b/less/expose.less index ec0e598..c690834 100644 --- a/less/expose.less +++ b/less/expose.less @@ -121,6 +121,15 @@ .zoom(0); } } + + .screen-reader-only { + position:absolute; + left:-10000px; + top:auto; + width:1px; + height:1px; + overflow:hidden; + } } .expose-item-button { diff --git a/templates/expose.hbs b/templates/expose.hbs index 863b7fd..f1382d0 100644 --- a/templates/expose.hbs +++ b/templates/expose.hbs @@ -5,19 +5,21 @@ {{#each _items}}
- +
{{#if front}} {{{a11y_text front}}} {{else}} ? {{/if}}
-
+ + +
{{/each}}