Merge pull request #6 from tagawa/a11y

Added ARIA live region for screen-readers (fixes #1)
w3c · Jul 27, 2015 · 457a827 · 457a827
2 parents f3aac3b + 8244bc0
commit 457a827
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 5 deletions.
diff --git a/apiary.js b/apiary.js
@@ -167,16 +167,24 @@
 
   /**
    * Inject values retrieved from the API into the relevant elements of the DOM.
+   * While dynamically writing content, set aria-busy attribute to "true" for screen-readers.
    */
 
   var injectValues = function() {
+    var live = $('[aria-live]');
+    if (live) {
+      live.attr('aria-busy', 'true');
+    }
     for (var i in placeholders) {
       if (placeholders.hasOwnProperty(i)) {
         for (var j in placeholders[i]) {
           placeholders[i][j].html(data[i]);
         }
       }
     }
+    if (live) {
+      live.attr('aria-busy', 'false');
+    }
   };
 
   /**

diff --git a/examples/domain.html b/examples/domain.html
@@ -14,11 +14,13 @@
 
   <body>
 
-    <h1 class="apiary apiary-name">[Loading…]</h1>
-    <h2>Lead</h2>
-    <div class="apiary apiary-lead">[Loading…]</div>
-    <h2>Activities</h2>
-    <div class="apiary apiary-activities">[Loading…]</div>
+    <div aria-live="polite">
+      <h1 class="apiary apiary-name">[Loading…]</h1>
+      <h2>Lead</h2>
+      <div class="apiary apiary-lead">[Loading…]</div>
+      <h2>Activities</h2>
+      <div class="apiary apiary-activities">[Loading…]</div>
+    </div>
 
     <script src="//www.w3.org/scripts/jquery/2.1.4/jquery.min"></script>
     <script src="../apiary.js"></script>