How to make button accessible with keyboard

[ssin93]

Like when user click on the tab button the focus will go on button and if click on enter the button link will open.

[MukeshYadav_]

Hi @ssin93 ,

The tabindex attribute specifies the tab order of an element (when the "tab" button is used for navigating).

An element is clickable if it has an onclick event handler defined. You can make it focusable by adding a tabindex=0 attribute value to it. You can make it operable with the keyboard by defining an onkeydown event handler; in most cases, the action taken by event handler should be the same for both types of events.

https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Keyboard

https://stackoverflow.com/questions/46836636/how-to-make-my-click-accessible-through-keyboard-tab

Thanks

[EstebanBustamante · Accepted solution]

Hi, 

This is plain JS. One of the options is to use an anchor element (<a>) instead of a button element and style it to look like a button. Otherwise, you just need to add a listener to your button element to react to a key press event, ensuring the key is either the spacebar or enter button, and invoke whatever action is needed. If the button is not part of the document navigation, ensure you include it by using tabindex.
Here you have an example of the latter option:

https://www.w3schools.com/howto/howto_js_trigger_button_enter.asp 

https://stackoverflow.com/questions/8940714/set-tabindex-for-button-not-working

Hope this helps

[kautuk_sahni]

@ssin93 Did you find the suggestion helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you've discovered a solution yourself, we would appreciate it if you could share it with the community. Thank you!