benmarch/angular-ui-tour

Accessibility concerns

Closed this issue · 6 comments

willsteinmetz commented

I am using the exact versions of the following libraries:

  • AngularJS: 1.5.9
  • Angular Bootstrap: 2.5.0
  • Angular UI Tour: 0.7.0

I have installed this library via: NPM

I have observed the following behavior:

When the tour opens, focus stays on the triggering element so moving through the page via the keybaord continues with the next element rather than being shifted to the tour.

This is how I expected it to behave:

As a user, when I start a tour via the keyboard while using accessibility software like a screen reader, the element in focus should shift from the element launching the tour to the first interactive element in the tour like the next button. When the tour is complete, focus should shift back to the triggering element.

benmarch commented

I'll add this to the next release. Would you mind filling out the versions anyway since I also use them for tracking?

willsteinmetz commented

I have updated with the versions we use. We've only done prototypes so far but plan to use it so it hasn't been in our library. We will be updating Angular bootstrap before implementing angular ui tour.

willsteinmetz commented

I updated the comment again. We have since upgraded to the latest version of Angular UI Bootstrap (2.5.0 at the time I wrote this comment).

benmarch commented

Hey @willsteinmetz,

Thank you for this suggestion. I have made a few changes awaiting release, but I could use some input to determine if it will be sufficient. I added tabindex="0" and aria-hidden="<status>" to the step popup, and I call popup.focus() when it is activated. I used my keyboard to test and it appears to work well, but I did not use a real screen reader. I would greatly appreciate any feedback, positive or negative. I will be releasing in the next day or two in case you want to try it first-hand before giving feedback.

Thanks,
Ben

willsteinmetz commented

Hi @benmarch, that sounds like it should be sufficient. At that point, a screen reader will be pushed into the context of the popup and then will read the popup. Where are they taken after the tour is closed? Is it back to the element that launched the tour?

benmarch commented

Hey @willsteinmetz, I thought about where it leaves the user after the tour, but I was debating between sending them back to where they were, and leaving them at the target of the most recent tour step. Ultimately I didn't make a decision, so I'm not entirely sure where it will bring them. Please take a look at 0.8.0 and advise so I can make appropriate changes. Note that there are a few breaking changes that might need to be addressed: https://github.com/benmarch/angular-ui-tour#versions.

Thanks,
Ben