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
-
For the functionality, in your javascript:
const shortcuts = new Teclas(); shortcuts.init();
-
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:
-
Not importing the
~teclas/index.css
file into your styles, and -
Selecting
.__sk-letter
and declaring your custom styles there:// In your own CSS .__sk-letter { // your custom styles here }