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.
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.
For the styles:;
or your JS:;
Teclas has a few configuration options, during instantiation:
||The key what activates the shortcuts. Only supports single keys.||
||Function to execute when Teclas is active; when the start key has been pressed and the elements are highlighted.||none|
||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 =startKey: 'x'console;
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.cssfile into your styles, and
.__sk-letterand declaring your custom styles there://