Hello! With regards to Accessibility Issues, I cannot find anywhere if the Before and After Slider Widget can be used with TAB and Arrow key keyboard navigation. Our client requires this but so far in my tests, i have not been able to use keyboard nav. Is there a step i’m missing?
Hello there and welcome to the Community, @AECOM-Vizlab 
I’ve tested the keyboard navigation in the widget and it seems that you’re right. I’ve passed it on to the devs and will report back once I have any news 
1 Like
thank you Max! I’ve also just requested this feature in the slider feature wishlist so that there’s more detail how it should work with regards to 508 compliance. I forgot to add in the wishlist, for accessibility, we would need ALT text input capability as well for the Before and After images.
2 Likes
I’ve temporarily removed this request from the Wishlist, as I believe we can address the issue quickly.
If it turns out that more in-depth investigation is needed, we will restore this idea to the list.
I’ll keep you updated here in this thread 
2 Likes
thank you Max! If this can be resolved quickly and implemented, this would be a crucial factor in convincing our clients to fully use this feature and to move forward with paid subscription.
2 Likes
Hello Max, following up on whether the keyboard navigation issue has been looked at and addressed for the Before After slider widget. Last we checked, we still cannot keyboard TAB into the widget and control via keyboard nav. thanks!
1 Like
Hi there, @AECOM-Vizlab
Thank you for waiting!
Our devs are currently working on this issue. I’ll update you as soon as I have more news
1 Like
We’ve applied a local fix to your widget. Please check it out and let me know how it works
We’re also working on adding this fix globally and I’ll update you once it’s released.
Hi Max! thank you so much! Yes it is working but only on our first widget. The other 4 we created and published don’t have the keyboard navigation, but the 1st one does work when we hit TAB into the various buttons. The left and right arrow keys do work well with the slider. However, when it tabs to the bottom right arrow icon to advance to a new image, we can only go forward and not backwards using TAB. If you can tweak so that when the focus highlight lands on the arrow key icons to advance images, if the keyboard left and right arrow keys can be activated and used to navigate forward or backwards. Right now when access them using TAB, if we TAB again the nav will go back to the browser window items and takes too long for the TAB focus to get back into the widget, breaking 508 accessibility. Also can ALT text be implemented per image (before and after) so a screen reader can read that description? but this is good so far and working. Please kindly implement the keyboard nav tweaks mentioned above, and then allow it to work across all our slider widgets. thank you!!
1 Like
Hi there, @AECOM-Vizlab
Yep, since the global fix isn’t released yet, we’ve applied the revision with the keyboard navigation to your 1st widget only. I’ve asked the devs if it’s possible to apply this revision and will let you know once I have any news.
As for the image alt texts and switching the navigation arrows, I’ve shared your feedback with the devs. I’ll keep you updated
1 Like
-
I am really sorry, but we won’t be able to add
altattribute for<img>, since the image in the widget are added asbackground-imagein<div>. -
To switch back to the Back arrow, please use Shift+tab
-
In the menatime, we’ve released the global fix and everything should be working fine in all your widgets
Thank you Max and Dev team for implementing the keyboard nav fixes and releasing globally. It’s super helpful and works well enough.
For accessibility compliance, in that case, we will have to manually write instructions on our websites for keyboard nav controls to ensure keyboard users are aware of the nuances, like the Shift+TAB to move backwards.
We did find a bug though. For accessibility, when using a screen reader like the free NVDA reader app, by the time a user TABs to the slider, the NVDA screen reader conflicts with the arrow keys, so the keyboard arrow left and right keys stop and can’t move the slider even though NVDA can read what each tool button does. It doesn’t however read the “expand to full screen” icon button. It just says button. Perhaps the devs can fix that so that fullscreen button has some alt text or tool tip label in the code.
But more importantly, the screen reader is conflicting with the keyboard arrows. Once we turn off screen reader, then the arrow keys work again.
As far as ALT text goes for the images themselves, understood. Perhaps an alternate solution would be implement another labeling text field, like we currently have for captions, heading, and Before and After Image Label, maybe call it Image Description. Then a screen reader can read those. Hope this helps as accessibility here in the USA is a crucial factor. thank you so much! what a great tool!
1 Like
Got it, thanks!
Could you please share a video screencast of the issues with the arrow keys and expand button? Our devs will gladly look into this
ok will do. Can i send you a video separately via email link instead of on this forum? please let me know an address to send to.
1 Like
