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
✅ The finished code: codepen.io/kevinpowell/pen/oN...
✅ Accessibility guidelines for tabs: www.w3.org/WAI/ARIA/apg/patte...
✅ Heydon Pickering’s site: heydonworks.com/
✅ Heydon’s Webbed Briefs (watch these, they’re great): briefs.video/
✅ Equalize Digital’s Accessibility Checker for WordPress: equalizedigital.com/accessibi...
⌚ 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
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
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 KZbin channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[@farhan-app]

PURE GOLD. Please keep up the "accessible component" tutorials!

[@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

[@theseangle]

Yep cuz those have infinite scrolls

[@Kevin-qz4eq]

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

[@christiannies3822]

What exactly is the difference between a website and a webapp? And if there is a difference, why “just” and why should a well designed interface pattern not work in this particular context?

[@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.).

[@gio2156]

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!

[@rohan_debroy]

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

[@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! ❤

[@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.

[@_Wolf_-ib9zd]

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.

[@christiannies3822]

Yes, isn't it? I had the same moment last year and since then i refactor parts of it once a week or so. And in the end, i realized, it is not such a nice pattern at all, but the amount of learning by constantly improving down the road cannot be weight with gold. Sometimes it feels a bit like ZEN: Wake up, do your tab stuff, delete it, go to bed. Wake up, … ;)

[@cyddorado8350]

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

[@LePhenixGD]

I was really struggling to make them accessible but thanks to you I made it!

[@kiovo1983]

Hugely helpful, thanks man

[@MM_Sheehan]

You're Canadian! That explains so much! Happy Canada Day!

[@blokche_dev]

Thanks for sharing. We don't often come across this progressive enhancement approach.

[@giovannielias8153]

*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! 😃👍*

[@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

[@astrotoolau]

I always thought Kevin was saying "Hello my Front-end friends" at the start lmao

[@KazHachiOreki]

isn't that what he said?

[@astrotoolau]

@@KazHachiOreki The captions says "Friend and Friends"

[@KazHachiOreki]

@@astrotoolau they are auto generated captions which are wrong most of the time unless you're speaking very slowly and with really good enunciation

[@KevinPowell]

I say front-end friends, the auto-captions got it wrong :D

[@daveturnbull7221]

The system AI feels that Kevin SHOULD be saying Friend and Friends. Next stage is it will autocorrect his audio.

[@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?" 😂

[@kylevandeusen]

Amber Hinds is the bomb! So glad y'all connected!

[@frankroos1167]

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.

[@marcoio8742]

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

[@feldinho]

Great video as always! Specially that bit of UX wisdom in the beginning: everybody doing it doesn't mean it's a good idea. Btw, have you ever talked about margin collapse? Your last video made me think about how I heavily rely on it for flow content, but it isn't something I can easily explain to others.

[@KristianLindbjerg]

I appreciate the importance of having a no-js solution. My only problem with it in this case is the layout shift caused by hiding elements with JS upon load. Maybe that would be an idea for a video on best practices to handle that.

[@0-Will-0]

I use the Quasar framework (Excellent btw) and it has things like tab components built-in but it's good to have a better of understanding of things like accessibility issues.

[@lukas.webdev]

Great video! Keept it up 😉

[@Tausif_Khan_07]

Make some tutorials like this. CSS + JavaScript 💥

[@injSrc]

I think you don't have to explain the basic stuff of JavaScript because if a person is learning something like this then you can expect them to understand those pretty easily.

[@mahadevovnl]

Using tabs needs to be done after carefully considering how they should behave. Very often, you'll want the tab state changes to be reflected in the URL. That way, you can share that particular tab with others, and your navigation (back/next) will work intuitively. That means your tabs need to be tags with an href attribute, not a . And for the love of all that's nice in the world: don't nest a inside an , I've reviewed thousands of applicants over the years, and ~75% of all so-called "front-end" devs happily do exactly that (and so much more W3 errors)... I made a former employer hundreds of millions by making sure that their tabs made use of the history API. Before: user clicks on a product, clicks on reviews tab, clicks and ends up on the search results page again. They lost the product. After: user clicks on a product, clicks on reviews tab, clicks and ends up back on the product details page. Conversion rate shot up immensely.

[@JenniferSaenz]

This is so true. And as a user who has hit the back button and not arrived back on the location I thought I should, I did not take the extra time to go back so that totally makes sense to me; I'd abandon an item if the site kicked me out.

[@sanjaux]

I'm tab brained I can't help it I love those things! Particularly on a timeline/content feed of sorts but also for information sorting. It feels like you know what you're going to get with tabs and where it's going to be compared to the example with the docked tab showing both "overview" and "specifications" on the page at once (plus extra space at the top) you only get what you clicked on with tabs which feels a lot more focused.

[@sanjaux]

I do think for the sites that showcase tabs poorly they could visually indicate if something is a tab a bit better though for sure because being used to that doesn't always mean it's a good thing

[@BlameItOnGreg]

In your beginning big-box-store example, as a user, I definitely prefer the tabs over the auto-scroll. I have literally complained about giant endless scrolling layouts sooo many times before when I’m on websites. I particularly hate Amazon’s implementation of it.

[@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.

[@chelsealeonhardt1667]

Hi Kevin! I'm kind of new at front end, and I'm finding your videos so helpful! I was wondering if you use webpack, parcel, or something else to organize your code? What would you reccommend? P.S. I'd love to see a video on this topic if its something that interests you. Thanks!

[@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.

[@andreas6508]

Hi, really great video. Do you have other video that's related to "popup" accessibility such as Modal, Tooptip, Dropdown menu, custom Select menu, etc?

[@dailyDiary213]

The best way to teach us would be if you give challenges at the end of the vedios for the people who are watching your vedios ❤

[@abdohatemeldosoky]

YooooHoooo that was lots of fun 😀

[@ammaraateeb1914]

If fetching data of a class of 130 students divided in sections A to E, populated in a table. Tabs for each section makes total sense to contain the information in a relatively compact space if compared to one long table or data spanning over several pages.

[@theodorealenas3171]

I want to make videos in your style one day. I just can't relax enough for some reason.

[@ChrisL820]

Great content. I tend to avoid using Tabs for the same reason I avoid Menubar. Not only is there a whole bunch of JavaScript required to sort out the keyboard support and tabindex, as you show us here. But, importantly, the experience of a user tabbing through a site then having to swich to a different browsing method (arrows), then back again, can be very confusing. That is to say, keyboard users may not necessarily have the aria roles announced to them. Perhaps consider . If something can be achieved without aria we should favour it.

[@TechBuddy_]

Wow awesome video ❤. Learn this stuff for sure but just use prebuilt libs like headless ui or something for accessibility. There is a very high probability that you get this stuff wrong and make it worse than the default behaviour. I once had to build a multi select element because the designer wanted completely custom and highly branded inputs and I know the pain of building accessible shit and testing them. It is too much to build the right thing on your own trust me!

[@LastRoseStudios]

Your tabsContainer event listeners should probably be on tabsList and not tabsContainer. If there is a link in the tab panel, it would trigger the event listerner.

[@kalyanmatta3034]

hi a huge thanks for giving such great content regarding CSS. I am watching your videos regularly. But can you please post videos on how much HTML and CSS are enough to move forward and if possible Upload the road map to CSS for the flow of learning?

[@vivianliu5011]

accessibility has become a such huge thing right now and I have to redo many works to cater for it. The bad thing is there are many very popular component library claim themselves as accessible but truly isn't. Kevin, really appreciate to see you put your effort them and show us how to build our own with right way.

[@vilijanac]

I use JQuery which has a widget-type approach to provide internally all the javascript functionality and a uniform look. The end result less code on the development side. However, jQuery also dresses up dynamically with colors the look and feel. It takes advanced programming to override with inline CSS selectors the standard dress-up of JQ. I could not find help on that online. Managed to do it. In comparance. the HTML you have in your example is almost identical. Mine CSS is minimal and neglectable, and the javascript is all around 10 lines. I thought you might like to know about this.

[@agustinperezdelcastillo1593]

@KevinPowell the disord community invite link attached to the video description seems to have expired or be broken somehow... any chance you could share a fresh one with us? would love to join in order to get a closer look and be more involved with the community of devs around you as your videos have been a major factor and help inspiring and nurturing a lot of my projects so far. :))

[@ThefirstAbraham]

I would like to ask if it’s adviceable to learn saas or just use normal css

[@stratboy2]

Great. And how about the radio buttons version? :)

[@okerror1451]

@Kevin Powell I have a request, that I wasn't able to find. If I wanted to make a map of my country, Denmark, with the 5 different regions, shown on a map as vector graphics, which I can hover over, so they change colour, and click on, so a user goes to a relevant page, how do I do that. I hope this is relevant. It looks like I need a parent svg element, and a bunch of a tags with nested path elements, and some JS to deal with the hovering. Obviously this wont work well on non-mouse platforms, but perhaps there is also a cute solution for that. Hope this is a nice challenge :) Thanks a lot for the super fun content

[@mushuplatypus]

Would it be very wrong to use definition lists for tabs?

[@ShaunLevett]

It’s mad that we don’t have native tabs by now. Also native pagination for scroll-snap items would be great. In terms of the JS, it’s something I do struggle with. I can see and understand everything that’s happening, but the planning of how you’re going to write it is what loses me. How you decide to create a function here or nest something there etc.

[@WeFightTheCorruption]

I did something similar to this recently for a very large health provider's website. The difference is that my accessible tabs component turns into an accordion in mobile screen widths. Browser history on tab clicks is also a great feature. You should try that next! I'd like to see how you would solve it.

[@mohammedzeeshan8647]

nice. very nice, excellent. can you also make those tabs swipeable?

[@fnarena345]

Great accessible tab component! How did you manage to make NVDA not override the functionality of the arrow keys. In your tab component, even when NVDA is active, the focus rings are displayed when I navigate through the tabs with the arrow keys. I am currently working on an accessible accordion based on dt and dd tags. As soon as NVDA is active, the focus rings are no longer displayed when navigating with the arrowDown and arrowUp arrow keys. However, when I navigate through the accordion using the Tab key, the focus rings are still displayed, even if NVDA is active. My accessible accordion is designed so that I can navigate through the accordion using both the Tab key and the arrow keys. I have noticed that NVDA determines the functionality of the arrow keys itself. This partially overwrites the behavior previously defined by JavaScript. How can I bypass this feature of NVDA?

[@milanthapa3490]

sir can you make a video on Tailwind CSS. Whats your opinion on Tailwind. Should we learn it or should we just stay focused on CSS only

[@The14Some1]

24:15 I think, instead of doing all that shenanigans to pretend it is a tablist, altering taborder and intercepting keyboard, the proper way is to use a form with set of radio inputs, that do have the required behaviour by default.

[@luca9298]

Hi Kevin, I was wondering if you had a portfolio. I’d like to see some of your work

[@toma1610]

I died! for tabs on 2005. DW CS3 implemented it and I wanted to used without knowing javascript. Many websites used tabs and I didn‘t know how did they achieve it. Some people told me ajax, and so on... Then, when arised the concept of responsive design, I decided to leave out the tabs. On a mobile could work like accordion, right?

[@charliesumorok6765]

There was an implementation on MDN. I can’t find it anywhere.

[@kevsmith562]

It was definitely there a couple of weeks ago because I implemented it 😂

[@kevsmith562]

It's under the aria role docs iirc

[@charliesumorok6765]

I remember seeing it for demos before MDN Plus

[@JeffHanke]

Interesting video. Any thoughts on doing this with pure css and radio inputs? I searched on google and found a pretty good one.

[@RodrigoMendoza7]

That's a pretty interesting point. I have another point I'd like @KevinPowell to touch on. What's the difference between using the HTML attribute "hidden" and using the CSS sentence "display: none"? How could we determine the correct approach to take?

[@sto2779]

home depot got an interesting ui/ux.

[@mityukov]

Attention: preventing click's default in the entire container may be a bad idea if some of your tabs are going to have links or forms or something else "interactable" ;)

[@oro5421]

Why not just use and .tab:not(:has(:checked)) {display: none}

[@ChrisL820]

Because WCAG 3.2.2. Changing the state of a UI component shouldn't trigger a change of context (without prior warning)

[@marc_h_cl]

i found that people don't scroll anymore so tabs could a quick easy way to show mini pages -

[@KevinPowell]

Who doesn't scroll anymore? 🤔

[@bill4824]

Anyone else just starting to learn web dev? I have you learned a little bit, so now you just read source codes, even though you have no idea what it means?

[@_Wolf_-ib9zd]

Yes!

[@donniedamato]

When programming the arrowkey navigation, I like to think of the tabs as an array of items. Then going to the next item is easier by increment/decrement of the index. const $lis = [...tabsList.children]; // Store list children const direction = (['ArrowLeft', 'ArrowRight'].indexOf(ev.key) * 2) - 1; // Returns -1 for left and 1 for right. const index = $lis.findIndex(($li) => $li.closest('[tabindex=0]')); // Index of the currently active tab li. const next = ((index + next) % $lis.length + $lis.length) % $lis.length; // index wrapping $lis.forEach(($li, i) => $li.setAttribute('tabindex', i === next ? 0 : -1)); // Update all the tabindicies

[@jonldavis]

Can you do a video or explain how to loop through numbered variables in js? var tes1 = "test1" var tes2 = "test2" var tes3 = "test3" var tes4 = "test4" var tes5 = "test5" for....

[@ornous]

It's probably not something you want to do. An array would be advisable here e.g. var test = ['test1', 'test2', ''test3', ...] then you can use a foreach loop to access them. Again though, I can't think of a reason you'd want to use static variables for something dynamic unless you weren't in control of their initialisation somehow. That said, if you're in a browser, you can access those variables using the window object, using the array syntax: var tes1 = 'test1' var tes2 = 'test2' for (let i = 1; i

[@jonldavis]

@@ornous The problem with an Object or an Array is when I assign it to Local Storage and go back and want to delete that item, if it's in a array or object I delete everything using removeItem(keyName). .... Maybe I'm doing that wrong ...... but I did find an answer on stackoverflow.....

[@jonldavis]

let count = 5; var test1 = "test1" var test2 = "test2" var test3 = "test3" var test4 = "test4" var test5 = "test5" for (let i = 1; i

[@ornous]

@@jonldavis You should know eval is extremely dangerous as it will evaluate anything. In this instance your var is somewhat controlled but if you have an XSS vulnerability people can really exploit your site and users. This is why I proposed the window approach to you as it works just as well in your situation but doesn't have the security issues associated with eval. RE local storage, you probably want to read the array, remove what you need to remove then use setItem("name", JSON.stringify(updatedArray)) to encode a new value

[@CJCJCJCJ]

@@jonldavisn, why not modify an array instead of deleting a whole entry? Maybe I’m sleep deprived and I’m not reading this right but this seems like a completely avoidable problem if you just had an object array you read from local storage and used a filter/splice/indexOf or something to remove individual entries. If you’re using an array and you’re using removeItem and it deletes the whole thing, you’re using one or both of those features wrong.

[@SXsoft99]

It's just another button

[@JosephCodette]

All for a11y , but the DX is horrible on this one. The majority of people who turn off JS are devs/ privacy fanatics / 'hackers', I can't really find numbers about impaired or challenged users not wanting to use JS . But then again the guidelines are there, so let's just follow them until better solutions arise . You said you would love HTML based tabs. I think that CSS could do a better job at that, something like a checkbox hack but then not a hack.

[@christiannies3822]

Well. Hearing this thing about “Why should a person disabling JS” assumptions for more than 20 years. It is not (only) about users, it is about sessions, whicht-in turn-is about money ;)

[@haukurorsson833]

Tabs and carousels .... usually not neccessary.

[@IamAhmedKhalifa]

Thing is, like all of your videos (apart from one, which is the interview with Ashlee Boyer who is an expert in web accessibility), this video is not captioned hence it's not accessible. Is that not a bit ironic? 🤔 It's a real shame that only certain people can access your videos, and the effort in making the high video production is important but making it accessible is not, despite the channel growth.

[@faki0006]

Dude you write a lot of JS for simple tabs system.

[@kvetoslavnovak423]

JavaScript solution is not the best way to go. Radio inputs with some CSS or just a simple link navigation to different pages is much better INHO

[@user943fd43jfkdlsajf]

1st

[@johnryder8464]

Tabs are terrible for mobjle.