Accessibility First DevRel. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
Just so you know there is a minor mistake with your tablist example, you have an aria-labelledby that is pointing to a non-existent ID.
Also aria-selected="true" on two tab buttons would be an accessibility error that may cause confusion, one should be false or non existent!
One last thing that is particularly unusual about tabs is that it is one of the few times it is recommended that you add tabindex="0" to the tabpanel that is currently active.
Senior front-end developer who mainly work in the Microsoft 365 -sphere. 👩🏻💻 Sharing the things I know, and the things I’m learning. I also like to draw ✍🏻
Work
Senior front-end developer / M365 consultant at Point Taken AS
Thanks for the feedback! :) The two first are copy paste errors on my part! And I didn’t catch it when reading through, so Thank you for pointing those out! I will update the post and fix the errors.
The tabindex usecase I wasn’t aware of, so I learned something new! Thanks! :)
Accessibility First DevRel. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
A great look at a bit more detail.
Just so you know there is a minor mistake with your tablist example, you have an
aria-labelledbythat is pointing to a non-existent ID.Also
aria-selected="true"on two tab buttons would be an accessibility error that may cause confusion, one should be false or non existent!One last thing that is particularly unusual about tabs is that it is one of the few times it is recommended that you add
tabindex="0"to thetabpanelthat is currently active.Only minor but just thought I would let you know.
Either way have a ❤ and a 🦄!
Thanks for the feedback! :) The two first are copy paste errors on my part! And I didn’t catch it when reading through, so Thank you for pointing those out! I will update the post and fix the errors.
The tabindex usecase I wasn’t aware of, so I learned something new! Thanks! :)
No problem, it was a great deeper dive and I know what it is like with examples!
I look forward to the next entry in the series! ❤