Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

How to make button accessible with keyboard

Avatar

Level 2

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

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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



Esteban Bustamante

View solution in original post

3 Replies

Avatar

Community Advisor

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

Avatar

Correct answer by
Community Advisor

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



Esteban Bustamante

Avatar

Administrator

@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!



Kautuk Sahni