Ember and Accessible Route Changes

Monday, August 17th 2015

One chink in the Ember Router's armor is when visiting a new route (i.e. clicking a navigation link) it doesn't alert screen readers that the content on the page has changed. Screen reader users have no clue the page has changed. Here's an example of what I'm talking about:

Thankfully there's a really simple way to fix this. Apply aria-live="assertive" to the body element or the first element in the DOM that has dynamic content in it. This will tell the screen reader to watch that element for new changes that might happen within it. Whenever it detects there is a change it will chime in and start reading off the new content.

There are 4 different arguments aria-live takes: off, polite, assertive, and rude. The higher assertiveness, the more likely it is to interrupt the screen reader. You can read more about this here. I set my blog to "assertive". This will immediately alert the user of the content change. Polite will wait for what's currently being read to be finished.

You can see a video demo of this below:


This is just the beginning of the little things you can do to improve the accessibility of your Ember apps. Just spending 15 mins a day on making components accessible will drastically change the accessibility of your app.

Here are some links you that can assist you: