Custom code for inaccessible Webflow Slider content

Design help Custom code
1

Hello, I found out that the Slider that is listed on Webflow as an accessible element is actually not. The accessibility test discovered that

Screen reader does not notify updated carousel content automatically after selecting Previous and Next buttons.
Changed/updated content should be announced automatically after selecting the Previous and Next buttons. The content between the buttons i.e the image(alt text) or test needs to be announced for screen reader when user changes the images using the next previous buttons.

Here is the issue I am referring to:
WCAG Guideline, 4.1.3 Status Messages. It’s different from prev/next buttons’ focus states (2.4.7 Focus Visible in WCAG) which are implemented and work.

Environment (Screen Reader/ OS/ Browser):
JAWS/Win 10/Chrome
NVDA/Win10/Firefox Voiceover/Mac OS/Safari Talkback/Android/Chrome Voiceover/Mac OS/Safari

Current results: Screen reader does not notify updated carousel content automatically after selecting Previous and Next buttons.

Expected Results: Changed/updated content should be announced automatically after selecting the Previous and Next buttons,

There are 2 sliders on this page, both need to be fixed using the custom code. Had anyone solved this before? Could you please share the custom code? Sadly, Webflow doesn’t prioritize accessibility and can’t help. Thank you very much for any help!

Here is my site Read-Only: https://preview.webflow.com/preview/vr-oxygen?utm_medium=preview_link&utm_source=designer&utm_content=vr-oxygen&preview=4ceec68c472631f90e1ee92a1b6f1146&workflow=preview

2

Hi @olga, here is a post from the forum which gives some custom code you can use to enable the screen reading for dropdown links and also for slider on-change so that the previous slide titles are read:

I would give that a try, I hope this is helps as a workaround.

3

CYBERDAVE! Haven’t seen you in ages, buddy. Welcome back.

1 Like