How to make button accessible with keyboard

Question

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

EstebanBustamante · Accepted Answer

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

MukeshYadav_ · Answer

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-tabThanks

Sign up

Login with SSO

Login to the community

Login with SSO