Create Accessible Tabs with HTML, CSS & JS

Creating tabs takes a bit of work, and making sure they’re accessible can be a little tricky. First, you should ask if you even need tabs in the first place, but assuming you do, this video looks at creating some progressively enhanced tabs.

🔗 Links

⌚ Timestamps
00:00 - Introduction
00:50 - Maybe tabs are a bad idea
03:13 - The HTML
06:45 - Showing only the active tab content
09:50 - Showing the correct tab panel when we click on a new tab
17:45 - Assistive technologies, ARIA, and roles
20:38 - Adding roles to the list and list items
26:30 - How to know the expected and best ways for interaction like this
28:30 - aria-controls don’t actually do anything?
29:58 - Making the panels focusable and the tabs and panels the correct roles
32:00 - Adding aria-selected to the active tab
33:10 - Styling it up with semantic CSS
35:14 - Updating the active panel when we select a new tab
36:40 - Giving screen readers more information
39:04 - Adding keyboard navigation to switch between tabs
50:15 - Improvements and changes that you can make to this

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[einatblackrose]

I really appreciate how you always consider the accessibility so much, and take the time and the effort to consult with others about it, and teach us how to implement it in real-life cases no matter how much code it takes to get to the point that it's actually useable to everyone. Keep it up!

[lucidattf]

i think a good example of when to use tabs is for when each tab isn't some information but a different page. i think the youtube channel page is a perfect example of this. the homepage of a channel includes the obvious stuff, so you can just scroll there, but there's tabs linking to what are kind of entirely different pages of the youtube channel for videos, playlist, the community tab, etc

[gio]

awesome approach! I actually wanted to create my own mini-lib to use it in production without re-inventing the wheel every time, i searched for some tutorial to get started from, but your code is so well-written & explained, it has all the essential features, that i just refactored it & added some options, and done! I thought i'd have to write all from scratch to make it high-quality & flexible enough, so u saved me at least a few hours! I actually learned (and still learning) a lot stuff from you, a lot more than my college professors would/can teach. Thank you for all this fabulous experience that you share with us!

[douglasf]

Great video! I just wish we emphasized more the contextual differences between a WEB APP and a WEB SITE when explaining the advantages/drawbacks of a specific technique/approach. No, don't avoid tabs at all costs by default before you understand this UI pattern and its use cases. First, consider your context (platform, requirements, information architecture, how familiar users are with a particular UI pattern, etc.), get informed, then decide on the best solution. Of course, we should respect certain principles (not hiding essential info from users, making the product accessible, etc.).

[rohan_debroy]

Please make more of these accessibility related content. This guide was really helpful. Thank you so much.

[Kevin-qzeq]

Some of us develop web *apps* and not just websites. tabs are probably the most easily understood way of depicting hierarchical data and functionality.

[lvekua]

Wow! amount of information packed in this video is just unbelievable. You break down the complex information so elegantly, that is a pure pleasure to listen and learn. Thank you Kevin! for all your hard work and support to the web community! ❤

[NicholasShanks]

e.preventDefault() should be after the call to switchTab() — it should always be the last line in the event handler, in case anything throws an exception. Following progressive enhancement principles, you want the browser default (e.g. navigate to the link) to happen if your flashy JS event handler thing fails. This means you should build your UI on something that works by default.

[connorwforsyth]

Kevin! This is awesome. I know this is mostly a CSS channel, but coding along with you through the practical JavaScript stuff was super helpful. 👏 More JavaScript stuff please.

[WPPatriot]

Gotta love those super ubiquitous UI-elements the tutorials for which always start out with "Are you *really* sure you want to use these?" 😂

[cyddorado]

thank you for uploading this I've been thinking about this projects recently then suddenly this video pops up

[_Wolf_-ibzd]

What a perfect time to post about tabs! I just got started on working with tabs and I didn't know how to approach it. This is perfect for me!!! Amazing info and greatly appreciated.

[davidfranklin]

Thank you Kevin! Detailed, thorough and brilliantly explained - as always!

[ezapi]

I never paid it any effort but video motivates learning and use of accessibility design guidelines very well

[sovereignlivingsoul]

you sure seem to have a lot of useful videos floating around when i need them, i happen to have a tablist on one of my pages, and i think it suits it very well, i think back when i may have even built sites based on tabs, but anyway, i do agree they like accordions, have their place, and the most important aspect of them i guess is the accessibility issue, i try to add aria to my pages, but they often get overlooked, however i think i am going to adopt alot of what you did in this video to my tablist, i do use html5 semantics more now, so less aria needed as it is

[giovannielias]

*Amazing video!*
I was trying to search for how to make accessible sites but I didn't find any results that i was looking for.
This video explained a lot to me.
*Thanks! keep it up! 😃👍*

[marcoio]

Why is your voice so calm and soft? I love it. Is it because you are canadian?

[frankroos]

I know I am late to the show. I missed this one when it was just out. It's a good one, though.

But most of what I saw done in javascript can be done entirely in html and css. The exact implementation may differ a bit by requirements. But there is an implementation for it without javascript. That way people with javascript off will still get some tab behavior.
The only exception is aria-selected. I'm not sure how to do that in just html and css, as it is an attribute that has to be put on and off.
The operation with left/right keys and the cycle through the tabs (start-end or end-start) will also be a challenge.

I think it would be fun to explore this. I may even do that sometime. I just can't point anyone to any results.

[JoseMVelazquez]

I've used tabs to group content on the mobile version of a site, content that on desktop fits perfectly on screen but on mobile requires a lot of scrolling, but also doesn't justify being on its own page.

[RobertGuttersohn]

Even if we were just using anchor tags to scroll to the different sections, I think I’d still add an aria label to each button explaining that you’ll be scrolling to a section and not reloading the page which is the expected behavior of an anchor tag.