Create Accessible Tabs with HTML, CSS & JS

Create Accessible Tabs with HTML, CSS & JS

Kevin Powell via YouTube Direct link

- Updating the active panel when we select a new tab

13 of 16

13 of 16

- Updating the active panel when we select 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. 1 - Introduction
  2. 2 - Maybe tabs are a bad idea
  3. 3 - The HTML
  4. 4 - Showing only the active tab content
  5. 5 - Showing the correct tab panel when we click on a new tab
  6. 6 - Assistive technologies, ARIA, and roles
  7. 7 - Adding roles to the list and list items
  8. 8 - How to know the expected and best ways for interaction like this
  9. 9 - aria-controls don’t actually do anything?
  10. 10 - Making the panels focusable and the tabs and panels the correct roles
  11. 11 - Adding aria-selected to the active tab
  12. 12 - Styling it up with semantic CSS
  13. 13 - Updating the active panel when we select a new tab
  14. 14 - Giving screen readers more information
  15. 15 - Adding keyboard navigation to switch between tabs
  16. 16 - Improvements and changes that you can make to this

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.