Keyboard navigation with the slideshow component

[NemesisVex]

Here's another set of issues that were reported by the testers in ORIS. I'm copying and pasting the bug story we have in our tracking system. You can substitute the URL in repro step no. 1 with http://www.washington.edu/brand/html-web-components/ and the effect should be the same.

Description:

The slider/slideshow carousel on on Research home page has accessibility issues. The carousel arrows do not highlight when the tab focus is on them, it has a double tab stop for each slide and stories do not advance appropriately.

Impact:

Users that use tab or voice functionality are not able to access the carousel's controls and view the slide stories.

Repro Steps:

1. Open http://www.washington.edu/research/
2. Using tab, navigate to the slider/slideshow element
3. Press the tab key several times while watching the lower left corner of the browser window for the selected url
4. Press enter to view story
5. Press tab keys

Expected Result

1. The slider/slideshow should be highlighted when tab focus is on it
2. There should only be one tab stop for each slide story
3. The user should expect the first tab into the carousel to land on the first slide.
4. From the first slide, the user should be able to hit enter to view the current slide's story or tab forward to land on the arrow controls
5. The arrow controls should advance the slides if the user hits the enter key.
6. If the user tabs from the last arrow, they should tab out of the carousel and into the flow of the rest of the Research home page's content.

Actual Result:

1. Slider/slideshow is not highlight, the only way user can tell where they are is by reading url in lower left corner of browser screen.
2. Each slide story has two tab stops instead of one
3. When the user hits enter to view the story they are not able to tab to arrow controls
4. The user can only hit backspace to leave the slide story and that takes them back to the top of the Research home page instead of to the slide carousel where they were previously.

[nwisehart]

To see commit for the bug fix, go to ca6594c

[nwisehart]

Note: attached to uweb/uw-slideshow@e8d9187 of uw-slideshow plugin

[NemesisVex]

Hey folks,

I grabbed the changes to the slideshow from the master branch and rebuilt our child theme to incorporate it. I sent our internal ticket back to our tester, and he added more feedback.

It looks like the items we reported haven't quite been addressed, and a few more issues have popped up.

Here's the updated Actual Result section of the ticket:

Actual Result:

1. Slider/slideshow is not highlighted, the only way user can tell where they are is by reading the URL in lower left corner of browser screen.
2. Each slide story has two tab stops instead of one, and while using the tab key, images sometimes change.
3. Each of the major browsers behave slightly differently for navigation:
   • In Chrome, the only navigation in the carousel is the tab key. Arrow keys do not seem to do anything. When the user hits enter there is no response from the page.
   • In Firefox navigation is also the tab key, and pressing the enter key will activate the link that is highlighted navigating to the appropriate page.
   • In Internet Explorer 11 the user can use tab to get to the carousel, then use the arrow keys to navigate the carousel but using enter does not open the article selected.
4. The user can only hit backspace to leave the slide story and that takes them back to the top of the Research home page instead of to the slide carousel where they were previously.

We also wanted to see whether the changes to the slideshow affected other pages than ours, so we went to the HTML Components entry on the brand site and noticed the slide show demo was broken.

[nwisehart]

Hi,

Looking at your review, I am not experiencing the same issues. It may be the environment I set up, but just to be sure, I wanted to know if you had downloaded both changes. The first being from the UW-2014 theme, and the second being the update to the uw-slideshow plugin that I linked above. Just wanted to check both files had been updated.

Thanks,
Nick

[mattlam-uw]

Hi,

This is Matt Lambert on the ORIS web team. I work with Greg, who logged this original bug. We have done some thinking and comparing with keyboard accessibility patterns found on other pages, and we have come to the conclusion that TAB navigation should not be enabled within the slideshow component. The slideshow itself should have a tab-stop, and the slideshow element should be outlined or highlighted in a way that indicates it has focus. But while focus is on the slideshow, a keyboard navigating user should be able to navigate from slide to slide using the arrow keys. Hitting TAB when focus is on the slideshow should cause focus to move to the next element on the page.

As a result of this, we would like to consider the following areas:

1. Keyboard arrow navigation within the slideshow: this seems to be working correctly, so nothing is needed here.
2. Slideshow element visibly displaying focus to the user: the element shows a subtle outline in Firefox (40.0.3) when it has focus. But I do not see any visible indication of focus in either IE (11.0.9600) or Chrome (45.0.2454.99 m). I will log a separate bug to address this.
3. TAB navigation within the slideshow: currently, when a user hits either TAB and SHIFT-TAB (reverse-direction) while focus is on the slideshow element, slides will advance forward through the slideshow. As I stated above, we now believe TAB navigation should not be enabled within the slideshow. I will log a new bug to address this.

Thanks,
Matt

[nwisehart]

Hi Matt,

Thank you for looking more into what other sites are doing. Go ahead and log the issues as new bugs, and we will add them to the to-do list.

Thanks,
Nick