How to make tabs as accessible as possible

Hi friends.
I’m working on a site that the client hopes to be an accessible site for all - however he’s asked for tabs on the accessibility page! sigh! I know from reading on here there have been a few issues with making tabs tab-able and clickable with the keyboard but i’ve not seen any solutions.

Does anyone know any solutions to making these as accessible as they can be or should I just try and persuade him there are better ways around it than tabs to house this content.

Hoping the cats at WebFlow release some nice accessible features soon :slight_smile:
Here’s my link


1 Like

Hey Alex!
I’m willing to have a look at your problem, can you provide a link to the published page?

Hi @RDaneelOliwav
That’s really kind of you, thank you.

Is this the one you need?

1 Like

Thanks for the swift reply!

Webflow provides ARIA (somewhat) by default. Referencing the MDN guide on tabs
The behavior for navigating the page via the tab key focuses tabs with the attribute tabindex=0. Most guides I consider safe to use propose to focusing only the default tab (eg. the tab that is shown by default). Following tab presses do not focus the next tabs, instead the focus moves on to lower nodes in the DOM. I suspect this is the behavior you want to change?

Normally the human utilizing an accessibility tool gets informed he is navigating a tab element and switches between the tabs via the arrow keys. I do not have much experience using accessibility tools myself, so I can’t provide my own opinion on this.

The best-practices from w3 and discernable, predictable focus has more details you should consider.

So, how to override Webflow’s implementation?
From what I’ve observed, navigating the once focused tab with arrow keys alters the ARIA attributes correctly and displays the correct content. If you need to change the tab focus to concurrently focus the next tabs in order of the DOM you need to override Webflow’s javascript. This would be somewhat complex when using the “out-of-the-box” tabs element. I’d say create the tabs with a custom code block and some short inline-script to implement the ARIA conform behavior. There’s an example on each of the links (MDN example / W3 example)

Let me know, if you need additional help :slight_smile: Happy to assist!

Wow @RDaneelOliwav thanks so much this is really useful thank you. I’m not a coder but i’ll have a read of what you sent later on and see if it makes sense to me. Likely I might return back to you for some guidance.

Once again thank you for your help… really appreciated.


1 Like

Sure thing! Just ask :slight_smile: