search

adaptlearning / adapt-contrib-narrative

A component that displays an image gallery with accompanying text
GNU General Public License v3.0
5 stars 39 forks source link

Progress indicator navigation not reachable by keyboard #244

Closed kirsty-hames closed 1 year ago

kirsty-hames commented 1 year ago

The following is feedback from an external accessibility audit:

Background: All controls reachable with a mouse or pointing device must also be accessible to users who rely on keyboard-only navigation, including screen reader users.

Current behaviour: The narrative carousel component provides two ways to navigate between slides – the “next/previous” arrow keys, and a series of dots at the bottom of each slide where users can skip directly to a specific slide. These are not in the tab index and so cannot be reached with keyboard navigation.

To replicate: Using keyboard navigation, move through this component and observe the focus position.

Expected behaviour: Keyboard users should be able to navigate to these controls using the tab key. They should also be properly labelled to allow their use by screen reader users.

Recommended Fix: Apply the role of button to these controls and ensure that they are correctly labelled and included in the tab index. Keyboard handling should also be set so that they can be activated with both the space and enter keys, and the currently selected slide should be set programmatically as well as visually.

kirsty-hames commented 1 year ago

I think the progress indicators were purposefully removed from the tab order as having two ways to navigate a component being more confusing. Alternative to the recommendation above, would it be better if the progress indicators were used for progress status only and not be clickable as this isn't inclusive to all users?

guywillis commented 1 year ago

Makes sense to me to remove the functionality of the progress dots and leave them as visual indicators.

swashbuck commented 1 year ago

Will be included in PR #250

swashbuck commented 1 year ago

In addition to removing the click functionality, should narrative__slide-indicators be using aria-hidden="true" as well?

swashbuck commented 1 year ago

Ready for review in #250

kirsty-hames commented 1 year ago

In addition to removing the click functionality, should narrative__slide-indicators be using aria-hidden="true" as well?

Seeing as there's no readable content within the narrative__slide-indicators I don't think we need to apply aria-hidden="true". I haven't had any issues with these being identified by a screen reader when testing.

kirsty-hames commented 1 year ago

I can confirm this has been fixed by #250 and https://github.com/adaptlearning/adapt-contrib-vanilla/pull/399 Tested: desktop browsers (Mac Safari, Chrome and FF), iPhone and Android tablet.