Carousel navigation with keyboard problem

[liyokuna]

Bug description:

Hello,

When I focus on the carousel, It is impossible to focus on indicators nor the arrow navigators.
I press enter, it doesn't slide the items.
This is my workaround, to use the arrow (right or left).
I am trying to do something that is is compliant with the last WCAG recommendation.

Link to minimally-working StackBlitz that reproduces the issue:

Find here my stackblitz

Versions of Angular, ng-bootstrap and Bootstrap:

Angular: 7.0.0

ng-bootstrap: 4.1.3

[fbasso]

Hello @liyokuna,

You're right, the arrows are not accessible with the keyboard, but it seems your workaround is already implemented. If you tab on this one : https://ng-bootstrap.github.io/#/components/carousel/examples#basic, the left/right arrows control the navigation (you need to tab until the carousel is focused).

[liyokuna]

hello @fbasso ,

Thanks. but wait...
I get it now, on my carousel, I defined some params similar to those you can fine here.
unfortunately, when you are trying to use the left/right arrows of the keyboard after the carousel gets the focus, It doesn't work anymore.
I didn't see the first one and jump straight to the last one, and that's why i created this issue.
If you set carousel params the left/right arrows of the keyboard doesn't work...

[benouat]

Hey @liyokuna !

I am sorry but I am probably missing something as I don't understand what you want to achieve. I had a quick look at your SB, but it seems it's not working. Your @ViewChild is not correctly defined.

---

When I focus on the carousel, It is impossible to focus on indicators nor the arrow navigators

It's normal, we write on purpose a tabindex="0" on the <ngb-carousel>. and the inner navigation link don't get any href so they can't be reached out by using tab

I press enter, it doesn't slide the items

We don't listen to enter. Why would you want enter to navigate to next slide ?

This is my workaround, to use the arrow (right or left).

You don't any workaround to use left/right arrow!! This is our default implementation. Once <ngb-carousel> gets the focus, just use left/right arrow to navigate to previous/next. (Reaching end will cycle trough from beginning/end)

So in the end, your workaround, if working would override exactly something already implemented an available!

[liyokuna]

hey @benouat,

I was trying to have a carousel that is in compliance with the last WCAG.
To do so, on mine, i added a pause/resume button, I was trying to get the focus on the arrows ( left and right of the carousel).
But i wasn't able to achieve that.
and to test the accessibility of the carousel, I am using NVDA. And if you try to use that you will face the issue that I described above. And plus, when the focus get to the carousel, NVDA says the 3 elements before displaying them.
Without nvda, the left/right arrows of the keyboard work perfectly but when you use NVDA, you have a different behavior.

[mendeza]

NVDA is a good starting point, but be aware that for full screen reader testing one should also use JAWS and VoiceOver. And it's important to note that WCAG 2.x compliance covers more than just screen reader considerations: low-vision, keyboard-only, cognitively impaired, and voice-control (Dragon) users.

[benouat]

Keep also in mind that WCAG remains just a set of recommendations.

Where I work, we have a long standing experience with IE+JAWS (multiple and several different combinations in term of versions) and we faced several times in the past that following exactly these recommendations was not working at all in a lot of cases when tested with actual impaired users...

Nonetheless, I properly flagged the issue as type: accessibility now that I know you want to improve the widget for that purpose.

[mendeza]

@benouat Yes, I know exactly what you mean. The problem arises when we developers think we can read the specs and use the tools, and that we can achieve "great A11y compliance." This is not so. In fact, we need to have dedicated A11y domain experts as part of our team. Depending on compliance goals and levels, quite difference implementation choices may be made.

[IAfanasov]

A bit of topic. I just started to learn web accessibility. As you could expect, I am now one of "developers think we can read the specs and use the tools, and that we can achieve "great A11y compliance.". what should I use as a guidance if WCAG specs are not that good?

[ganesh045]

Might be late comment but more similar to this so..

any solution for keyboard accessibility for datepicker. Looking for keyboard navigation for next and previous month arrows. Please let us know if this can achievable with any modifications. Thanks.

Raised issue: #4105

Tech Versions:

Angular: V.10.0.9
ng-bootstrap: V.8.0.4