Selecting tab using keyboard 'enter'

Hello Webflow folks,

I am trying to make the tab widget more accessible on my current project by allowing the user to use the ‘tab’ keyboard button to navigate to different tabs within the webflow tab widget. I am able to get the system to navigate to the different tabs but the tab widget does not navigate to the tab content when I select ‘enter’ on the keyboard.

Is there a work around or something I can do to allow the user to view the tab content by pressing ‘enter’ on the keyboard, similar to pressing left-click on the mouse?


Here is my public share link: [LINK]1
(how to access public share link)

1 Like

Hello @Chris_Pennell

There’s no way to do this natively, you will need to use custom code for this. I’m not a coder myself but I can tell you that Webflow doesn’t support this functionality natively.

Hope this helps.

I’ve got the same issue here: Our Team | Resource Training & Solutions
I’m able to focus on the tabs using the keyboard, but unable to actually select it.

Anybody got custom code for this? I’ll post if I find anything.

You can make the tab navigation accessible to keyboards by adding a href="#" attribute to the nav links. Unfortunately this cannot be done in the Designer because the href tag is a reserved name so it has to be done with JavaScript. You can do that by pasting in this code in Custom Code > Footer Code

<script>
$('.w-tab-link').each(function() {
  $(this).attr("href", "#");
});
</script>

To resolve this, I am looking at the HTML code and JavaScript code associated with the tab widget to identify the steps required to make it keyboard accessible. I am also consulting with the webflow team to see if they have any tips on how to make the tab widget more accessible. Additionally, I am researching best practices for making content more accessible for users with disabilities.