Tip 15. Creating an Accessible Updatable Region
We use JavaScript heavily in our web applications these days. Popular frame-
works like Backbone and Ember let us build powerful single-page applications,
making more-responsive user interfaces that don’t cause the page to refresh.6,7
On these types of pages, the standard practice is to fire off some sort of
visual effect to give the user a clue that something has changed on the page.
However, a person using a screen reader isn’t going to be able to see any
visual cues. In the past, these people would often disable JavaScript in their
browsers and would then interact with a fallback solution provided by a
developer, but a 2012 survey by WebAIM shows that many users of screen-
reading software do not disable JavaScript anymore. That means they’ll use
the same interface as everyone else, so we need to be able to let these people
know when things on the interface have changed.^8The WAI-ARIA specification provides a nice solution called live regions that
currently works in Internet Explorer, Firefox, and Safari with various popular
screen readers.The AwesomeCo executive director of communications wants a new home
page. It should have links to a Services section, a Contact section, and an
About section. He insists that the home page shouldn’t scroll because “people
hate scrolling.” He would like you to implement a prototype for the page with
a horizontal menu that changes the page’s main content when clicked. That’s
easy enough to implement, and with the aria-live attribute, we can do something
we haven’t been able to do well before—implement this type of interface in a
way that’s friendly to screen readers.Let’s build a simple interface like the one in the following figure. We’ll put all the
content on the home page, and if JavaScript is available to us, we’ll hide all but
the first entry. We’ll make the navigation links point to each section using page
anchors, and we’ll use jQuery to change those anchor links into events that swap
out the main content. People with JavaScript will see what our director wants,
and people without will still be able to see all the content on the page. Best of all,
screen readers will know things changed.Chapter 5. Making Accessible Interfaces • 98
Download from Wow! eBook <www.wowebook.com> report erratum • discuss