Create Accessible Tabs with HTML, CSS & JS

Overview

Learn how to create accessible tabs using HTML, CSS, and JavaScript in this comprehensive 53-minute video tutorial. Explore the process of building progressively enhanced tabs, starting with the importance of considering whether tabs are necessary for your project. Dive into the HTML structure, implement tab functionality, and ensure proper accessibility through ARIA roles and attributes. Discover best practices for assistive technologies, keyboard navigation, and styling with semantic CSS. Gain insights on improving user experience for both visual and screen reader users, and explore potential enhancements to further customize your tab implementation.

Syllabus

- Introduction
- Maybe tabs are a bad idea
- The HTML
- Showing only the active tab content
- Showing the correct tab panel when we click on a new tab
- Assistive technologies, ARIA, and roles
- Adding roles to the list and list items
- How to know the expected and best ways for interaction like this
- aria-controls don’t actually do anything?
- Making the panels focusable and the tabs and panels the correct roles
- Adding aria-selected to the active tab
- Styling it up with semantic CSS
- Updating the active panel when we select a new tab
- Giving screen readers more information
- Adding keyboard navigation to switch between tabs
- Improvements and changes that you can make to this