updating navigation message

ember-a11y · May 8, 2019 · 8eef7d6 · 8eef7d6
1 parent 1669906
commit 8eef7d6
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 5 deletions.
diff --git a/addon/components/navigation-narrator.js b/addon/components/navigation-narrator.js
@@ -7,6 +7,7 @@ export default Component.extend({
   layout,
   tagName: '',
   router: service(),
+  isFocusable: true,
 
   init() {
     this._super();

diff --git a/addon/templates/components/navigation-narrator.hbs b/addon/templates/components/navigation-narrator.hbs
@@ -1,3 +1,3 @@
-<div tabindex="-1" class="ember-sr-only sr-only-focusable" id="ember-a11y-refocus-nav-message">
-  The page navigation is complete. Use your arrow keys to navigate the page content as you wish.
+<div tabindex="-1" class="ember-sr-only {{if this.isFocusable "ember-sr-only-focusable"}}" id="ember-a11y-refocus-nav-message">
+  The page navigation is complete. You may now navigate the page content as you wish.
 </div>
diff --git a/tests/dummy/app/index.html b/tests/dummy/app/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">

diff --git a/tests/dummy/app/templates/application.hbs b/tests/dummy/app/templates/application.hbs
@@ -1,7 +1,7 @@
 <header>
   {{navigation-narrator}}
   <nav>
-    {{link-to "Index" "index"}}
+    {{link-to "Home" "index"}}
     {{link-to "Alpha" "alpha"}}
     {{link-to "Bravo" "bravo"}}
   </nav>

diff --git a/tests/dummy/app/templates/index.hbs b/tests/dummy/app/templates/index.hbs
@@ -1,2 +1,33 @@
 <h1>Ember A11y ReFocus</h1>
-<p>Welcome to this test dummy app for ember-a11y-refocus! I hope you will find the browsing experience in this single-page application to be improved.</p>
+<p>Welcome to this demo app for ember-a11y-refocus! The GitHub repo is available here: <a href="https://github.com/melsumner/ember-a11y-refocus">https://github.com/melsumner/ember-a11y-refocus</a>.</p>
+
+<h2>Describing the Problem</h2>
+<p>SPAs use <code>pushState</code> to allow portions of the page to be updated or replaced without a whole new page being rendered. While this was a positive gain for performance on the web, it has made an entire type of web app not accessible for users with assistive technology such as screen-readers. With the prolific rise of JavaScript frameworks as the tool of choice for building modern web applications, screen-reader users have gotten increasingly frustrated (and rightly so) at being left out of many experiences of the modern web- online banking and bill pay are just a couple of ways that this negatively effects users who rely on assistive technology to complete everyday tasks. </p>
+
+<p>Since <code>pushState</code> does nothing to inform the browser - and, by extent, the screen reader- that new content is present, the screen-reader user has no way of knowing that new content exists, or that navigation to a new page was successful. Additionally, focus remains where it was, instead of getting reset in a predictable fashion.</p>
+
+<h2>Solutions?</h2>
+<p>These two issues (recognition of new content, resetting of focus for navigation purposes) have been treated a few ways in single-page applications:
+  <ol>
+    <li>completely ignored</li>
+    <li>issue filed with screen readers themselves</li>
+    <li>manually placing focus on the page's h1 element when a new view renders</li>
+    <li>programmatically placing focus on the new content on the page by using a container component that can be targeted</li>
+    <li>use of <code>aria-live</code> (eep!)</li>
+    <li>implementing a skip-link to at least place the focus in a predictable way</li>
+  </ol>
+</p>
+<p>The biggest issue is that this problem is mostly ignored and not resolved. This is why each framework should provide a recommended method for resolving this issue- or ideally, bake a solution into the framework code itself, so that developers do not have to even think about it.</p>
+
+<h2>What this addon does</h2>
+<p>The ember-a11y-refocus addon attempts to provide a sensible resolution for all involved:
+  <ol>
+    <li>the performance gains from `pushState` remain in place</li>
+    <li>users with assistive technology are informed that a page transition has occurred</li>
+    <li>the focus is reset to the message itself, which also resets the focus of the page (as is desired for the screen-reader user)</li>
+  </ol> 
+</p>
+<p>To try it out, navigate through some of the items in the navbar while browsing with your screen reader of choice.</p>
+
+<h2>How to give feedback</h2>
+<p>What do you think of this approach? I really would like to hear from you. You can <a href="mailto:[email protected]">email me</a> or send me <a href="https://twitter.com/melaniersumner">a Tweet!</a>.</p>