Accessible Tabs

Preview

A tab component built with support for keyboard navigation and screen readers. Tested with VoiceOver on macOS.

Based on an example from W3 found here:

https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html

Features

• Accessible to screen reader and keyboard interactions (try it!)
• Adheres to good user experience and design practices
• Semantic HTML
• Vanilla JS. No libraries needed, but utilizes features from ES6+, so you might consider compiling with Babel.
• Vanilla CSS. Combines utility and BEM classes.