Completed
- Showing the correct tab panel when we click on a new tab
Class Central Classrooms beta
YouTube videos curated by Class Central.
Classroom Contents
Create Accessible Tabs with HTML, CSS & JS
Automatically move to the next video in the Classroom when playback concludes
- 1 - Introduction
- 2 - Maybe tabs are a bad idea
- 3 - The HTML
- 4 - Showing only the active tab content
- 5 - Showing the correct tab panel when we click on a new tab
- 6 - Assistive technologies, ARIA, and roles
- 7 - Adding roles to the list and list items
- 8 - How to know the expected and best ways for interaction like this
- 9 - aria-controls don’t actually do anything?
- 10 - Making the panels focusable and the tabs and panels the correct roles
- 11 - Adding aria-selected to the active tab
- 12 - Styling it up with semantic CSS
- 13 - Updating the active panel when we select a new tab
- 14 - Giving screen readers more information
- 15 - Adding keyboard navigation to switch between tabs
- 16 - Improvements and changes that you can make to this
