Teclas

The simplest way to make all your site’s interactions accessible via keyboard

Give your users the ability to efficiently navigate and interact with your whole site using only their keyboards. Turn them into power users. ⌨️

What it does

With Teclas, users will be able to press F (or any other letter key; it's configurable), and every interactive element on the page – links, buttons, textareas, inputs – will be highlighted with a letter/sequence. Users can then press an element's letter/sequence and it will trigger that element's interaction – clicking on links and buttons, or focusing on inputs.

With minimal effort, your site becomes completely usable with only the keyboard.

Users don't need to figure out nor remember specific shortcut sequences and you don't have to configure them.

Framework-agnostic

Teclas works directly on top of the DOM. So it does not matter how the DOM is generated. This means it can work alongside any framework or library like React, Vue, Ember, Angular and any other or none at all.

Simplest Usage

1. For the functionality, in your javascript:

   const shortcuts = new Teclas();
   shortcuts.init();

2. For the styles:

   @import '~teclas/index.css';

   or your JS:

   import '~teclas/index.css';

Custom Configuration

Functionality

Teclas has a few configuration options, during instantiation:

Option	Description	Default
startKey: string	The key what activates the shortcuts. Only supports single keys.	"f"
onActive: () => void	Function to execute when Teclas is active; when the start key has been pressed and the elements are highlighted.	none
onInactive: () => void	Function to execute when Teclas becomes inactive; after an element has been triggered by a letter/sequence.	none

To customize these, pass them during instantiation:

const sk = new Teclas({
  startKey: 'x',
  onActive: () => console.log('It is active!'),
});

Styling

Teclas includes nice defaults styles for the shortcut letter indicators, but if you'd like to customize them, you could do so by:

1. Not importing the ~teclas/index.css file into your styles, and

2. Selecting .__sk-letter and declaring your custom styles there:

   // In your own CSS
   .__sk-letter {
     // your custom styles here
   }