CODEWITHSUNDEEP
angularjsaccessibilityscreen-readers
bhammie85
bhammie85

Reputation: 173

"Same page link" issue in Angular (single page app) with JAWS screen reader

I'm doing some JAWS accessibility testing in an Angular app and have come across an interesting problem.

JAWS sees navigational menu links to the other views as a link to the same page, and so says "same page link" before announcing the link name.

However, for the user (whether sighted or not), these links appear to not be the same page since a new view appears for them.

For example:

<a href="#">Home</a>
<a href="#/Transactions">Transactions</a>

When JAWS reads this, it says "Same page link: Home, same page link Transactions", but Transactions is actually a completely different view.

Is there any way that I can adjust my code to make JAWS think that this isn't a same page link?

Upvotes: 5

Views: 2541

Answers (2)

AlastairC
AlastairC

Reputation: 3297

I don't think this is a problem in practice, so long as you manage the keyboard focus.

The key thing that should happen when you select a link: is that you go somewhere.

If the user selects the transactions link, do you move the keyboard focus to the top of the new view? Keyboard focus is a key aspect for accessibility with frameworks like Angular.

Upvotes: 2

Mike Robinson
Mike Robinson

Reputation: 25159

I'm guessing you should enable html5 mode since hashes aren't considered a different page.

Here's an answer on how to do that: $location / switching between html5 and hashbang mode / link rewriting

Upvotes: 1

Related Questions