Make tabs more accessible


  1. Please allow the tabs content to be readable even when js is disabled on user device. It won’t be accessible, formatted or pretty when js is disabled but the content should be readable. Try this pen with js code removed.

  2. Add Home and End for Tabs Navigation.

Thank you!

1 Like

Hi @dranzer,

Could you possibly refer to the specifics that make our tabs not accessible?

If I’m not mistaken, we are compliant.

Hi @Louis

Thanks for your reply.

Pressing Home tab should move the focus to first tab and pressing end tab should move the focus to last tab. This does not work with the Cwicly tabs.

Hi @dranzer,

While they will be added, those keyboard functions you list (End and Home) are optional in the specifications if I’m not mistaken.
Our tabs are fully accessible.

1 Like

@Louis Thanks. I appreciate. If we think like that then the whole accessibility thing is optional. My suggestion come from here. Example of Tabs with Automatic Activation | APG | WAI | W3C

Their example is what considered a fully accessible tabs for now. You can test with Home and End keyboard shortcut. Though there is a good thing about Cwicly tabs. They work (text is readable) even with js disabled unlike many other builders. You will be happy to know that Cwicly will be the first wp builder to have fully accessible tabs after this change. Some body on Bricks discord posted comparison of such functionality on other builders and the results are not very encouraging.

Hi @dranzer,

I prefer referring to: WAI-ARIA Authoring Practices 1.2
This would imply our tabs are fully accessible.
We do take accessibility very seriously. We are currently revising our older blocks that might have specific issues (menu and gallery).

But your point is totally justified, although the title and original post make it seem as if our tabs are not compliant :wink:

1 Like

@Louis I am sorry. I had no intention to make it sound like that. I could have used better words there.

Accessibility standards are not stable yet and rapidly changing. There is a need to do more than less. May be going beyond the standards at some places and taking in what’s the best practices in the market. Not all standards are best for such users. At some places more is required. I’ll post some some recent articles I read about accessibility on css-tricks. They talk about the same.

I didn’t test properly the first time. Tabs does not work if js is disabled on user device. Content of other tabs is not readable. It should show even if js is disabled. Not formatted like tabs but in some way.

@Louis I have updated the feature request. Please take a look at the first post.