Stabbable

Inspiration

Did you know that YouTube has a secret button? When you land on the website, press tab 3 times. You'll see a button called "Skip Navigation" pop out of nowhere.

You might know that pressing tab allows you to navigate a website from your keyboard. However, there can be many things in the way, from images to links. Toggling a Skip Navigation skips the clutter and only tabs into important elements of the website.

While this feature is unknown to many, for some, it's a major accessibility boost. Stabbable is a quick way to add a Skip Nav into any website, with minimal editing.

What it does

Stabbable is a quick way to add a Skip Nav into any website, with minimal editing. Simply include it at the head of your HTML

<script defer> stabbable.js </script>

Add skiptab to any element:

<button class="skiptab"> Let's go! </button>

And pick skip-tabbable elements:

<a s-tabbable href="/?originalUrl=https%3A%2F%2Fdevpost.com%2Fsomewhere%2520important!!"> Something important!! </a>

How we built it

Using Javascript and selectors everywhere

Challenges we ran into

JQuery didn't cooperate and I rewrote everything without it

Accomplishments that we're proud of

Accessibility is cool

What's next for Stabbable

More variants (tab to search, tab to skip to content, etc)

Built With

• javascript