A11Y + Semantic issues in some components

Hi, I’m evaluating webflow and found some A11Y issues in the outputted code when using some components. This is a big blocker as my team needs the code to be accessible.

  1. Slider. it uses divs for the arrows and dots instead of <button>.
<div class="w-slider-arrow-left">
      <div class="w-icon-slider-left"></div>
</div>
<div class="w-slider-arrow-right">
      <div class="w-icon-slider-right"></div>
</div>

Default aria-label would be nice.

One of the issue is that we can’t change slides with the keyboard using the arrows:

  1. Tabs

Similar issue the tabs cta use <a> tags instead of <button> + it adds tabindex="-1" so can be access with keyboard.

That’s the 2 main components that I have tested for now. Is there a way to change the tags for this elements? I can’t find the option under the element settings.

Do you have any plan to fix these issues and follow WCAG AA? Or any other guidelines/laws:

Thanks a lot

1 Like

I’m keen to know too! There was a recent topic about the tabs issue as well.
I find issue with the native slideshow element, the functionality of determining what slide is active is deeply nested inside the webflow.js file. The index value is scoped and is annoyingly hard to access! Also its a pain to style slides independently and requires custom code.

You could always create your own slideshow and tabs with some library but this should be available to native WF in my opinion

Hi Vincent!

There are some barriers to building accessible websites with some of Webflow’s standard components. Webflow knows what they need to do What we’re doing about accessibility at Webflow | Webflow Blog.

That said it is likely you can get a reasonable way down the road with custom components.

I am surprised someone hasn’t produced some accessible templates with such components. A good opportunity exists.

Cheers

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.