Pan of gold nuggets Tab Panels Pan of gold nuggets

This page expolores how to ensure your Tab Panel interfaces are accessible to all users.


Problem: Many applications have Tab Panel style layouts that are not accessible.

Solution: Properly code Tab Panel style layouts for maximum accessibility and usability.


Considerations when creating Tab Panle layouts

Tab panel layouts are commonly used on web pages. A common example is when visiting a shopping site where the user selects a product, tab panels are used to display information about the product such as the description and details. The example on this page demonstrates this functionality.

Making tab panels accessible involves using proper semantic elements and structure, using proper aria, and ensuring the tab order makes sense.


Tab Panel Example

So you've been window shopping the internet for fishing lures. You have selected a product from an online retailer. And a fine choice it is.

Below is what you might typically see when deciding whether or not to purchase this item.


Selected Product


Rapala Original Floater

Product Description


The Rapala Original Floater Lure is hand-tuned and tank-tested to ensure world-renowned action straight from the box. The Rapala Original Floater can be used in a variety of different ways and features a natural minnow profile that fools the fish every time. Complete with premium black nickel VMC hooks, you can trust the Rapala Original Floater to take performance to the next level. Target a variety of species with the Rapala Original Floater.


If you aren't catching fish on a Rapala Original Floater, you're probably snagged in a tree or something.
Greg Pesall




Coding for Tab Panels

  1. Enclose the tab panel choices in a nav element.
  2. Use aria-controls on the nav element to indicate which panel it shows when clicked
  3. Use aria-current on the currently selected nav element to indicate which panel is currently active

Helpful Links for Tab Panels

Gold Nugget Create Accessible Tabs with HTML, CSS & JS

This video has some very good information regarding tab panels and accessibility. The coding on this page is not the same as is demonstrated by Kevin Powel. He uses extensive javascript and relies heavily on dynamically changing css class properties to make things work. With .Net and Blazor pages, it is much simpler and much less coding. No javascript is used in the example above.