A11Y + Semantic issues in some components

[vinceumo (Vincent)]

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:

Carousels Tutorial

2. 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:

• 
  21st Century Communications and Video Accessibility Act of 2010 (CVAA) | US
• Section 255 of the Telecommunications Act of 1996 | US
• Web and Mobile Accessibility Directive | UK

Thanks a lot

[RDaneelOliwav]

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

[HammerOz (Hamish)]

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.

Tutorials for Creating a custom Slider or Carousel without custom code

Hey wonderful Webflow community, I just uploaded my video tutorial on how to make a custom slider without custom code in Webflow. I hope you will find some interesting informations in it. [Custom Slider in Webflow Tutorial (no custom code)] Enjoy

Is it possible to link to a specific slide in a slider?

@SeanBobby Hey! I’m sorry, but I don’t know if there is a way of doing it using simple text links. I’d still use .trigger('tap') function here. Here is how I’d do that. Let’s say there are 3 slides and 3 text links. Let’s give them uniqueids: gotoslide1 gotoslide2 gotoslide3 Now… you have to have the Slide Nav. [image] Let’s take a look at the generated HTML code on published website. [image] As you can see there is a w-round class and it has few w-slider-dot object classes inside of it…

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

Cheers