fix: improved screenreader experience

hoodiehq · Mar 21, 2016 · e77e2db · e77e2db
1 parent d6cb35d
commit e77e2db
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 5 deletions.
diff --git a/public/about.html b/public/about.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Tracker</title>
+    <title>Tracker | About</title>
     <link rel="shortcut icon" href="assets/favicon.ico" type="image/x-icon" />
     <link rel="stylesheet" href="assets/app.css" />
   </head>

diff --git a/public/account.html b/public/account.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Tracker</title>
+    <title>Tracker | Account</title>
     <link rel="shortcut icon" href="assets/favicon.ico" type="image/x-icon" />
     <link rel="stylesheet" href="assets/app.css" />
   </head>
@@ -25,7 +25,10 @@ <h1><a href="/">Tracker</a></h1>
     </header>
 
     <main>
-      <a href="/">← Return to the tracker</a>
+      <a href="/">
+        <span aria-hidden="true">←</span>
+        Return to the tracker
+      </a>
 
       <div data-show="signin" data-hide-if="signed-in">
         <form class="signup" action="signup">
@@ -50,7 +53,10 @@ <h2>Sign up</h2>
         <form class="signin" action="signin">
           <div class="signup-link">
             <h3>New account?</h3>
-            <a href="#" class="btn" data-action="show-signup">click here to sign up!</a>
+            <a href="#" class="btn" data-action="show-signup">
+              <span class="sr-only">Need an account?</span>
+              Sign up!
+            </a>
           </div>
 
           <h2>Log in</h2>
@@ -142,6 +148,8 @@ <h2>Account settings</h2>
       </div>
     </main>
 
+    <span id="a11y-announcer" class="sr-only" aria-live="polite"></span>
+    <script src="assets/js/a11y-announce.js"></script>
     <script src="/hoodie/client.js"></script>
     <script src="assets/js/common.js"></script>
     <script src="assets/js/account.js"></script>

diff --git a/public/assets/app.css b/public/assets/app.css
@@ -391,3 +391,15 @@ img.low-profile-dog {
   height: 160px;
   float: right;
 }
+
+/* Show content for screenreaders only */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
diff --git a/public/assets/js/a11y-announce.js b/public/assets/js/a11y-announce.js
@@ -0,0 +1,15 @@
+!(function (global, document) {
+  var announceTimer
+  var $announcer = document.getElementById('a11y-announcer')
+  var announce = function (message, tone) {
+    tone = tone || 'polite'
+    $announcer.setAttribute('aria-live', 'off')
+    $announcer.innerHTML = ''
+    clearTimeout(announceTimer)
+    announceTimer = setTimeout(function () {
+      $announcer.setAttribute('aria-live', tone)
+      $announcer.innerHTML = message
+    }, 500)
+  }
+  global.announce = announce
+})(window, document)
diff --git a/public/assets/js/account.js b/public/assets/js/account.js
@@ -1,3 +1,6 @@
+var originalDocumentTitle = document.title
+var locationHash = window.location.hash.replace('#', '')
+
 /**
  * Find all elements with a data-show attribute and apply a click handler
  * in which we check if an element with a data-action attribute was clicked.
@@ -14,8 +17,14 @@
     }
 
     event.preventDefault()
-    $formsContainer.dataset.show = action.substr('show-'.length)
+    var showTarget = action.substr('show-'.length)
+    $formsContainer.dataset.show = showTarget
+    setHashState(showTarget)
   })
+  if (locationHash) {
+    el.dataset.show = locationHash
+    setHashState(locationHash)
+  }
 })
 
 /**
@@ -39,6 +48,8 @@ document.querySelector('form.signup').addEventListener('submit', function (event
     })
   })
 
+  .then(setHashState)
+
   .catch(handleError)
 })
 
@@ -56,6 +67,8 @@ document.querySelector('form.signin').addEventListener('submit', function (event
     password: password
   })
 
+  .then(setHashState)
+
   .catch(handleError)
 })
 
@@ -90,6 +103,7 @@ document.querySelector('form.password-reset').addEventListener('submit', functio
   .then(function () {
     alert('Email sent to ' + email)
     document.querySelector('[data-show="password-reset"]').dataset.show = 'signin'
+    setHashState('signin')
   })
 
   .catch(handleError)
@@ -134,6 +148,8 @@ document.querySelector('[data-action="show-password-reset"]').addEventListener('
 document.querySelector('[data-action=signout]').addEventListener('click', function (event) {
   event.preventDefault()
   hoodie.account.signOut()
+
+  .then(setHashState)
 })
 
 /**
@@ -149,4 +165,22 @@ function handleError (error) {
   alert(error)
 }
 
+function setHashState (hash) {
+  var url = window.location.origin + window.location.pathname
+  var title = originalDocumentTitle
+  if (typeof hash === 'string') {
+    url += '#' + hash
+    var formattedHash = hash
+      .split('-')
+      .map(function (string) {
+        return string.charAt(0).toUpperCase() + string.slice(1)
+      })
+      .join(' ')
+    title += ' | ' + formattedHash
+  }
+  document.title = title
+  window.history.replaceState(null, null, url)
+  window.announce(document.title + ': Page loaded', 'assertive')
+}
+
 /* global hoodie, alert */