# ✎ Technique: Keyboard operable custom controls

**Source**: https://accessibility.huit.harvard.edu/technique-keyboard-operable-custom-controls
**Parent**: https://accessibility.huit.harvard.edu/keyboard

Sometimes, design requirements mean that you need to create an interactive element from a base `<div>` element or a custom element like `<my-button>` rather than using a native HTML element.

Your element will not be accessible by keyboard unless it is included in focus order and it can be activated using the ENTER and SPACE keys.

## Example

Let's consider a `<div>` element with an `id` of "button", to which we want to attach JavaScript click events. The first thing we need to do for keyboard accessibility is make it focusable using a `tabindex` value of `0`:

`<div id="button" tabindex="0">trigger click event</div>`

Now keyboard users will be able to focus it like a standard `<button>` control. However, the only way to fire the click event is to click the element using the mouse. Unlike `<button>`s, `<div>`s don't support keyboard activation by default, so we have to trigger the click event using a custom key binding:

`var button = document.getElementById('button');`\
`button.addEventListener('keydown', function(e) {`\
`if (e.keyCode === 13 || e.keyCode === 32) {`\
`e.preventDefault();`\
`this.click();`\
`}`\
`});`

In the above code, we listen to `keydown` events on our button. If the key code associated with a keydown event matches either the ENTER key (13) or SPACE key (32), we call the button's click method, which simulates a mouse click to the button. To prevent the page from scrolling when the SPACE key is pressed, the default behavior is suppressed.

See also:

- [Techniques](https://accessibility.huit.harvard.edu/page-categories/techniques)
- [Controls](https://accessibility.huit.harvard.edu/accessibility-topics/controls)
- [Keyboard](https://accessibility.huit.harvard.edu/access-technologies/keyboard)
- [Speech recognition](https://accessibility.huit.harvard.edu/access-technologies/speech-recognition)
- [Switch-based input](https://accessibility.huit.harvard.edu/access-technologies/switch-based-output)
- [Keyboard ✎](https://accessibility.huit.harvard.edu/content/keyboard)
- [Support keyboard interaction ✎](https://accessibility.huit.harvard.edu/content/support-keyboard-interaction)
- [Operable](https://accessibility.huit.harvard.edu/techniques/principles/operable)
- [Blind](https://accessibility.huit.harvard.edu/disabilities/blind)
- [Motor impairment](https://accessibility.huit.harvard.edu/disabilities/motor-impairment)
- [HTML](https://accessibility.huit.harvard.edu/web-technologies/html)
- [JavaScript](https://accessibility.huit.harvard.edu/web-technologies/javascript)