Hello,
Fairly new to webflow so sorry if this is a simple question.
Problem: I want to put my tabs into a list. (Not the other way around).
Reason: I want to do this because of accessibility. For the screen reader to read this correctly (2.1 standard) it would have to read: Name of tab - selected tab - 1 of 3.
As of right now: The screen reader reads it like so - Name of tab - selected tab. This doesn’t give our non sighted folks a sense of how many tabs. To make the screen reader even read it correctly in the first place, I had to give the active tab a role=tab and an aria-selected=true attribute. For non selected tabs I gave it a role=tab and an aria-selected=false. Since I can’t have two attributes called role, I couldn’t add another role that said role=list role=listitem
Ideally: The tab hierarchy would like like so;
< div id=“tabs”>
< ul>
< li>Tab 1
< li>Tab 2
< li>Tab 3
< ul>
< /div> (I couldn’t figure out how to make this show up as code so i put a space after the carrot)
This is an example of a properly accessible tab list. It’s the example I’m striving for. https://codepen.io/jeffsmith/pen/YqrzOa/
How would I achieve this?
Thanks
Here is my site Read-Only: I am under contract and can’t share this link. Hopefully the example will help. I can also remake it if you need to see my current state.