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
Here’s my link
I’m willing to have a look at your problem, can you provide a link to the published page?
That’s really kind of you, thank you.
Is this the one you need?
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?
Let me know, if you need additional help 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.